extjs
文章平均质量分 93
包包_安安
每天一点点
展开
-
Sencha Architect使用treepanel的简单demo
树形菜单是管理系统必备的控件之一,extjs中的树形菜单非常强大,使用也非常方便,基本满足了我们开发的所有需求。基本上成为了标配,下面本文将使用Sencha Architect来制作一个简单的treepanel菜单。 1.打开Sencha Architect新建一个ext js 4.1.x工程,保存到我们之前创建的ssh工程里面去,方便我们使用tomcat进行调试。也可以创建一个简原创 2012-12-24 22:39:34 · 4199 阅读 · 4 评论 -
EXTJS4.x之国际化
extjs工程实现国际化支持,但是在Sencha Architect 里面我还没找到实现方法,所以只能在源码上来实现了,下面我们来实现一个国际化的例子:使用Sencha Architect 创建localization工程,保存到webroot目录下,并制作以下界面保存并运行一下可以看到现在是英文的下面我们关闭Sencha Architect,在myeclips原创 2013-05-18 19:43:18 · 5624 阅读 · 0 评论 -
EXTJS4.x之实战项目(1)
今天开始做一个资源管理项目做为实战。用Sencha Architect创建一个名字为“admin”的工程,保存在webRoot目录下。1.添加Viewport。在设计窗口中拖入一个Viewport设置以下属性:UserClassName:设置为BoboViewport;layout:设置为border;2.创建左侧菜单TreePanel.在设计窗口拖入一个Tre原创 2013-07-04 11:06:11 · 4529 阅读 · 2 评论 -
EXTJS4.x之实战项目(2)左侧菜单数据填充数据
1.拖入一个TreePanel到MenuPanel中设置以下属性id: 'BaseContentManaget';title: '基础数据管理';userClassName:'BaseContentManaget';rootVisible: false;在BaseContentManaget上右键点击"Promote To Class"提升到类,完成后工程如下图原创 2013-07-04 13:57:13 · 4392 阅读 · 8 评论 -
EXTJS4.x之实战项目(9)SectionContentGridPanel栏目内容管理页的实现
上面的文章管理,媒体管理和栏目管理都差不多,实现之后效果如下图由于栏目内容管理与其他的不同所以我们这里来详细实现一下。1)为SectionContentGridPanel添加一下控件toolbar,combobox,button和textfield。属性如下图效果2)为combobox配置数据源由于combobox的数据源是栏目列表故我们可以直接使用原创 2014-06-14 16:07:22 · 2048 阅读 · 0 评论 -
EXTJS4.x之实战项目(3)菜单控制器MenuPanelController
上次我们完成了菜单界面的制作。接下来来我们来做响应事件。1.添加Conroller,如下图添加一个Controller设置userClassName为MenuPanelController添加四个函数(Functions),添加方法如下图init无参数;getTab参数为 viewName;onItemClick参数为 view,record,item,in原创 2014-06-14 16:11:17 · 2264 阅读 · 1 评论 -
EXTJS4.x之实战项目(4)填充ArticleGridPanel的数据
经过上面的步骤我们可以得到大致的程序框架,可以切换tabpanel的显示内容,下面我们来填充ArticleGridPanel数据。1.添加model,如下图,添加一个ModeluserClassName配置为ArticleInfo。为ArticleInfo添加以下field:2.创建store,配置以下属性userClassName : ArticleStore原创 2014-06-14 16:12:15 · 1518 阅读 · 0 评论 -
EXTJS4.x之实战项目(5)ArticleGridPanel实现增删改查之增
增删改查是每个系统都必备的基础功能,下面就以文章资源管理为例实现增删改查功能。1)为ArticleGridPanel添加控件,如下图红色部分所示TextField的labelAlign要设置为right才能得到上述效果。2)添加ArticleGridPanelController,添加一个Controller设置以下属性:userClassName : ArticleGri原创 2014-06-14 16:12:52 · 1814 阅读 · 0 评论 -
EXTJS4.x之实战项目(8)ArticleGridPanel实现增删改查之查
现在实现增删改查的最后一个功能,查询功能。为了简单起见我们这里只实现通过文章名称查询的功能。1)编写ArticleGridPanelController的search函数,输入如下内容:var grid = sender.ownerCt.ownerCt;proxy = grid.store.getProxy();kw = sender.ownerCt.child("textfield[原创 2014-06-14 16:14:20 · 1731 阅读 · 0 评论 -
EXTJS4.x之可编辑的grid
先看完http://blog.csdn.net/yunji3344/article/details/8789876这里。本文是基于上面一篇文章的修改。修改以下几个java文件News.javapackage org.extbook.pojo;import java.io.Serializable;import java.util.Date;import javax.pers原创 2014-06-14 16:09:07 · 5831 阅读 · 0 评论 -
EXTJS4.x之无限级树形菜单实现
目前在Web应用程序开发领域,Ext JS框架已经逐渐被广泛使用,它是富客户端开发中出类拔萃的框架之一。在Ext的UI控件中,树形控件无疑是最为常用的控件之一,它用来实现树形结构的菜单。TreeNode用来实现静态的树形菜单,AsyncTreeNode用来实现动态的异步加载树形菜单,后者最为常用,它通过接收服务器端返回来的JSON格式的数据,动态生成树形菜单节点。生成树有两种思路,一种是一次性生成原创 2013-04-28 11:30:02 · 2922 阅读 · 0 评论 -
EXTJS4.x之grid(1)
Grid表格是ExtJS的核心组件之一,它提供了展示强大数据的最佳途径。在ExtJS4.x中该组件经过了完全的重构,变得更加快速、轻便并且更容易进行定制。Grid组件的重要特性包括:智能渲染、标准布局、数据视图、特性支持、虚拟滚动和编辑改进。 Grid控件和其它可以显示数据的控件,能够支持多种数据类型,如二维数组、Json数据和XML数据,甚至包括我们自定义的数据类型。Ext为我原创 2013-01-20 23:36:35 · 4637 阅读 · 2 评论 -
ExtJS 4.x开发之准备浏览器
1.要求:1.1 浏览器:extjs 4 支持所有的主流浏览器,从微软的ie6到最新版的google chrome都是支持的。作为开发者,在开发期间我们需要选择其中一个作为调试工具,一般我们选择以下三种方案之一:1)GoogleChrome 10+ 2)AppleSafari 5+ 3)Mozilla Firefox 4+ 结合 Firebug Web De原创 2012-12-25 22:33:35 · 2366 阅读 · 4 评论 -
SenchaEclipsePlugin-1.1.0的使用
关于SenchaEclipsePlugin插件的安装和使用使用过eclipse开发java程序的人都知道eclipse带有强大的代码提示功能,非常好用。遗憾的是不是所有语言都能很好的支持,比如我们开发sencha touch和ext js就不能支持了。所以我们需要额外安装一个插件---SenchaEclipsePlugin。此款插件可以使你在eclipse开发环境下开发javascript变得原创 2012-12-20 17:23:08 · 2936 阅读 · 13 评论 -
ext图形开发工具SenchaArchitec初体验
以前用过delphi和vb开发程序,一款图形开发ide对于我们的开发帮助是非常大的。也许有很多大神会很不屑,但是我认为拖拉控件也没什么不妥的,起码我在开发android应用的时候会用layout编辑器来预览视图。对于刚入门ext的新手倒是不错,先用ide生成代码然后在看代码,修改代码...下面我来介绍一下SenchaArchitec的使用吧:Sencha Architect是个可视化的应用原创 2012-12-22 13:35:06 · 4000 阅读 · 1 评论 -
EXTJS4.x之grid(3)实现删除用户功能
之前一节中我们实现了添加用户功能,现在我们来实现删除用户功能1.我们要实现批量删除功能,所以要配置grid支持多选模式,为myGrid添加一个Ext.selection.CheckboxModel即可如下图启动服务器看看,如果看到下图效果就ok了2.为删除用户button添加一个handler,内容为 var selRecords = Ext.getCmp("myGr原创 2013-01-27 21:50:56 · 2383 阅读 · 0 评论 -
EXTJS4.x之grid(2)--实现添加用户功能
在上一节中我们利用GridPanel实现了后台jsp的增删改查接口,并通过store得到数据展示在grid上了。实现了基本的数据显示,这节我们将实现添加数据到用户表中,实现如下图效果 要达到这个效果我们要使用到ext js的Window控件,下面我们先来学习一下Window对象的一下知识。Ext.Window是一个专门的面板用于应用程序的窗口。默认情况下Windows是浮动的,可以原创 2013-01-27 21:05:33 · 3644 阅读 · 0 评论 -
EXTJS4.x之一个简单的主界面
之前我们用FormPanel实现登录界面,接下来我们实现一个简单的程序主界面,同样我们使用Sencha Architect作为开发工具。新建一个extjs4.x工程并保存为main工程在javaweb工程的WebRoot目录下。1.拖拉一个Viewport控件到设计界面中,的到如下图视图区控件Viewport官方文档是这样描述的一个专门的容器,可视的应用领域(浏原创 2013-01-14 00:16:38 · 5383 阅读 · 2 评论 -
EXTJS4.x表单系统之 Ext.form.FormPanel登录框demo
Ext.form.FormPanel的帮助文档:http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Panel查阅手册得知:FormPanel 为表单提供一个标准容器,它的本质是一个标准的 Ext.panel.Panel,它会自动创建一个BasicForm并管理任何添加到其中Ext.form.field.Field的对象。此外还包括配置和原创 2013-01-13 12:37:51 · 5911 阅读 · 7 评论 -
EXTJS4.x之ToolBar的使用
面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext中工具栏是由Ext.Toolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏,可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。现在我们来试试:1.Sencha Architect创建工程,同样保存到WebRoot目录下,我的保存为toolbar工程。containe原创 2013-01-14 21:37:34 · 7806 阅读 · 2 评论 -
EXTJS4.x之combobox的使用
ComboBox控件是一个下来选框,可以实现自动完成,实现远程加载,和许多其他功能。ComboBox是像传统的HTML中和的结合,用户可以自由输入到字段中,或挑选一个下拉选择列表的值。默认情况下,用户可以输入任何值,即使它不会出现在选择列表中,为防止自由形式的值,一般对其进行限制列表中的项目,editable:去掉钩钩和forceSelection设置为true。选择列表中的选项进行填原创 2013-02-01 00:23:31 · 9161 阅读 · 5 评论 -
EXTJS4.x之实战项目(7)ArticleGridPanel实现增删改查之删
接下来实现删除功能,删除功能不需要复杂的界面,只需要获取用户选中的行,然后从中获取id,最后把要删除的id提交给后端程序即可。由于要实现同时删除多个功能,所以我们之前已经把gridpanel的selModel设置成CheckboxModel以此来支持批量删除。1)编写ArticleGridPanelController的del函数,内容如下: var grid = sender.ow原创 2014-06-14 16:13:51 · 1645 阅读 · 0 评论