一个UI前台组件肯定会比较多，我们通常习惯性的使用ID来获取需要操作的组件，但是这种方法是extjs推荐的么？有没有extjs推荐使用的获取组件的方法呢？ # 目录 - [目录](#) - [extjs的查询组件的API](#) - [查询实例](#) - [基本的组件查询](#) - [组件树查询](#) - [通过组件的属性检索](#) - [属性匹配操作符](#) - [逻辑运算的](#) - [官方案例](#) ### extjs的查询组件的API 组件查询API文档地址：5.1.0-apidocs/#!/api/Ext.ComponentQuery-method-query 可以看到是使用的Ext.ComponentQuery这个单例的query方法来进行查询的。 ### 查询实例 ### 基本的组件查询 1. 查询xtype组件 ~~~ prevField = myField.previousNode('textfield'); ~~~ 这表示查询所有 textfield 以及继承自TextField的组件都会被查询。 ~~~ prevTextField = myField.previousNode('textfield(true)'); ~~~ 这表示只查询TextField类的，其他继承类不用去查询，只需要传入true表示严格查询即可。 1. ID或者ItemID查找 #myContainer 当需要查询ID定义的组件的时候，可以使用#来查询。 1. xtype和ID或者ItemID组合使用 ~~~ panel#myPanel ~~~ 这样可以尽可能的减少ID带来的冲突，对xtype进行了一次过滤。 ### 组件树查询 看下面一个查询实例： ~~~ window[title="Input form"] textfield[name=login] ^ form > button[action=submit] ~~~ 语句从左到右执行，执行完成一个，就按照当前找到的那个再接着往下执行。所以这句话的意思是： 找到标题为Iput form的window的叫做login的textfield的父窗体中button的提交名称为submit的那个按钮。 ### 通过组件的属性检索 上述例子就可以看到 当查询title为Input form的window的时候就是使用的组件的属性。 ### 属性匹配操作符 1. = 表示严格等于 。 1. ~= 表示只要搜索到检索词即可。 1. ^= 表示以什么什么 开头 1. $= 表示以什么什么结尾的 1. /= 表示支持正则表达式的 ### 逻辑运算的 1. and逻辑 ~~~ Ext.ComponentQuery.query('panel[cls~=my-cls][floating=true][title$="sales data"]'); ~~~ 这种类型的是表示逻辑and 1. or逻辑 ~~~ Ext.ComponentQuery.query('field[fieldLabel^=User], field[fieldLabel*=password]'); ~~~ ### 官方案例 ~~~ // retrieve all Ext.Panels in the document by xtype var panelsArray = Ext.ComponentQuery.query('panel'); // retrieve all Ext.Panels within the container with an id myCt var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel'); // retrieve all direct children which are Ext.Panels within myCt var directChildPanel = Ext.ComponentQuery.query('#myCt > panel'); // retrieve all grids or trees var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel'); // Focus first Component myFormPanel.child(':focusable').focus(); // Retrieve every odd text field in a form myFormPanel.query('textfield:nth-child(odd)'); // Retrieve every even field in a form, excluding hidden fields myFormPanel.query('field:not(hiddenfield):nth-child(even)'); ~~~

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/43487751](http://blog.csdn.net/sushengmiyan/article/details/43487751) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ sencha extjs 5 增加一个struts2的配置，这样可以在设置好前台布局之后，与后台交互获取数据显示。现在有一个问题是struts2对于url的跳转action支持比较良好，但是对于像Extjs这样，ajax请求的，无url跳转的实现，还是需要一点点技巧的。本文实例讲解一个Ext.Ajax.request的请求实例，返回后台处理之后的结果。 ### 步骤一：创建struts2的配置文件struts.xml ~~~ <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <constant name="struts.devMode" value="true" /> <package name="basicstruts2" extends="struts-default"> <action name="index"> <result>/index.jsp</result> </action> </package> </struts> ~~~ 这个文件需要放置在src目录下，可以在下载的struts2中的webapp下找一个文件来直接使用，不需要自己一行代码一行代码的去敲，毕竟我们会使用就可以了。 ### 步骤二：对web.xml修改，增加struts2的支持 ~~~ <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> ~~~ 这表示struts2会接管所有的请求，这样我们前台的请求都会纳入struts2的支持了 ### 步骤三：增加struts2核心jar包以及struts2依赖的jar包 需要的jar包邮以下几个：  1.commons-fileupload-1.3.1.jar 2.commons-io-2.2.jar 3.commons-lang3-3.2.jar 4.freemarker-2.3.19.jar 5.javassist-3.11.0-GA.jar 6.ognl-3.0.6.jar 7.struts2-core-2.3.20.jar 8.xwork-core-2.3.20.jar 这8个jar包都可以在struts2的lib包里面找到，拷贝到项目lib目录下就可以了，依赖的jar包之前有专门罗列过，参照： [http://blog.csdn.net/sushengmiyan/article/details/43272061](http://blog.csdn.net/sushengmiyan/article/details/43272061) 到此为止，我们的项目就配置成功了struts2，怎么去验证成功与否呢?我们使用extjs写一个ajax的request ### 步骤四：书写前台ajax请求 ~~~ Ext.Ajax.request({ url: 'foo', async: false, success: function(response) { debugger; var data = Ext.decode(response.responseText); console.log(data); } }); ~~~ 这里使用Ext.Ajax.request发送请求，指定了url为foo这个url就对应着struts2的一个action连接。我这里不太喜欢配置xml文件，而是喜欢使用struts2的注解的方式来实现跳转，所以下一步，增加一个注解插件 ### 步骤五 增加struts2的注解插件 jar包增加struts2-convention-plugin-2.3.20.jar 步骤六：熟悉后台实现代码 在src目录下增加自己的实现类 我这里新建了一个包com.oasystem.action 新增一个类TestAction ~~~ package com.oasystem.action; import java.io.IOException; import java.util.HashMap; import java.util.Map; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import org.apache.struts2.convention.annotation.Action; import org.apache.struts2.convention.annotation.Result; import com.opensymphony.xwork2.ActionSupport; public class TestAction extends ActionSupport { private static final long serialVersionUID = 5316344216452587235L; private String _dc; //这里就是使用注解指定struts2 action调用的地方 @Action(value = "/foo") //方法设置成了void 不需要返回数据之间将数据写回到response中了 public void foo() { HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("utf-8"); String abc = "{'a':'测试'}"; try { response.getWriter().write(abc); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } }; public String get_dc() { return this._dc; }; public void set_dc(String dc) { this._dc = dc; }; } ~~~ OK测试一下，启动tomcat服务器，执行这个ajax请求：  命令行输出内容：  OK到现在，就已经成功将struts2与sencha extjs实现了关联。所有的后台都可以由struts2来接管了。

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/42940883](http://blog.csdn.net/sushengmiyan/article/details/42940883) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 使用sencha cmd build app 生成的工程，我们期望只使用cmd打包好之后的那一个压缩后的js，而不用将体积庞大的所有ext代码都部署。 试了一下ext的官方例子，打包之后，我们使用build\production\yourappname 目录下的文件都可以了。将这个目录下的文件部署到tomcat下，增加WEBINFO和下面的web.xml文件。启动tomcat. 使用cmd生成默认的例子，部署了一下，发现可以正常运行。 总结一下：使用纯净的ext产生的文件，使用cmd打包之后，将所有文件都压缩了，在没有涉及到后台交互的情况下，直接将build下那个工程的文件拷贝到tomcat即可正常运行你所编写的程序，而且这样，也不会将你的源代码直接发布。 提交一个部署中遇到的问题，打包之后，发布到tomcat 启动报错，内容如下： ~~~ NetworkError: 404 Not Found - http://localhost:8080/extoa/.js?doc=142183145561 TypeError: c is not a constructor return new c(a[0]) ~~~  深入查看后，发现问题出在我使用了ext.define动态去创建类，但是这个类又不在我本地硬盘上有对应的js文件，cmd打包的时候又要根据这个define的路径去找我的类，结果就没有找到，于是加载 空.js 所以会报错。错误示例代码如下： ~~~ getModelByViewModel: function(viewModelConfig) { var me = this; var modelClass = 'oaSystem.model.auto.' + viewModelConfig.data.modelName; return Ext.ClassManager.get(modelClass) || Ext.define(modelClass, { extend: 'Ext.data.Model', idProperty: viewModelConfig.data.primaryKey, // 设置模块model的主键 nameFields: viewModelConfig.data.nameField, // 设置模块model的名称字段 identifier: viewModelConfig.data.keygenType, // 设置模块model的主键生成方式 fields: me.getModelFields(viewModelConfig.data.fields), // 设置字段 // 取得主键值 getIdValue: function () { return this.get(this.idProperty); }, // 取得当前记录的名字字段 getNameValue: function () { if (this.nameFields) return this.get(this.nameFields); else return null; } }) }, ~~~ modelClass为动态获取，动态创建这个类，cmd打包之后，根据这个类名去找js文件，结果没有找到。所以报错 在不打包的情况下，这个方法是可行的... 解决方法暂时想到使用集合方式，如下： ~~~ dataModels: new Ext.util.MixedCollection,//键值对集合，可以集合json数据 //1. 通过data中fields配置生成一个DataModel getModelByViewModel: function(viewModelConfig) { console.log('11111 im here come to catche me!'); var me = this; if (viewModelConfig) { }else viewModelConfig = this.viewModelConfig; var modelClass = 'oaSystem.model.auto.' + viewModelConfig.data.modelName; //var modelClassAlias = viewModelConfig.data.modelName; //debugger; if (this.dataModels.get(modelClass)){ return this.dataModels.get(modelClass) }else{ console.log('ccc im here come to catche me!'); var abc = Ext.widget('modeldatamodel', { idProperty: viewModelConfig.data.primaryKey, // 设置模块model的主键 nameFields: viewModelConfig.data.nameField, // 设置模块model的名称字段 identifier: viewModelConfig.data.keygenType, // 设置模块model的主键生成方式 fields: me.getModelFields(viewModelConfig.data.fields) // 设置字段 }); this.dataModels.add(modelClass,abc); return abc; } }, ~~~ 这样cmd再打包就不会出错了，先定义一个oaSystem.model.DataModel这个基类。然后判断是否存在再生成。

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/42240531](http://blog.csdn.net/sushengmiyan/article/details/42240531) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 本文以一个实际例子，使用了extjs的gridpanel中的分组统计显示功能，涉及知识点： Ext.grid.Panel  model/store store中的data grid中的features以及其中ftype: 'groupingsummary'等 一、先看效果图：  可以看到图片显示的安装月份进行了分组显示 在每个分组下面会有合计和平均值显示。我这个例子在IE8和谷歌浏览器以及火狐浏览器下均正常显示。 二、贴上所有的代码(其实就只有一个jsp页面就足够了) ~~~ <%@ page contentType="text/html; charset=UTF-8" %> <% String context = request.getContextPath(); %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>报表</title> <script type="text/javascript"> window.context = "<%=context%>"; </script> <script type="text/javascript" src="<%=context %>/extjs5/include-ext.js"></script> <script type="text/javascript" src="<%=context %>/extjs5/packages/ext-locale/build/ext-locale-zh_CN.js"></script> <script type="text/javascript" src="<%=context %>/app/ux/Month.js"></script> </head> <body> <script type="text/javascript" > Ext.onReady(function(){ var data = [{ factory:'第一家维修公司', date:'2014-05', cost:52492.0, costav:52492.0 },{ factory:'第二家维修公司', date:'2014-05', cost:760.0, costav:760.0 },{ factory:'第三家维修公司', date:'2014-05', cost:1807.0, costav:1807.0 },{ factory:'第一家维修公司', date:'2014-06', cost:4921.0, costav:4921.0 },{ factory:'第二家维修公司', date:'2014-06', cost:1020.0, costav:1020.0 },{ factory:'第三家维修公司', date:'2014-06', cost:1637.0, costav:1637.0 },{ factory:'第一家维修公司', date:'2014-07', cost:48150.0, costav:48150.0 },{ factory:'第二家维修公司', date:'2014-07', cost:7940.0, costav:7940.0}]; var store = Ext.create('Ext.data.Store', { fields: [{name: 'date'}, {name: 'cost'},{name: 'costav'},{name: 'factory'}], groupField: 'date', data: data }); var grid = Ext.create('Ext.grid.Panel', { frame: true, height: 800, columnLines: true, // 加上表格线 features: [{ id: 'group', ftype: 'groupingsummary', groupHeaderTpl: '{name}'+'月份车辆美容及维修费用', hideGroupedHeader: false, enableGroupingMenu: false }, { ftype: 'summary', summaryType: 'average', dock: 'bottom' }], renderTo: Ext.getBody(), columns: [{ text: '维修时间', dataIndex: 'date',width:100, summaryRenderer: function(value, summaryData, dataIndex) { return '合计'} },{ text: '维修费用(元)', dataIndex: 'cost', width:180, field: { xtype: 'numberfield'}, summaryType: 'sum', renderer: function(value, metaData, record, rowIdx, colIdx, store, view){ return value + ' 元'}, summaryRenderer: function(value, summaryData, dataIndex) { return value + ' 元'} },{ text: '维修厂家', dataIndex: 'factory',width:120, summaryRenderer: function(value, summaryData, dataIndex) { return '平均值'} },{ text: '', dataIndex: 'costav', width:180, field: {xtype: 'numberfield'}, summaryType: 'average', renderer: function(value, metaData, record, rowIdx, colIdx, store, view){ return ''},//这列最后显示平均值 暂时这样转换显示 summaryRenderer: function(value, summaryData, dataIndex) { return value + ' 元'} }], store: store }); grid.show(); }); </script> </body> </html> ~~~ 这个随便起名一个jsp就可以啦。 里面使用了一个日期选择控件，只可以选择年月的。顺便也贴一下代码吧 ~~~ /**Months picker 重写 field.Date **/ Ext.define('app.ux.Month', { extend:'Ext.form.field.Date', alias: 'widget.monthfield', requires: ['Ext.picker.Month'], alternateClassName: ['Ext.form.MonthField', 'Ext.form.Month'], selectMonth: null, createPicker: function() { var me = this, format = Ext.String.format; return Ext.create('Ext.picker.Month', { pickerField: me, ownerCt: me.ownerCt, renderTo: document.body, floating: true, hidden: true, focusOnShow: true, minDate: me.minValue, maxDate: me.maxValue, disabledDatesRE: me.disabledDatesRE, disabledDatesText: me.disabledDatesText, disabledDays: me.disabledDays, disabledDaysText: me.disabledDaysText, format: me.format, showToday: me.showToday, startDay: me.startDay, minText: format(me.minText, me.formatDate(me.minValue)), maxText: format(me.maxText, me.formatDate(me.maxValue)), listeners: { select: { scope: me, fn: me.onSelect }, monthdblclick: { scope: me, fn: me.onOKClick }, yeardblclick: { scope: me, fn: me.onOKClick }, OkClick: { scope: me, fn: me.onOKClick }, CancelClick: { scope: me, fn: me.onCancelClick } }, keyNavConfig: { esc: function() { me.collapse(); } } }); }, onCancelClick: function() { var me = this; me.selectMonth = null; me.collapse(); }, onOKClick: function() { var me = this; if( me.selectMonth ) { me.setValue(me.selectMonth); me.fireEvent('select', me, me.selectMonth); } me.collapse(); }, onSelect: function(m, d) { var me = this; me.selectMonth = new Date(( d[0]+1 ) +'/1/'+d[1]); } }); /**Months picker **/ ~~~ 知识点梳理： ①。显示的数据，这里整理好了一些数据，在实际中，我们可以通过查询数据库获取，分组查询便可。 ~~~ var data = [{ factory:'第一家维修公司', date:'2014-05', cost:52492.0, costav:52492.0 },{ factory:'第二家维修公司', date:'2014-05', cost:760.0, costav:760.0 },{ factory:'第三家维修公司', date:'2014-05', cost:1807.0, costav:1807.0 },{ factory:'第一家维修公司', date:'2014-06', cost:4921.0, costav:4921.0 },{ factory:'第二家维修公司', date:'2014-06', cost:1020.0, costav:1020.0 },{ factory:'第三家维修公司', date:'2014-06', cost:1637.0, costav:1637.0 },{ factory:'第一家维修公司', date:'2014-07', cost:48150.0, costav:48150.0 },{ factory:'第二家维修公司', date:'2014-07', cost:7940.0, costav:7940.0}]; ~~~ ②store数据交互 ~~~ var store = Ext.create('Ext.data.Store', { fields: [{name: 'date'}, {name: 'cost'},{name: 'costav'},{name: 'factory'}], groupField: 'date', data: data }); ~~~ 这里只需要指定一个groupField就可以了，只需要这一步。 ③。grid主体 ~~~ var grid = Ext.create('Ext.grid.Panel', { frame: true, height: 800, columnLines: true, // 加上表格线 features: [{ id: 'group', ftype: 'groupingsummary', groupHeaderTpl: '{name}'+'月份车辆美容及维修费用', hideGroupedHeader: false, enableGroupingMenu: false }, { ftype: 'summary', summaryType: 'average', dock: 'bottom' }], renderTo: Ext.getBody(), columns: [{ text: '维修时间', dataIndex: 'date',width:100, summaryRenderer: function(value, summaryData, dataIndex) { return '合计'} },{ text: '维修费用(元)', dataIndex: 'cost', width:180, field: { xtype: 'numberfield'}, summaryType: 'sum', renderer: function(value, metaData, record, rowIdx, colIdx, store, view){ return value + ' 元'}, summaryRenderer: function(value, summaryData, dataIndex) { return value + ' 元'} },{ text: '维修厂家', dataIndex: 'factory',width:120, summaryRenderer: function(value, summaryData, dataIndex) { return '平均值'} },{ text: '', dataIndex: 'costav', width:180, field: {xtype: 'numberfield'}, summaryType: 'average', renderer: function(value, metaData, record, rowIdx, colIdx, store, view){ return ''},//这列最后显示平均值 暂时这样转换显示 summaryRenderer: function(value, summaryData, dataIndex) { return value + ' 元'} }], store: store }); ~~~ 这里需要注意，1.需要给grid指定高度，如果不指定IE8下数据不显示,应该是个bug吧。 2.分组以及统计的关键 ~~~ features: [{ id: 'group', ftype: 'groupingsummary',//分组统计，可以选择不分组的，各类型可以去API查找 groupHeaderTpl: '{name}'+'月份车辆美容及维修费用',//标题而已 hideGroupedHeader: false, enableGroupingMenu: false }, { ftype: 'summary',//下方的汇总的 summaryType: 'average',//类型是求平均值，还有sum等，可以去API查找 dock: 'bottom' }], ~~~ OK 就这样设置，就可以简单的实现一个分组报表统计了，有求平均值求和等方法。简单易用

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/42016107](http://blog.csdn.net/sushengmiyan/article/details/42016107) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 为方便起见，使用sencha cmd创建一个工程，使用app build命令build工程，使用web start命令启动服务。 好了，现在更改下main.js中的一点代码，增加如下内容到panel中： ~~~ ,{ xtype: 'combo', width: '100', labelWidth: '40', fieldLabel: 'Theme', displayField: 'name', valueField: 'value', //labelStyle: 'cursor:move;', //margin: '5 5 5 5', queryMode: 'local', store: Ext.create('Ext.data.Store', { fields: ['value', 'name'], data : [ { value: 'neptune', name: 'Neptune主题' }, { value: 'neptune-touch', name: 'Neptune Touch主题' }, { value: 'crisp', name: 'Crisp主题' }, { value: 'crisp-touch', name: 'Crisp Touch主题' }, { value: 'classic', name: 'Classic主题' }, { value: 'gray', name: 'Gray主题' } ] }), //value: theme, listeners: { select: function(combo) { var theme = combo.getValue(); var href = 'ext/packages/ext-theme-'+theme+'/build/resources/ext-theme-'+theme+'-all.css'; var link = Ext.fly('theme'); if(!link) { link = Ext.getHead().appendChild({ tag:'link', id:'theme', rel:'stylesheet', href:'' }); }; link.set({href:Ext.String.format(href, theme)}); } } } ~~~ main.js代码应该如下所示：（完整内容） ~~~ /** * This class is the main view for the application. It is specified in app.js as the * "autoCreateViewport" property. That setting automatically applies the "viewport" * plugin to promote that instance of this class to the body element. * * TODO - Replace this content of this view to suite the needs of your application. */ Ext.define('oaSystem.view.main.Main', { extend: 'Ext.container.Container', requires: [ 'oaSystem.view.main.MainController', 'oaSystem.view.main.MainModel' ], xtype: 'app-main', controller: 'main', viewModel: { type: 'main' }, layout: { type: 'border' }, items: [{ xtype: 'panel', bind: { title: '{name}' }, region: 'west', html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>', width: 250, split: true, tbar: [{ text: 'Button', handler: 'onClickButton' },{ xtype: 'combo', width: '100', labelWidth: '40', fieldLabel: 'Theme', displayField: 'name', valueField: 'value', //labelStyle: 'cursor:move;', //margin: '5 5 5 5', queryMode: 'local', store: Ext.create('Ext.data.Store', { fields: ['value', 'name'], data : [ { value: 'neptune', name: 'Neptune主题' }, { value: 'neptune-touch', name: 'Neptune Touch主题' }, { value: 'crisp', name: 'Crisp主题' }, { value: 'crisp-touch', name: 'Crisp Touch主题' }, { value: 'classic', name: 'Classic主题' }, { value: 'gray', name: 'Gray主题' } ] }), //value: theme, listeners: { select: function(combo) { var theme = combo.getValue(); var href = 'ext/packages/ext-theme-'+theme+'/build/resources/ext-theme-'+theme+'-all.css'; var link = Ext.fly('theme'); if(!link) { link = Ext.getHead().appendChild({ tag:'link', id:'theme', rel:'stylesheet', href:'' }); }; link.set({href:Ext.String.format(href, theme)}); } } }] },{ region: 'center', xtype: 'tabpanel', items:[{ title: 'Tab 1', html: '<h2>Content appropriate for the current navigation.</h2>' }] }] }); ~~~   纠结了很久的问题终于释怀了。之前看的都是使用swapstylesheet我一直么有成功过。偶尔看的了这篇文章，觉得不错，果真成功了。 [http://extjs.eu/lightweight-theming/](http://extjs.eu/lightweight-theming/) 推荐一下，这个网站，内容比较充实，界面也比较好看。就是有些插件需要花钱购买。

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/41911539](http://blog.csdn.net/sushengmiyan/article/details/41911539) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 官方博客发布了这个新版本说明，英文文章请戳下面 [http://www.sencha.com/blog/announcing-sencha-ext-js-5.1/](http://www.sencha.com/blog/announcing-sencha-ext-js-5.1/) 翻译版本请戳下面： [http://extjs.org.cn/node/736](http://extjs.org.cn/node/736) 新版本下载地址： [http://www.sencha.com/products/extjs/download/ext-js-5.1.0/3301](http://www.sencha.com/products/extjs/download/ext-js-5.1.0/3301)或者 [http://cdn.sencha.io/ext/gpl/ext-5.1.0-gpl.zip](http://cdn.sencha.io/ext/gpl/ext-5.1.0-gpl.zip) extjs的doc文档下载地址（sencha extjs 5 doc文档下载地址）： 5.1版本的地址：[http://cdn.sencha.com/downloads/docs/ext-docs-5.1.zip](http://cdn.sencha.com/downloads/docs/ext-docs-5.1.zip) 想下载哪个版本的，就将最后的版本更改一下就可以啦。 sencha doc的下载方式：在doc页面 左上角的倒三角，看到右边有offline doc的，点击就可以下载啦。 

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/41242993](http://blog.csdn.net/sushengmiyan/article/details/41242993) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 使用cmd打包ext的时候报了一个诡异的错误。细细找来，发现是代码书写导致。现在记录一下： 错误详细信息： [ERR] C2009: YUI Parse Error (identifier is a reserved word => debugger;) -- unknown-file:198775:12 [ERR] C2009: YUI Parse Error (Compilation produced 1 syntax errors. => null) -- unknown-file:2 [ERR] [ERR] BUILD FAILED [ERR] com.sencha.exceptions.ExBuild: Failed to compress input [ERR]   at com.sencha.tools.compressors.yui. [ERR] YuiJavascriptCompressor$2.invoke(YuiJavascriptCompressor.java:103) [ERR] [ERR] Total time: 10 seconds [ERR] The following error occurred while executing this line: E:\workspaces\myeclipse2014\newcourt\WebRoot\.sencha\app\build-impl.xml:260: The following error occurred while executing this line: E:\workspaces\myeclipse2014\newcourt\WebRoot\.sencha\app\js-impl.xml:59: com.sen cha.exceptions.ExBuild: Failed to compress input 看错误第一行就可以看出是解析 debugger的时候出错的，看我的代码，发现我调试的时候debugger写入了没有去掉，打包的时候就出现了这个错误，将debugger去掉，再重新打包，发现，程序正常打包。

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/40507383](http://blog.csdn.net/sushengmiyan/article/details/40507383) 插件下载: [http://download.csdn.net/detail/sushengmiyan/8085851](http://download.csdn.net/detail/sushengmiyan/8085851)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ ### 介绍 sencha eclipse插件提供了一个集成的开发环境，方便javascript编写，更方便ext js和sencha touch编写高效、精确的代码。这个插件是在VGET项目（java script的eclipse插件）中的。它将标准的文本编辑和简单的javascript编写替换为IDE开发环境下的带功能等，具体方便如下： 1.代码补全、代码模板、快速精确的书写javascript代码向导。 2.查找javascript类型和继承关系的能力，等等 3.类似java的语法检查，帮助查找错误。 4.javascript的运行测试以及调试。 插件还提供了其他的一些java的IDE类似功能，如高亮显示、语法高亮等等。 对于extjs和sencha touch来说，插件提供了如下的性能： 1.代码助手     Ext的全局变量、包路径、属性、方法等      指定类型的方法      一个类型的全部描述信息显示 2.支持如下：   JSDuck类型的文档生成器，像@参数{String/Date[]}我的参数   工厂化方法推断：如Ext.create   对象迭代助手，像Ext.application{}   匿名函数，像Ext.each   单例，如Ext.Date   使用xtype来配置选项  给Ext.create函数增加如fullname xtype以及alias等配置 对Ext.define也同样优秀的支持 已知的合法性检查  减少对方法的引用的时候会提示警告  当传入不正确的配置的时候会报错 sencha eclipse plugin可以和JSDuck协同工作 JSDuck在github上的路径为：[https://github.com/senchalabs/jsduck](https://github.com/senchalabs/jsduck)  可以使用这个项目来生产extjs的文档。 下面是一些支持的一些类型注解 @return  @private @property @protected @type @cfg @param 根据名字都应该知道具体的意思了，不过多阐述 ### 下面重点说说这个插件的安装 要想安装使用这个插件，需要做三步： 1. 安装eclipse的3.7或者4.0、4.1版本（indigo/juno）注意，还没有使用aptana测试呢 2.安装VJET和sencha eclipse插件 3.导入extjs和sencha touch 类库 安装eclipse就自行安装吧 ### 安装VJET和Extjs插件 如果有安装之前版本的这个插件，请先卸载。 1.解压下载的这个插件包 2.在eclipse/myeclipse中，选择 help/install new software(在myeclipse2014中，选择install from site) 弹出选择框后，选择刚刚解压的那个插件包，注意这是30天试用版本哦。 3.将VJET和extjs插件一起选中，安装。 ### 导入extjs的类库 注意选择合适的jstl包。如 ExtJSTL-4.0.7-gpl.zip 在eclipse/myeclipse中选择 文件 导入，进入导入向导。选择general-existing projects ->next 过程中出现错误可以忽略。 这个完成之后，还需要在新建工程的时候，选择新建VGET工程，然后将代码包含到工作空间。 OK，到此就可以了。感觉很费劲！ 插件下载地址：[http://download.csdn.net/detail/sushengmiyan/8085851](http://download.csdn.net/detail/sushengmiyan/8085851)

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/40427543](http://blog.csdn.net/sushengmiyan/article/details/40427543) mvvm方式实现登陆的博客：[http://blog.csdn.net/sushengmiyan/article/details/38815923](http://blog.csdn.net/sushengmiyan/article/details/38815923) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 之前写过一篇文章，是[ Extjs5MVVM模式下系统登录实例](http://blog.csdn.net/sushengmiyan/article/details/38815923) 这文章写完之后，有人就提出了一个疑问，就是每次点击都会弹出登陆这个登陆窗体，想实现登陆之后就不再有登陆窗体这个界面，正因为那个问题于是产生了今天这篇文章。 方法一：官方网站---登陆体验实例：[http://docs.sencha.com/extjs/5.0/tutorials/login_app.html](http://docs.sencha.com/extjs/5.0/tutorials/login_app.html)  增加一个登陆的标志，根据登陆与否，显示不同的界面 方法二：使用window.open实现网页跳转。 第一步：下载extjs5   [http://download.csdn.net/detail/sushengmiyan/7701943](http://download.csdn.net/detail/sushengmiyan/7701943) 第二步： 创建index.html和app.js，内容如下： app.js ~~~ Ext.application({ name : 'EnterSellSaves', launch : function() { Ext.create('Ext.Panel', { renderTo : Ext.getBody(), width : 200, height : 150, bodyPadding : 5, title : 'Hello World', html : 'Hello <b>World</b>...' }); } }); ~~~ index.html ~~~ <!DOCTYPE html> <html> <head> <title>欢迎来到 Ext JS!</title> <link rel="stylesheet" type="text/css" href="ext5/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"> <script type="text/javascript" src="ext5/build/ext-all.js"></script> <script type="text/javascript" src="ext5/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script> <script type ="text/javascript" src="app.js"></script> </head> <body></body> </html> ~~~ 在登陆界面，登陆按钮增加一个函数 onclick="login()" 函数实现如下： ~~~ <script type="text/javascript"> function login(){ window.opener = null; window.open('','_self'); window.close(); window.open('index.html','11','location=0,resizable=no,fullscreen=true,titlebar=no,status=no,toolbar=no,menubar=no,left=0,top=0'); } </script> ~~~ 这样就能打开到index,html 对于逻辑判断，就可以更改为jsp啊ASP啊。 这个方法，可以使用sencha cmd生成应用程序框架，也可以使用自己手动引入js文件。感觉还不错。 最终效果---登录页面  登录跳转之后  页面跳转之后，URL也完成了。

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39667533](http://blog.csdn.net/sushengmiyan/article/details/39667533) 官方文档:[ http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.data.Store-method-getFilters](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.data.Store-method-getFilters)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 我后台使用的JFinal，前台是extjs5，数据需要往后台传输。JFinal对所有的请求都进行了拦截，那么在controller中就可以截获loaddata方法。在loaddata中进行后台数据获取和组装，并传入前台就可以实现前后台互动了。 前台数据： ~~~ { text: '点此进入后台', listeners: { click: function(e) { var value = e.up('toolbar').down('datefield').value; proxy = clxxStore.getProxy(); proxy.setFilterParam('date'); clxxStore.remoteFilter = true; clxxStore.getFilters().removeAll(); newActiveFilter = new Ext.util.Filter({ property: 'date', value: value }) clxxStore.getFilters().add(newActiveFilter); clxxStore.load(); }, } } ~~~ 后台数据获取： ~~~ @ActionKey("/someaction") public void list (){ //获取了前端传入的日期 String date = getPara("date"); if (date != null){ //这里根据date进行数据获取和组装。} String JsonStr= "{'items':[{'描述':'0212120', '是否': false, '字段一': 'aaa','字段二': 'sss','字段三': 'aa','字段四': 'sss','字段五': 'sss', '字段六': 'sss','字段七': 'sss'}]}"; renderJson(JsonStr); } ~~~

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39665979](http://blog.csdn.net/sushengmiyan/article/details/39665979) 官方文档:[ http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.column.Date](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.column.Date)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 在使用表格的时候，我们默认都是加载一些文本文字，可是偶尔我们还有个性化的需求，比如我想增加一个选择框，或者我需要一个日期的输入。那么这时候，就需要配置gridpanel的格式属性了。 配置的时候遇到了这个错误：TypeError: headers[i].getCellWidth is not a function  我配置的代码如下 ~~~ Ext.create('Ext.grid.Panel', { frame: true, columnLines: true, // 加上表格线 selType: 'cellmodel', dockedItems: [{ xtype: 'toolbar', dock: 'top', items: [{ xtype: 'label', text: '使用日期：', //glyph: 0xf016, //handler: 'addRecord', },{ xtype: 'datefield', name: 'dateuse', format: 'Y-m-d', submitFormat: 'Y-m-d' },{ text: '查看此段', listeners: { click: function() { alert('I was clicked!'); }, } }] }], renderTo: Ext.getBody(), columns: [ { text: '车辆', dataIndex: '车辆' }, { text: '选择', dataIndex: '选择', xtype: 'checkbox'},//这个地方想配置选择框 { text: '星期一', dataIndex: '星期一' }, { text: '星期二', dataIndex: '星期二' }, { text: '星期三', dataIndex: '星期三' }, { text: '星期四', dataIndex: '星期四' }, { text: '星期五', dataIndex: '星期五' }, { text: '星期六', dataIndex: '星期六' }, { text: '星期日', dataIndex: '星期日' } ], store: clxxStore }).show(); ~~~ 在配置选择框的地方我配置的xtype为checkbox就出错了。原因是对于gridpanel中的这个属性，有单独的组件配置：  所以想配置check的话就需要找到这个的别名chekcolunm Ok.就这样解决问题了。

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39395753](http://blog.csdn.net/sushengmiyan/article/details/39395753) 官方例子:[ http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.Labelable-cfg-beforeLabelTpl](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.Labelable-cfg-beforeLabelTpl)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 在注册页面获取填写信息的界面，我们都能看到必填选项的标志* 这个东西。在Ext中，我们可以通过fieldLabel来创建一个标签，但是没有选项明确指出有必填选项的配置，刚才看了下官方的examples/kitchensink/#form-contact例子，发现有个beforeLabelTpl配置可以用来设置必填选项的*标志。 看一下效果先：  在标签的左边就增加了*必填标志。 实现方法： ~~~ items:[{ xtype: 'textfield', name: 'username', labelWidth: 50, fieldLabel: '用户名', beforeLabelTextTpl: [ '<span style="color:red;font-weight:bold" data-qtip="必填选项">*</span>' ], //allowBlank: false, emptyText: '用户名或邮箱地址' },{ xtype: 'textfield', name: 'password', labelWidth: 50, inputType: 'password', fieldLabel: '密 码', beforeLabelTextTpl: [ '<span style="color:red;font-weight:bold" data-qtip="必填选项">*</span>' ], //allowBlank: false, emptyText: '请输入您的密码' }] ~~~ 通过设置beforeLabelTextTpl配置，我们可以避免了每一次都在标签前面自己写个星号，再写标签名称那样粗鲁的方法了，可以这样自定义方式实现选项的标签配置。 2.labelAlign标签对齐方式 还有，标签的显示，我想把‘用户名’和‘密码’这两个对其，就是想在密码中间加个空格，但是我尝试之后发现不可行，不知道是不是ext的bug还是故意这么做的。后来发现可以设置label的对齐方式，设置为右对齐，那么密码的码字就和用户名的名字对齐了。但是前面字体还是不对齐，相比之下，又好看了一点啊。 ~~~ fieldDefaults: { labelAlign: 'right', labelWidth: 115, msgTarget: 'side' }, ~~~  3.错误提示信息msgTarget： 一共可以设置qtip、title、under、side、none五种样式，我喜欢under的就是在下面出现错误信息的，需要定制客户化的信息使用的是blankText。 ~~~ msgTarget: 'under' ~~~ ~~~ blankText:"用户名不允许为空" ~~~ 显示效果：  关于其他方式，可以自己试下效果，看名字也可以猜到效果的，看起来还不错呢。

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39252805](http://blog.csdn.net/sushengmiyan/article/details/39252805) 官方例子:[ http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Class-cfg-config](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Class-cfg-config)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 对于Extjs5的使用方式，我习惯性的是，先使用Ext.define方法定义一个自己的类，然后使用extend属性继承某一ext现在存在的类，然后制定alias的widget别名，最后配置属性，格式如下： ~~~ Ext.define(//使用Ext.define定义一个类 'argtest.view.form.BaseForm',//类名称是BaseForm 存在于argtest项目中，在view文件夹中的form文件夹下是以BaseForm.js的文件形式存在的 { extend: 'Ext.form.Panel',//继承自Ext的类，相当于重写了 alias: 'widget.baseform',//制定别名，后期使用的时候就可以拿baseform来获取了 title: 'abc', //组件初始化，在构造方法之后执行 initComponent: function(){ this.items = []; this.callParent(arguments); } }); ~~~ 这样我定义了一个BaseForm当后期使用的时候，我就可以通过uses引入这个类，然后使用Ext.widget('baseform')获取这个对象的。但是现在有个问题就是，我想给这个对象赋值一定的特性，比如我想给form制定标题，那么我们是这么做的，Ext.widget('baseform',{title: '自定义标题'}) 这样的话，每调用一次，都会按照你制定的标题来创建这个窗体了，但是现在的问题是，title是form自带的，所以你这么写是正确的，但是我想传入一个自己定义的数据该怎么办呢？ 这时候就需要使用config属性了。 我们这样做： 在define定义的时候，制定config属性： ~~~ Ext.define( 'argtest.view.form.BaseForm', { extend: 'Ext.form.Panel', alias: 'widget.baseform', title: 'abc', config:{ fields: undefined }, //组件初始化，在构造方法之后执行 initComponent: function(){ this.items = []; var me = this; var fieldsets = this.fields; Ext.each(fieldsets, function(onefieldset, fieldindex) { console.log(onefieldset); me.items.push(onefieldset); console.log(me.items); }); this.callParent(arguments); } }); ~~~ 在调用的时候，传入一个这个即可： ~~~ var form = Ext.widget('baseform',{fields: me.fields}); ~~~ 这个原理的话，看一下[http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Class-cfg-config](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Class-cfg-config)这个就可以的。 下面是我写的参数传递的例子，大家可以看下： 一、使用sencha cmd生成一个默认extjs5项目 二、在app文件夹下的view目录下定义两个包form和window 分别在里面创建BaseWindow.js和BaseForm.js文件，代码如下： ~~~ Ext.define( 'argtest.view.window.BaseWindow', { extend: 'Ext.window.Window', alias: 'widget.basewindow', uses: ['argtest.view.form.BaseForm'], autoshow: true, config: { fields: undefined }, closeAction: 'hide', //初始化为一个空数组，后期使用push方法增加组件 items: [], //组件初始化，在构造方法之后执行 initComponent: function(){ var me = this; var form = Ext.widget('baseform',{fields: me.fields}); me.items = [form]; console.log(me.items); this.callParent(arguments); } }); ~~~ ~~~ Ext.define( 'argtest.view.form.BaseForm', { extend: 'Ext.form.Panel', alias: 'widget.baseform', title: 'abc', config:{ fields: undefined }, //组件初始化，在构造方法之后执行 initComponent: function(){ this.items = []; var me = this; var fieldsets = this.fields; Ext.each(fieldsets, function(onefieldset, fieldindex) { console.log(onefieldset); me.items.push(onefieldset); console.log(me.items); }); this.callParent(arguments); } }); ~~~ 三、修改MianController.js的按钮单击函数 ~~~ /** * This class is the main view for the application. It is specified in app.js as the * "autoCreateViewport" property. That setting automatically applies the "viewport" * plugin to promote that instance of this class to the body element. * * TODO - Replace this content of this view to suite the needs of your application. */ Ext.define('argtest.view.main.MainController', { extend: 'Ext.app.ViewController', uses: ['argtest.view.window.BaseWindow'], requires: [ 'Ext.MessageBox' ], alias: 'controller.main', onClickButton: function () { //Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this); var win = Ext.widget('basewindow', { fields: this.getViewModel().get('tf_fields') }); win.show(); //console.log(this.getViewModel().get('tf_fields')); }, onConfirm: function (choice) { if (choice === 'yes') { // } } }); ~~~ 修改MainModel中的数据，增加字段集合的定义： ~~~ /** * This class is the view model for the Main view of the application. */ Ext.define('argtest.view.main.MainModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.main', data: { name: 'argtest', tf_fields: [{ // Fieldset in Column 1 - collapsible via toggle button xtype:'fieldset', columnWidth: 0.5, title: 'Fieldset 1', collapsible: true, defaultType: 'textfield', defaults: {anchor: '100%'}, layout: 'anchor', items: [{ fieldLabel: 'First Name', name: 'first', allowBlank: false },{ fieldLabel: 'Last Name', name: 'last', allowBlank: false }] },{ // Fieldset in Column 1 - collapsible via toggle button xtype:'fieldset', columnWidth: 0.5, title: 'Fieldset 2', collapsible: true, defaultType: 'textfield', defaults: {anchor: '100%'}, layout: 'anchor', items: [{ fieldLabel: 'First Name', name: 'first', allowBlank: false },{ fieldLabel: 'Last Name', name: 'last', allowBlank: false }] }] } //TODO - add data, formulas and/or methods to support your view }); ~~~ 好了。到此都修改完成了。现在所做的东西就是讲MainModel中的自定义的tf_fields数组内容，安装传递的方式，将数组逐级传入到了显示出来的form里面，最后你点击按钮，显示出的界面就是这样了：  后面想修改这个界面，不需要修改其他东西了，只需要修改MaiModel.js中内容就可以了，这样就方便多了。

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39226773](http://blog.csdn.net/sushengmiyan/article/details/39226773) 官方例子:[ http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Array-method-push](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Array-method-push)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 上一节看到了如何使用fieldset集合来管理组件，其中fieldset中的每一个组件都是在items中指定的，如下：  可以看到，items其实就是一个数组，可以看成是json格式样式的一个数组。既然这样，那么当我们定义好了这样的字符串样式之后，可以使用数组的push方法，将这些项，一个一个的加载进去，就可以动态的进行组件创建了。  先看一下效果，右边的fieldset是动态创建出来的，是通过array的push方法加载的： 代码如下：  ~~~ Ext.define( 'fieldsettest.view.form.BaseForm', { extend: 'Ext.form.Panel', alias: 'widget.baseform', title: '带fieldSet的formpanel', frame: true, bodyStyle: 'padding:5px 5px 0', items: [], initComponent: function(){ var me = this; var obj = [{ // Fieldset in Column 1 - collapsible via toggle button xtype:'fieldset', columnWidth: 0.5, title: 'Fieldset 1', collapsible: true, defaultType: 'textfield', defaults: {anchor: '100%'}, layout: 'anchor', items: [{ fieldLabel: 'First Name', name: 'first', allowBlank: false },{ fieldLabel: 'Last Name', name: 'last', allowBlank: false }] },{ // Fieldset in Column 1 - collapsible via toggle button xtype:'fieldset', columnWidth: 0.5, title: 'Fieldset 2', collapsible: true, defaultType: 'textfield', defaults: {anchor: '100%'}, layout: 'anchor', items: [{ fieldLabel: 'First Name', name: 'first', allowBlank: false },{ fieldLabel: 'Last Name', name: 'last', allowBlank: false }] }]; Ext.each(obj, function(field, indext){ me.items.push(field); }); this.callParent(arguments); } } ); ~~~

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39209533](http://blog.csdn.net/sushengmiyan/article/details/39209533) 官方例子:[ http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.FieldSet](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.FieldSet)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 继承关系：   可以清晰的看到，form.Panel是继承自panel.Panel的，FormPanel 为 form 表单提供了一个标准的容器. 本质上还是一个标准的 Ext.panel.Panel, 只是自动创建了一个 BasicForm 来管理所有添加到 Panel中的 Ext.form.field.Field 对象. 可以快捷方便地进行 配置以及处理 BasicForm 和 表单域. 看一下官方给的一个form带着feildset的例子，看这个就会比普通的只有单个field的美观多了：  看一下代码结构： ~~~ Ext.create('Ext.form.Panel', { title: 'Simple Form with FieldSets', labelWidth: 75, url: 'save-form.php', frame: true, bodyStyle: 'padding:5px 5px 0', width: 550, renderTo: Ext.getBody(), layout: 'column', // arrange fieldsets side by side items: [{ // Fieldset in Column 1 - collapsible via toggle button xtype:'fieldset', columnWidth: 0.5, title: 'Fieldset 1',//第一个文本集合 collapsible: true, defaultType: 'textfield', defaults: {anchor: '100%'}, layout: 'anchor', items :[{//包含两个field fieldLabel: 'Field 1', name: 'field1' }, { fieldLabel: 'Field 2', name: 'field2' }] }, { // Fieldset in Column 2 - collapsible via checkbox, collapsed by default, contains a panel xtype:'fieldset', title: 'Show Panel', // title or checkboxToggle creates fieldset header columnWidth: 0.5, checkboxToggle: true, collapsed: true, // fieldset initially collapsed layout:'anchor', items :[{ xtype: 'panel', anchor: '100%', title: 'Panel inside a fieldset', frame: true, height: 52 }] }] }); ~~~

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39156321](http://blog.csdn.net/sushengmiyan/article/details/39156321) 官方例子:[ http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Panel-cfg-dockedItems](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Panel-cfg-dockedItems)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 像Word办公软件一样，我们需要将一些按钮什么的放置在我们办公区域的上方，有时候我们是需要与panel绑定在一起的，这时候，在panel里面设置一个停靠组件toolbar就可以实现。修改Main.js 在学生列表中的panel组件上增加如下： ~~~ dockedItems: [ { xtype: 'toolbar', items: [{ //xtype : 'gridtoolbar', // 按钮toolbar text : '新增', glyph : 0xf016 },{ text : '修改', glyph : 0xf044 },{ text : '删除', glyph : 0xf014 },{ text : '查看', glyph : 0xf022 }], dock: 'top', }], ~~~  显示效果如下：  为了后期维护方便，我们将新加入的这些停靠内容提取成一个类，如下： ~~~ /** * 提取了一个停靠组件的类，方便维护 */ Ext.define('oaSystem.view.main.region.GridToolbar', { extend : 'Ext.toolbar.Toolbar', alias : 'widget.gridtoolbar', initComponent : function() { this.items = [{ text : '新增', glyph : 0xf016, },{ text : '修改', glyph : 0xf044 },{ text : '删除', glyph : 0xf014 },{ text : '查看', glyph : 0xf022 }]; this.callParent(); } }); ~~~ 在Main.js中引入这个文件：  后期想修改这些内容的话，就直接去main下的region的文件夹下GridToolbar.js文件就可以了。

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39102335](http://blog.csdn.net/sushengmiyan/article/details/39102335) 官方例子:[ http://dev.sencha.com/ext/5.0.1/examples/window/layout.html?theme=neptune](http://dev.sencha.com/ext/5.0.1/examples/window/layout.html?theme=neptune)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 做一个系统的话，一般都需要有导航栏啊，工具条啊这些东西。看到Ext官方例子中有个window的layout window ，看了下效果看起来蛮不错，就学习了下，加入到了我之前做的[extjs5登录系统](http://blog.csdn.net/sushengmiyan/article/details/38815923)中。这样看起来就像是一个系统了。 先看下官方例子的效果吧，看起来很不错的哟：  看下官方给的代码： 代码地址：[http://dev.sencha.com/ext/5.0.1/examples/window/layout.js](http://dev.sencha.com/ext/5.0.1/examples/window/layout.js) 代码内容： ~~~ Ext.require([ 'Ext.tab.*', 'Ext.window.*', 'Ext.tip.*', 'Ext.layout.container.Border' ]); Ext.onReady(function(){ var win, button = Ext.get('show-btn'); button.on('click', function(){ if (!win) { win = Ext.create('widget.window', { title: 'Layout Window with title <em>after</em> tools', header: { titlePosition: 2, titleAlign: 'center' }, closable: true, closeAction: 'hide', maximizable: true, animateTarget: button, width: 600, minWidth: 350, height: 350, tools: [{type: 'pin'}], layout: { type: 'border', padding: 5 }, items: [{ region: 'west', title: 'Navigation', width: 200, split: true, collapsible: true, floatable: false }, { region: 'center', xtype: 'tabpanel', items: [{ // LTR even when example is RTL so that the code can be read rtl: false, title: 'Bogus Tab', html: '<p>Window configured with:</p><pre style="margin-left:20px"><code>header: {\n titlePosition: 2,\n titleAlign: "center"\n},\nmaximizable: true,\ntools: [{type: "pin"}],\nclosable: true</code></pre>' }, { title: 'Another Tab', html: 'Hello world 2' }, { title: 'Closable Tab', html: 'Hello world 3', closable: true }] }] }); } button.dom.disabled = true; if (win.isVisible()) { win.hide(this, function() { button.dom.disabled = false; }); } else { win.show(this, function() { button.dom.disabled = false; }); } }); }); ~~~ 现在看看我的最后成果：  看起来是不是跟官方的差不多呀，哈哈。这就是模仿咯，能知道如何看官方的例子了，感觉就来啦，可以顺利上手的样子了。 哈哈。 看看需要做哪些就可以达到如上效果吧！ 1.增加菜单项的内容，就是 学生档案、教室档案那些，这个我们暂时放在mainmodel下的data里面，这个自己制定，可以直接在panel的items定死也是可以的，这里动态获取一下。 ~~~ /** * 应用程序主要视图.author： sushengmiyan *blog: http://blog.csdn.net/column/details/sushengextjs5.html */ Ext.define('oaSystem.view.main.MainModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.main', //数据模块 ViewModel中的data可以在指定当前ViewModel的地方获取 data: { name: 'oaSystem', // 左边菜单的加载 NavigationMenu : [{ text : '档案管理',// 菜单项的名称 description : '', // 菜单项的描述 expanded : true,// 在树形菜单中是否展开 items : [{ text : '学生档案',// 菜单条的名称 module : 'StudentArchives',// 对应模块的名称 glyph : 0xf00b // 菜单条的图标字体 },{ text : '教师档案', module : 'TeacherArchives', glyph : 0xf1a2 },{ text : '教室资源', module : 'RoomArchives', glyph : 0xf183 }] },{ text : '系统设置', description : '', items : [{ text : '系统参数', module : 'SytemInfo', glyph : 0xf0f7 }, { text : '高级设置', module : 'HigherSetting', glyph : 0xf02e }] } ] }, //增加 data, formulas and/or methods 来支持你的视图 }); ~~~ 在regions目录下新建Left.js内容如下： ~~~ Ext.define( //左侧导航条 'oaSystem.view.main.region.Left', { extend: 'Ext.panel.Panel', alias: 'widget.mainleft', title: '折叠菜单', glyph: 0xf0c9, split: true, collapsible: true, floatable: false, tools: [{type: 'pin'}], header: { titlePosition: 2, titleAlign: 'center' }, maximizable: true, layout: { type: 'accordion', animate: true, //点击的时候有动画动作 titleCollapse: true, enableSplitters: true, hideCollapseTool: true, }, viewModel: 'main', //指定后可获取MainModel中data数据块 initComponent: function() { this.items = []; var menus = this.getViewModel().get('NavigationMenu'); for (var i in menus) { //先获取分组显示 var group = menus[i]; var leftpanel = { menuAccordion : true, xtype: 'panel', title: group.text, bodyStyle: { padding: '10px' }, layout: 'fit', dockedItems: [{ dock : 'left', xtype : 'toolbar', items : [] }], glyph: group.glyph }; //遍历分组下的菜单项 for (var j in group.items) { var menumodule = group.items[j]; leftpanel.dockedItems[0].items.push({ text: menumodule.text, glyph: menumodule.glyph, handler: 'onMainMenuClick' }); } this.items.push(leftpanel); } this.callParent(arguments); }, } ); ~~~ 在main.js中引入这个单元： ~~~ uses:['oaSystem.view.main.region.Top', 'oaSystem.view.main.region.Bottom','oaSystem.view.main.region.Left'], ~~~ 在items中增加这个折叠导航： ~~~ ,{ xtype : 'mainleft', region : 'west', // 左边面板 width : 250, split : true } ~~~ OK，完工。现在就可以有个折叠导航啦

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39078627](http://blog.csdn.net/sushengmiyan/article/details/39078627) sencha官方API:[ http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Panel-cfg-viewModel](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Panel-cfg-viewModel)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------  Sencha ext js 5之前的版本中是没有viewmodel这个概念的，现在extjs5既然支持mvvm模式了，那么她的组件也就相应的增加了对mvvm的默认支持。现在看看我们经常使用的panel组件对mvvm模式的强大支持。 先看看文档对panel的viewmodel属性的定义： ~~~ viewModel : String/Object/Ext.app.ViewModel The ViewModel is a data provider for this component and its children. The data contained in the ViewModel is typically used by adding bind configs to the components that want present or edit this data. When set, the ViewModel is created and links to any inherited viewModel instance from an ancestor container as the "parent". The ViewModel hierarchy, once established, only supports creation or destruction of children. The parent of a ViewModel cannot be changed on the fly. If this is a root-level ViewModel, the data model connection is made to this component's associated Data Session. This is determined by calling getInheritedSession. Defaults to: {$value: null, lazy: true} ~~~ 将上述信息翻译一下如下： viewModel:属性可以设置为字符串String或者Object对象或者是Ext.app.ViewModel ViewModel是这个组件和子构件的数据提供者，ViewModel中包含的数据典型的使用方法就是增加bind配置到想呈现或者编辑数据的组件上。 当设置好了，viewmodel就创建并连接到继承层次上任何父组件，一旦创建，父组件就无法更改子构件。 如果是根viewmodel，datamodel就关联到数据节点，这有获取继承节点来决定。 默认：{$value:null, lazy:true} 简单说，就是当你想在panle中获取其他model的data中的数据的时候，就需要制定viewmodel，这有就可以从viewmodel中获取数据啦。

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39057243](http://blog.csdn.net/sushengmiyan/article/details/39057243) sencha官方API:[ http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.Panel-cfg-store](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.Panel-cfg-store)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ Ext的官方例子显示如下：  我写的代码，显示出来的就是这个样子？这是何原因？ 为什么我的Extjs中表格显示不友好？panel的frame属性在作怪  标题栏没有排序那些也没有分隔条，下方的数据也是没有分割，看起来很难受的。谁给看下症候在哪？ 代码如下： ~~~ { xtype: 'panel', region: 'center', //layout: { type: 'fit' }, items:[{ xtype: 'gridpanel', title: '表格面板', columns: [ { text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email' ,flex: 1 }, { text: 'Phone', dataIndex: 'phone' }], store: Ext.create( 'Ext.data.Store', { //alias: 'paneldatastore', //storeId:'simpsonsStore', fields:['name', 'email', 'phone'], data:{'items':[ { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, { 'name': 'Homer', "email":"homer@simpsons.com", "phone":"555-222-1244" }, { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } ]}, proxy: { type: 'memory', reader: { type: 'json', rootProperty: 'items' } } }), }] } ~~~ 对比了官方提供的grid绑定xml文件的例子，发现需要将panel的frame属性设置为true。于是重新来试一下：  最终显示效果如下：  最新代码如下： ~~~ { xtype: 'panel', frame: true,//加上frame属性，表格显示就友好了 region: 'center', //layout: { type: 'fit' }, items:[{ xtype: 'gridpanel', title: '表格面板', columns: [ { text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email' ,flex: 1 }, { text: 'Phone', dataIndex: 'phone' }], store: Ext.create( 'Ext.data.Store', { //alias: 'paneldatastore', //storeId:'simpsonsStore', fields:['name', 'email', 'phone'], data:{'items':[ { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, { 'name': 'Homer', "email":"homer@simpsons.com", "phone":"555-222-1244" }, { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } ]}, proxy: { type: 'memory', reader: { type: 'json', rootProperty: 'items' } } }), }] } ~~~ 原因：panel的frame属性设置为true之后，就可以友好显示表格了。

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39031383](http://blog.csdn.net/sushengmiyan/article/details/39031383) sencha官方API:[ http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.Panel-cfg-store](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.Panel-cfg-store)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 表格是现在web应用中常见的形式，而表格数据就是灵魂了，今天下班之后，短暂研究了下ext的表格。暂时琢磨出一点点东西来，先上图，后期再完善吧。 效果不是很理想：  还有点点报错信息，如下：  可以看到是layout导致的，将layout的boder方式注销，表格就可以正常显示了：  这是官方例子显示的效果，我这里格式稍微有点点不大好看昂。 新增代码如下： ~~~ { xtype: 'panel', items:[{ xtype: 'gridpanel', //title: '表格面板', columns: [ { text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email' }, { text: 'Phone', dataIndex: 'phone' }], store: Ext.create( 'Ext.data.Store', { //alias: 'paneldatastore', //storeId:'simpsonsStore', fields:['name', 'email', 'phone'], data:{'items':[ { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, { 'name': 'Homer', "email":"homer@simpsons.com", "phone":"555-222-1244" }, { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } ]}, proxy: { type: 'memory', reader: { type: 'json', rootProperty: 'items' } } }), renderTo: Ext.getBody() }] } ~~~ 使用第[十一节](http://blog.csdn.net/sushengmiyan/article/details/38815923)代码，修改里面Main.js内容，增加如上代码，就可以研究datastore和datapanel了。