extjs4.2更换主题

Extjs 4.2.0 MVC 架构来源于Ext互助团群。

内容：1. 文件结构2. 创建项目3. 定义控制器4. 定义视图5. 控制Grid6. 创建Model和Store7. 通过Model保存数据8. 保存到服务器端大型客户端程序通常都难写，难组织，难以维护。

项目经常由于增加功能，增加开发人员而很快失控。

Ext JS 4提出新的项目结构，不仅组织你的代码，并且减少代码量。

我们的系统结构延续“类MVC模式”，第一次引入Models（模型）和Controllers（控制器）的概念。

现在有很多MVC架构，他们或多或少有细微差别。

以下是我们对MVC的定义：∙Model是字段和对应数据的组合（例如User Model有username和password两个字段）。

Models知道如何通过数据包(data package)持久化，还可以通过associations（联系）同其他models关联。

Models很类似于Ext Js 3里的Record类，通常与Stores一起将数据展现到grids和其他components上。

∙View可以是任何类型的component，grids, trees和panels都是视图。

∙Controllers是一个特殊的地方，用来放使application工作的代码 - 可以是渲染视图的，初始化models的，或者其他的应用逻辑。

在这篇文档中我们将创建一个管理用户数据的简单应用，最终你将指导如何使用Ext JS 4应用架构去组织你的应用。

对系统架构来说，提供结构和保持一致性，与实际的类和framework代码同样重要。

遵循我们的惯例可以带来一系列非常重要的好处：∙所有的应用都以同一种方式工作，所以你只需要学习一次。

∙不同应用之间可以共享代码，因为他们都以同种方式工作∙你可以用我们的build工具来创建你的系统的优化版本供production使用------------------------------------------------------------------------------------------------------------ Ext JS 4对所有应用定义相同的目录结构。

ExtJS控件样式修改及美化Extjs项⽬对富客户端开发提供了强有⼒的⽀持，甚⾄改变了前端的开发⽅式，使得开发变得更加趋向于“⾯向组件”。

对界⾯的美化⽽⾔，也是根本性的改变。

普通的⽹页美⼯⾯对extjs项⽬根本⽆法下⼿，需要脚本编写⼈员配合美⼯⼀起来完成⼯作(另外,spketIDE提供的样式修改⼯具也不理想)。

修改extjs的既有样式：1.覆盖extjs的样式表这⾥说的修改不是去改extjs本⾝的ext-all.css, 也不建议这样去做，这样会影响所有页⾯；⽽应该是⽤⾃定义的css去覆盖某些控件的默认样式。

⼤部分控件都有类似cls、style的属性供开发者去定制样式；但具体要设置样式的哪些属性才能达到特定效果，api⽂档就没说了。

⽐如要构建⼀个不带边框的panel，设置border、bodyborder属性是不⾏的，还是会有1px的边框。

⽹上去搜就更难了，准备好万能的firebug，⾃⼰摸索。

打开firebug，切换到html选项卡，找到panel对应的div节点，如下图：panel控件的基准样式是x-panel，其中的border-style：solid就是设置边框的，将其覆盖为border-style:none就成⽆边框的了。

具体⽅法：定义⽆边框的样式.my-panel-no-border{border-style:none}，然后定义panel时设置baseCls属性：var mypanel = Ext.Panel({ baseCls:'my-panel-no-border', //其他属性});没⽂档，搜⼜不好搜，只能⽤这种最⼟的⽅法了。

类似的还有个需求，checkboxgroup⾥⾯的checkbox以列模式摆放时，各个checkbox是对齐的；现在需要对checkbox缩进摆放，体现出⼀定的层次关系，就像树形列表⼀样。

打开firebug，找checkbox的样式，加上什么padding之类的属性就⾏了。

Posted 周二, 07/02/2013 - 12:20 by admin上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录。

苦于抽不出时间，一直拖到现在。

不得不说，Extjs确实很强大，新版的Neptune 风格也很入我眼，但毕竟没怎么用过，第一次用，也不敢上来就搞什么自定义组件，也就纯粹的model+store+panel声明式创建表格了。

抛开分页，抛开排序，今天只简单讲一下最近使用中总结出来的rest形式增删改查数据的方式。

发现这种方式挺不错的，故而分享下。

代码Example如下：定义Modelview sourceprint?01.Ext.define('Person', {02.extend: 'Ext.data.Model',03.fields: [{name: 'id',04.type: 'int',eNull: true06.}, 'email', 'first', 'last'],07.validations: [{ type: 'length',08.field: 'email',09.min: 110.}, {type: 'length',11.field: 'first',12.min: 113.}, {type: 'length',14.field: 'last',15.min: 116.}]17.});构造store、创建panelview sourceprint?001.var store = Ext.create('Ext.data.Store', {002.autoLoad: true,003.autoSync: true,004.model: 'Person',005.proxy: {006.type: 'ajax',007.api: {008.read: 'url/read',//查询009.create: 'url/create',//创建010.update: 'url/update',//更新011.destroy: 'url/destroy'//删除012.},013.reader: {014.type: 'json',015.root: 'data'016.},017.writer: {018.type: 'json'019.}020.},021.listeners: {022.write: function(store, operation){023.var record = operation.getRecords()[0], = Ext.String.capitalize(operation.action), 025.verb;026.027.028.if(name == 'Destroy') {029.record = operation.records[0];030.verb = 'Destroyed';031.} else{032.verb = name + 'd';033.}034.Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));035.036.}037.}038.});039.040.var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {041.listeners: {042.cancelEdit: function(rowEditing, context) {043.// Canceling editing of a locally added, unsaved record: remove it044.if(context.record.phantom) {045.store.remove(context.record);046.}047.}048.}049.});050.051.var grid = Ext.create('Ext.grid.Panel', {052.renderTo: document.body,053.plugins: [rowEditing],054.width: 400,055.height: 300,056.frame: true,057.title: 'Users',058.store: store,059.iconCls: 'icon-user',060.columns: [{061.text: 'ID',062.width: 40,063.sortable: true,064.dataIndex: 'id'065.}, {066.text: 'Email',067.flex: 1,068.sortable: true,069.dataIndex: 'email',070.field: {071.xtype: 'textfield'072.}073.}, {074.header: 'First',075.width: 80,076.sortable: true,077.dataIndex: 'first',078.field: {079.xtype: 'textfield'080.}081.}, {082.text: 'Last',083.width: 80,084.sortable: true,085.dataIndex: 'last',086.field: {087.xtype: 'textfield'088.}089.}],090.dockedItems: [{091.xtype: 'toolbar',092.items: [{093.text: 'Add',094.iconCls: 'icon-add',095.handler: function(){096.// empty record097.store.insert(0, new Person());098.rowEditing.startEdit(0, 0);099.}100.}, '-', {101.itemId: 'delete',102.text: 'Delete',103.iconCls: 'icon-delete',104.disabled: true,105.handler: function(){106.var selection =grid.getView().getSelectionModel().getSelection()[0]; 107.if(selection) {108.store.remove(selection);109.}110.}111.}]112.}]113.});114.grid.getSelectionModel().on('selectionchange', function(selModel, selections){115.grid.down('#delete').setDisabled(selections.length === 0);很简单，使用api的方式，包括有增删查改，在前台的操作都会被extjs记录下来，再执行sync 的时候就可以自动根据状态请求相应的url了。

Extjs4.2 Html编辑器扩展目的：扩展Extjs4.2的htmleditor，添加“上传图片”，”上传附件”等功能。

效果图：调用方法：{xtype : 'htmleditor',name : 'content',fieldLabel : '公告内容',height : 350,plugins : [Ext.create('Ext.zc.form.HtmlEditorImage'),Ext.create('Ext.zc.form.HtmlEditorAttachment') ]}具体实现：HtmlEditorImage.js/***@Description Html编辑器插入图片控件*@author张川(cr10210206@)*/Ext.define('Ext.zc.form.HtmlEditorImage', {extend: 'Ext.util.Observable',alias: 'widget.zc_form_HtmlEditorImage',langTitle : '插入图片',langIconCls : 'heditImgIcon',init : function(view) {var scope = this;view.on('render', function(){scope.onRender(view);});},/***添加"插入图片"按钮**/onRender : function(view) {var scope = this;view.getToolbar().add({iconCls : ngIconCls,tooltip : {title : ngTitle,width : 60},handler : function(){scope.showImgWindow(view);}});},/***显示"插入图片"窗体**/showImgWindow : function(view){ var scope = this;Ext.create('Ext.window.Window',{ width : 400,height : 280,title : ngTitle,layout : 'fit',autoShow : true,modal : true,resizable : false,maximizable : false,constrain : true,plain : true,enableTabScroll : true,bodyPadding : '1 1 1 1',border : false,items : [{xtype : 'tabpanel',enableTabScroll : true,bodyPadding : '1 1 1 1',items : [{title : '上传本地图片',items : [{xtype : 'form',layout : 'column',autoScroll : true,border : false,defaults : {columnWidth : 1,labelWidth : 60,labelAlign : 'right',padding: '5 5 5 5',allowBlank : false},items : [{xtype : 'fileuploadfield',fieldLabel : '选择文件',beforeLabelTextTpl : zc.getStar(),buttonText : '请选择...',name : 'upload',emptyText : '请选择图片',blankText : '图片不能为空',listeners : {change : function(view,value,eOpts){scope.uploadImgCheck(view,value);}}},{xtype: 'fieldcontainer',fieldLabel: '图片大小',layout: 'hbox',defaultType: 'numberfield',defaults: {flex: 1,labelWidth : 20,labelAlign : 'right',allowBlank : true},items: [{fieldLabel : '宽',name : 'width',minValue : 1},{fieldLabel : '高',name : 'height',minValue : 1}]},{xtype : 'textfield',fieldLabel : '图片说明',name : 'content',allowBlank : true,maxLength : 100,emptyText : '简短的图片说明'},{columnWidth : 1,xtype:'fieldset',title: '上传须知',layout: {type: 'table',columns: 1},collapsible: false,//是否可折叠defaultType : 'label',//默认的Form表单组件items : [{html: '1.上传图片不超过100KB'},{html : '2.为了保证图片能正常使用，我们支持以下格式的图片上传'},{html : '&nbsp;&nbsp;&nbsp;jpg,jpeg,png,gif'}]}],buttons : [{text : '保存',action : 'btn_save',iconCls : 'saveIcon',handler : function(btn){scope.saveUploadImg(btn,view);}},{text : '取消',iconCls : 'cancelIcon',handler : function(btn){btn.up('window').close();}}]},{title : '链接网络图片',items : [{xtype : 'form',layout : 'column',autoScroll : true,border : false,defaults : {columnWidth : 1,labelWidth : 60,labelAlign : 'right',padding: '5 5 5 5',allowBlank : false},items : [{xtype : 'textfield',fieldLabel : '图片地址',beforeLabelTextTpl : zc.getStar(),name : 'url',emptyText : '请填入支持外链的长期有效的图片URL',blankText : '图片地址不能为空',vtype : 'remoteUrl'},{xtype: 'fieldcontainer',fieldLabel: '图片大小',layout: 'hbox',defaultType: 'numberfield',defaults: {flex: 1,labelWidth : 20,labelAlign : 'right',allowBlank : true},items: [{fieldLabel : '宽',name : 'width',minValue : 1},{fieldLabel : '高',name : 'height',minValue : 1}]xtype : 'textfield',fieldLabel : '图片说明',name : 'content',allowBlank : true,maxLength : 100,emptyText : '简短的图片说明'}],buttons : [{text : '保存',action : 'btn_save',iconCls : 'saveIcon',handler : function(btn){scope.saveRemoteImg(btn,view);}},{text : '取消',iconCls : 'cancelIcon',handler : function(btn){btn.up('window').close();}}]}]}]}]});},/***上传图片验证**/uploadImgCheck : function(fileObj,fileName){var scope = this;//图片类型验证if(!(scope.getImgTypeCheck(scope.getImgHZ(fileName)))){ Ext.MessageBox.alert('温馨提示','上传图片类型有误');fileObj.reset();//清空上传内容return;}},/***获取图片后缀(小写)**/getImgHZ : function(imgName){//后缀var hz = '';//图片名称中最后一个.的位置var index = stIndexOf('.');if(index != -1){//后缀转成小写hz = imgName.substr(index+1).toLowerCase();}return hz;},/***图片类型验证**/getImgTypeCheck : function(hz){var typestr = 'jpg,jpeg,png,gif';var types = typestr.split(',');//图片类型for(var i = 0; i < types.length; i++){if(hz == types[i]){return true;}}return false;},/***上传图片**/saveUploadImg : function(btn,view){var scope = this;var windowObj = btn.up('window');//获取Window对象var formObj = btn.up('form');//获取Form对象if(formObj.isValid()){ //验证Form表单formObj.form.doAction('submit',{url : zc.bp() + '/bdata_Thtmleditor_getUploadImage.action',method : 'POST',submitEmptyText : false,waitMsg : '正在上传图片,请稍候...',timeout : 60000, // 60ssuccess : function(response, options){var result = options.result;if(!result.success){Ext.MessageBox.alert('温馨提示',result.msg);return;}scope.insertImg(view,result.data);windowObj.close();//关闭窗体},failure : function(response, options){Ext.MessageBox.alert('温馨提示',options.result.msg);}});}},/***保存远程的图片**/saveRemoteImg : function(btn,view){var scope = this;var windowObj = btn.up('window');//获取Window对象var formObj = btn.up('form');//获取Form对象if(formObj.isValid()){//验证Form表单var values = formObj.getValues();//获取Form表单的值scope.insertImg(view,values);windowObj.close();//关闭窗体}},/***插入图片**/insertImg : function(view,data){var url = data.url;var content = data.content;var width = data.width;var height = data.height;var str = '<img src="' + url + '" border="0" ';if(content != undefined && content != null && content != ''){ str += ' title="'+content+'" ';}if(width != undefined && width != null && width != 0){ str += ' width="'+width+'" ';}if(height != undefined && height != null && height != 0){ str += ' height="'+height+'" ';}str += ' />';view.insertAtCursor(str);}});HtmlEditorAttachment.js/***@Description Html编辑器插入附件控件*@author张川(cr10210206@)*/Ext.define('Ext.zc.form.HtmlEditorAttachment', { extend: 'Ext.util.Observable',alias: 'widget.zc_form_HtmlEditorAttachment', langTitle : '插入附件',langIconCls : 'attachmentIcon',init : function(view) {var scope = this;view.on('render', function(){scope.onRender(view);});},/***添加"插入附件"按钮**/onRender : function(view) {var scope = this;view.getToolbar().add({iconCls : ngIconCls,tooltip : {title : ngTitle,width : 60},handler : function(){scope.showAttachmentWindow(view);}});},/***显示"插入附件"窗体**/showAttachmentWindow : function(view){var scope = this;Ext.create('Ext.window.Window',{width : 400,height : 315,title : ngTitle,layout : 'fit',autoShow : true,modal : true,resizable : false,maximizable : false,constrain : true,plain : true,enableTabScroll : true,bodyPadding : '1 1 1 1',border : false,items : [{xtype : 'panel',bodyPadding : '1 1 1 1',items : [{xtype : 'form',layout : 'column',autoScroll : true,border : false,defaults : {columnWidth : 1,labelWidth : 60,labelAlign : 'right',padding: '5 5 5 5',allowBlank : false},items : [{xtype : 'fileuploadfield',fieldLabel : '选择文件',beforeLabelTextTpl : zc.getStar(),buttonText : '请选择...',name : 'upload',emptyText : '请选择文件',blankText : '文件不能为空',listeners : {change : function(view,value,eOpts){scope.uploadAttachmentCheck(view,value);}}},{xtype : 'textfield',fieldLabel : '附件名称',name : 'fileName',id : 'zc_form_HtmlEditorAttachment_form_fileName',maxLength : 50,emptyText : '请输入附件名称',blankText : '附件名称不能为空'},{xtype : 'textfield',fieldLabel : '附件说明',name : 'content',id : 'zc_form_HtmlEditorAttachment_form_content',allowBlank : true,maxLength : 100,emptyText : '简短的附件说明'},{columnWidth : 1,xtype:'fieldset',title: '上传须知',layout: {type: 'table',columns: 3},collapsible: false,//是否可折叠defaultType : 'label',//默认的Form表单组件items : [{html: '1.上传文档不超过100KB',colspan: 3},{html : '2.为了保证文档能正常使用，我们支持以下格式的文档上传',colspan: 3},{html : '&nbsp;&nbsp;&nbsp;',rowspan: 5},{html : 'MS Office文档：',colspan: 1,tdAttrs : {align : 'right'}},{html : 'doc,docx,ppt,pptx,xls,xlsx,vsd,pot,pps,rtf',colspan: 1},{html : 'WPS office系列：',colspan: 1,tdAttrs : {align : 'right'}},{html : 'wps,et,dps',colspan: 1},{html : 'PDF：',colspan: 1,tdAttrs : {align : 'right'}},{html : 'pdf',colspan: 1},{html : '纯文本：',colspan: 1,tdAttrs : {align : 'right'}},{html : 'txt',colspan: 1},{html : 'EPUB：',colspan: 1,tdAttrs : {align : 'right'}},{html : 'epub',colspan: 1}]}],buttons : [{text : '保存',action : 'btn_save',iconCls : 'saveIcon',handler : function(btn){scope.saveUploadAttachment(btn,view);}},{text : '取消',iconCls : 'cancelIcon',handler : function(btn){btn.up('window').close();}}]}]}]});},/***插入附件验证**/uploadAttachmentCheck : function(fileObj,fileName){var scope = this;var fileNameObj = Ext.getCmp('zc_form_HtmlEditorAttachment_form_fileName');var contentObj = Ext.getCmp('zc_form_HtmlEditorAttachment_form_content');//附件类型验证if(!(scope.getAttachmentTypeCheck(scope.getAttachmentHZ(fileName) ))){Ext.MessageBox.alert('温馨提示','上传附件类型有误');//清空插入内容fileObj.reset();fileNameObj.setValue('');contentObj.setValue('');return;}//设置默认的文件名称var defaultFileName = fileName.substr(0,stIndexOf('.'));fileNameObj.setValue(defaultFileName);contentObj.setValue(defaultFileName);},/***获取附件后缀(小写)**例如：txt**/getAttachmentHZ : function(AttachmentName){//后缀var hz = '';//附件名称中最后一个.的位置var index = stIndexOf('.');if(index != -1){//后缀转成小写hz = AttachmentName.substr(index+1).toLowerCase();}return hz;},/***附件类型验证**/getAttachmentTypeCheck : function(hz){var typestr = 'doc,docx,ppt,pptx,xls,xlsx,vsd,pot,pps,rtf,wps,et,dps,pdf,txt,epub' ;var types = typestr.split(',');//附件类型for(var i = 0; i < types.length; i++){if(hz == types[i]){return true;}}return false;},/***插入附件**/saveUploadAttachment : function(btn,view){var scope = this;var windowObj = btn.up('window');//获取Window对象var formObj = btn.up('form');//获取Form对象if(formObj.isValid()){ //验证Form表单formObj.form.doAction('submit',{url : zc.bp() + '/bdata_Thtmleditor_getUploadAttachment.action',method : 'POST',submitEmptyText : false,waitMsg : '正在上传附件,请稍候...',timeout : 60000, // 60ssuccess : function(response, options){var result = options.result;if(!result.success){Ext.MessageBox.alert('温馨提示',result.msg);return;}scope.insertAttachment(view,result.data);windowObj.close();//关闭窗体},failure : function(response, options){Ext.MessageBox.alert('温馨提示',options.result.msg);}});}},/***插入附件**/insertAttachment : function(view,data){var url = data.url;var fileName = data.fileName;var content = data.content;var str = '&nbsp;<a target="_blank" href="' + url + '" ';if(content != undefined && content != null && content != ''){ str += ' title="'+content+'" ';}str += ' >'+fileName+'</a>&nbsp;';view.insertAtCursor(str);}});。

<!DOCTYPE html><html><head lang="en"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link href="../ext4.2/resources/css/ext-all-neptune.css" rel="stylesheet"/><script type="text/javascript" src="../ext4.2/ext-all-debug.js"></script><script type="text/javascript">Ext.onReady(function () {Ext.create('Ext.data.Store', {storeId: 'persons',fields: ['id', 'name', 'email', 'phone'],idProperty: 'id',data: {'items': [{ id: '0001', 'name': 'Lisa', "email": "lisa@", "phone": "555-111-1224" },{ id: '0002', 'name': 'Bart', "email": "bart@", "phone": "555-222-1234" },{ id: '0003', 'name': 'Homer', "email": "home@", "phone": "555-222-1244" },{ id: '0004', 'name': 'Marge', "email": "marge@", "phone": "555-222-1254" },{ id: '0005', 'name': 'Bart', "email": "bart@", "phone": "555-222-1234" },{ id: '0006', 'name': 'Homer', "email": "home@", "phone": "555-222-1244" },{ id: '0007', 'name': 'Marge', "email": "marge@", "phone": "555-222-1254" },{ id: '0008', 'name': 'Lisa', "email": "lisa@", "phone": "555-111-1224" },{ id: '0009', 'name': 'Bart', "email": "bart@", "phone": "555-222-1234" },{ id: '0010', 'name': 'Homer', "email": "home@", "phone": "555-222-1244" },{ id: '0011', 'name': 'Marge', "email": "marge@", "phone": "555-222-1254" },{ id: '0012', 'name': 'Bart', "email": "bart@", "phone": "555-222-1234" },{ id: '0013', 'name': 'Homer', "email": "home@", "phone": "555-222-1244" },{ id: '0014', 'name': 'Marge', "email": "marge@", "phone": "555-222-1254" }]},proxy: {type: 'memory',reader: {type: 'json',root: 'items',render: 'array'}},autoLoad: true});//行编辑器var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {clicksToMoveEditor: 2,clicksToEdit: 2,autoCancel: false,cancelEdit: function () {var me = this;if(me.editing){me.getEditor().cancelEdit();var record = me.context.record.getData(0);var id = record.id;if(id==''){var grid = me.context.grid;var items = grid.getSelectionModel().getSelection();grid.store.remove(items);}}},listeners: {'edit': function (editor, e) {// console.log(e);var id = '';if(e.record.data.id != ""){//有id，则为更新数据库//ajax向后台更新数据}else{//无id，则为插入一条记录//ajax向后台添加数据id="0015";}e.record.data.id = id;mit();}}})//单元格编辑器var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 2,autoCancel: false,listeners: {'edit': function (editor, e) {mit();}}})Ext.create('Ext.grid.Panel', {title: 'Grid表格',selType: "rowmodel", //选择模式行选择模式multiSelect: true,// selType:"cellmodel", //选择模式单元格选择模式columnLines: true, //列分割线stripeRows: true, //隔行换色store: Ext.data.StoreManager.lookup('persons'),defaults: {editable: true,value: "无"},columns: [{xtype: 'rownumberer'},{ text: '编号', dataIndex: 'id'},{ text: '姓名', dataIndex: 'name', editor: "textfield"},{ text: '电子邮件', dataIndex: 'email', flex: 1, editor: "textfield"},{ text: '电话号码', dataIndex: 'phone', editor: "textfield"}],height: 550,width: 700,tbar: [{xtype: 'button',text: '添加',handler: function () {// ponentQuery.query('grid')[0].getStore().add(p);rowEditing.cancelEdit();var p = {id: '',name: '',email: '',phone: ''}//insert ：向store指定位置添加数据//loadData: 在store的最后添加一行数据Ext.data.StoreManager.lookup('persons').insert(0,p);rowEditing.startEdit(0,0);// console.log(ponentQuery.query('grid')[0].getStore());}},{xtype: 'button',text: '删除',handler: function () {var sm = ponentQuery.query('grid')[0].getSelectionModel();var personArr = sm.getSelection();if (personArr.length != 0) {Ext.Msg.confirm("提示", "共选中" + personArr.length + "条数据，是否确认删除？", function (btn) {if (btn == 'yes') {//先删除后台再删除前台//ajax 删除后台数据成功则删除前台数据；失败则不删除前台数据//Extjs 3.x 删除// Ext.Array.each(personArr, function (p) {//Ext.data.StoreManager.lookup('persons').remove(p);// });//Extjs 4.x 删除Ext.data.StoreManager.lookup('persons').remove(personArr);} else {return;}});} else {Ext.Msg.alert("提示", "无选中数据");}}}],bbar: [{xtype: 'pagingtoolbar',store: Ext.data.StoreManager.lookup('persons'),pageSize: 5,displayInfo: true,displayMsg: '第{0}条到第{1}条，一共{2}条记录',emptyMsg: "没有符合查询条件的信息"}],plugins: [rowEditing// cellEditing],renderTo: Ext.getBody()});// //编辑器提交修改的监听// //单元格编辑器提交的方法？// ponentQuery.query('grid')[0].on('edit',function(editor,e){ // //提交修改的内容// mit();// });});</script></head><body></body></html>。

第 1 章闪烁吧！看看extjs 那些美丽的例子。

第 1 章闪烁吧！看看extjs 那些美丽的例子。

1.1. 一切从extjs 发布包开始非常幸运的是，我们可以免费去 下载ext 发布包，里边源代码，api 文档，例子一应俱全。

不过要是想访问svn 获得最新的代码，就要花钱了。

不过我们现阶段只要这个免费的发布包就可以了，通过里边的范例，可以让我们体验一下ext 的风范。

下载地址：/download。

到写文档的此时此刻，咱们可以选择ext-1.1.1 或者是ext-2.0 下载。

明显可以看出来ext-2.0 的版本高，12 月4 日终于正式发布了，尚未经过详细测试，所以不敢说什么。

下面我们把两个版本都介绍一点儿。

1.2. 看看ext-1.1.1 的文档docs 目录下是api 文档，基本上所有的函数，配置，事件都可以在里边找到，直接打开index.html 就可以查看，左侧菜单还包含了对examples 目录下例子的引用，不过有些例子需要使用json 与后台做数据交换，必须放到服务器上才能看到效果。

还有一些后台代码是使用php 编写的，如果想看这些例子的效果，还需要配置php 运行环境。

如果你用java，而且jdk 在1.5 以上，不如直接装个resin-3 方便，它可以跑php 呢。

1.3. 看看ext-2.0 的文档api 文档依然在docs 目录下，虽然可以看到左边的菜单，但是点击之后，右侧的api 页面都是靠ajax 获得的，所以不能直接在本地查看了，你必须把整个解压缩后的目录放到服务器上，通过浏览器访问服务器，才能看到。

问为什么docs 打不开，只能看到一直loading 的兄弟，都是因为没把这些东西放到服务器上的原因。

2.0 中的api 文档中没有例子的链接了，你需要自己去examples 目录下找你需要的例子，然后打开看，当然还是有一些例子需要放在服务器上才能看到效果。

1.4. 为什么有的例子必须放在服务器上才能看到效果？因为有些例子里，用到Ajax 去后台读取数据，如果没在服务器上，Ajax 返回的状态一直是失败，也无法获得任何数据，所有就看不到正确的效果。

Sencha Architect2.2.2入门操作图解教程[Extjs 4.2]龙兄本教程可以教你做出如下图的功能，可以动态建立和激活视图；大部份的操作是通过Sencha Architect2.2.2的图形界面来完成的，手工输入代码不超20行。

教程开始：一、准备工作：1、下载和安装WEB服务器【我用的是Apache Tomcat/7.0.42】2、下载和安装Sencha Architect2.2.2，并且网上注册ID、进入Sencha Architect2.2.2【我用的是限期版（30天），没有钱买正版，想长期用，上网有破解的方法。

】。

*以上两个操作完成后如下图所示；（有难度者请参照网上相对应的教程）二、点击【Go】开始进入Sencha Architect2.2.2的主界面，如下图所示1、进入主界面后，先定好保存项目的位置，操作如下图所示，从菜单的<File> - <Save Project>（D:/WEB/apache/webapps目录是我Tomcat WEB的根文件夹，这样好处是建好的文档就可以直接发布了，也可以用其它文件夹。

）右边框】。

3、修改layout的属性为border，如下图所示【也可以从这里选择】。

4、建立一个Panel视图，如下图所示，操作方法可以参照第二步（2）建立好后的结果如下图设置相对应的属性，如下图所示5、建立一个Tab Panel视图，如下图所示，操作方法可以参照第2、4步建立好后的结果如下图设置相对应的属性，如下图所示，设置Tab 1的closable属性为真，删除Tab 2和Tab 3【鼠标指向Tab 2用右键快捷菜单删除，如图所示】6、我们测试一下我们前面的操作结果，如下图所示：先Build我们的项目，用鼠标单击菜单的Build图标在浏览器中打开我们建好的网页，如图所示：【请保持网络申通，因为app.html文件中的<script src="/ext/gpl/4.2.1/ext-all.js"></script>指向公网的资源。

EXTJS4.2资料控件之Grid⾏编辑绑定下拉框，并点⼀次触发⼀次事件主要代码：{header: '属性值',dataIndex: 'PropertyValueName',width: 130,editor: new boBox({typeAhead: true,triggerAction: 'all',name:'PropertyValueName',store: comboData_DynaPropertyValue,valueField: "PropertyValueName",displayField: "PropertyValueName",mode: 'remote',//localeditable: false,triggerAction: 'all',autoload: true,listeners: {"expand": function (combo, store, index) {var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data;comboData_DynaPropertyValue.load({params: {PropertyId: selectedData.PropertyId, //获取当前选择⾏的字段IDstart: startDynaProperty,limit: limitDynaProperty}});}}})}详细代码：var startDynaProperty = 0;var limitDynaProperty = 30;Ext.define('DynaProperty', {extend: 'Ext.data.Model',fields: [{ name: "PropertyId", type: "int" },{ name: "PropertyName", type: "string" },{ name: "PropertyEngName", type: "string" },{ name: "PropertyValueId", type: "string" },{ name: "PropertyValueName", type: "float" }]});var store_DynaProperty = Ext.create('Ext.data.Store', {model: 'DynaProperty',//这个地⽅DynaProperty不是⼀个对象，⽽是⼀个类remoteSort: false,remoteFilter: true,pageSize: limitDynaProperty, //页容量20条数据method: 'POST',proxy: {//代理type: 'ajax',url: "/UI/HttpHandlerData/GalleryManagement/GalleryManagement.ashx?operation=SearchPicList",//请求extraParams: {start: startDynaProperty,limit: limitDynaProperty},reader: {type: 'json',root: 'Table', //根节点totalProperty: 'result' //数据总条数}},sorters: [{//排序字段。