用extjs4 已经有一段时间了,过去开发的时候用过extjs2.2 因为放下了两年所有很多东西记得不是很清楚了,现在又直接使用4 突然发现这个世界变得太快连代码都变得这么快,大部分东西都完全不一样了,组建,数据交互.....,因为有采用了extjs4的新标准MVC 哎现在这个前段也搞什么三层,软件架构真是越来越复杂。在此主要整理记录一下在4中遇到一下比较奇怪的问题和解决方法,
1: MVC 初始化的问题,MVC 的核心是Controller 相当于Servlet 大量逻辑性的代码都写在里边主要需要引入 stores,
views,models 只要需要显示在页面的view都要引入到views 数组中,MVC 在加载Controller 的时候会创建stores 中所有的stores ,其他的views ,models 则不会创建对象,不知道他们这样设计的目的在于什么?
2: MVC 中 一般在View 中包含一个Store ,而在Store中会包含一个Model 的属性,view中包含store 例如store:'config.configmanage.DPCGridPanelStore', 只需要写入store的相对路径即可,但是 store 中包含model 则必须写入绝路径 model:'DELTA.model.config.configmanager.DPCModel', 不知道他们这样设计目的在于什么?
3: 属性赋值 :创建组建时候直接给组建的属性赋值 和通过Ext.apply()给组建赋值有区别,其中有一个应用就是
tab 中新增一个grid 第一次没有问题,但是如果把这个tab 关闭 在点击新增这个grid 这个grid的就会显示出现问题,搞了好长时间发现吧 分页bar 通过apply的方式赋给grid 就不会出现这个问题,如果是直接配置给gird 就会出问题实在是不能理解。
4: baseParams 使用 一般在条件分页的时候使用 在使用2.2的时候 直接通过store.load({baseParams:{a:a}}); 现在通过这个方法没法执行具体使用方法
var new_params = { ndpcId:id}; Ext.apply(win.query("#dpcCheckBoxTree")[0].getStore().proxy.extraParams,new_params); win.query("#dpcCheckBoxTree")[0].getStore().load();
5: 在使用可编辑Grid 的时候 最后一步往往都是获得修改的数据集提交到后台
extjs3 的时候 通过调用store的getModifyRecords() 的方法 4以后改成getUpdatedRecords但是在调用后发现修改过的 model[] 的长度都是0 。解决办法
ext 的模型类:model有如下一个熟悉
idProperty : String
The name of the field treated as this Model's unique id (defaults to 'id').(唯一识别store中记录的字段)
默认为'id',如果没有配置这个属性,就需要在自己定义的model中提供一个名叫'id'的唯一主键。或者配置成自己的主键如:
Ext.define('Tms.model.QualificationInfo', { extend : 'Ext.data.Model', idProperty : 'qiId',//定义自己的主键 fields : [{ name : 'qiId', type : 'int', useNull : true }, { name : 'qtId', type : 'int', useNull : true }, 'qiName', 'qiParents', 'qiNovitiate', 'qiTrainingTask'] });
6: 在使用tree的时候出现点击树节点出现等待的符号无法进入的原因是 后台返回的tree 节点的id 有重复导致。
7: grid 在tab 中显示,如果同一个grid 在tab 上出现了两次就会出现 第二个grid 的数据把前一个覆盖,这个是因为grid中使用的store是单例 的你创建的多个grid 但是却创建了一个store 所以就会导致第二个在tab上新增的grid 的数据会覆盖原先打开的grid的数据 var store=Ext.widget('deviceliststore'); 然后store:store
传统的store:'Ext.data.Store' 这样的写法在创建多个grid 的时候只会穿件一个store
8:打开多个tab标签页 图标显示问题除了第一个的图标其他的无法正常显示, tbar 中如果是button 请不要指定xtype属性就可以解决
9: 在使用grid 固定列的时候 不但要设定 {xtype:'rownumberer',header:'编号',width:40,locked:true },还要设定height 的属性,不然是不能正常使用的。
10: Extjs 中的组件最好不要设置ID 而设置Name 属性, 在 例如panel 的id:p1 , 在tabpanel 中应用的时候弹出多个tab 的时候就会出现id 冲突的问题,错误现象是显示会出现异常,在tabpanel 使用的时候会经常的出现id冲突的问题
例如 按钮的id 冲突会导致图片无法显示的问题,这里说的id 冲突并不是你定义了两个id 一样的组件,而是你定义一个id但是这个组件生成了多次。
11:关于 Tree 删除的问题,如何删除除了根节点以外所有的子节点??
Ext Tree 的root 也就是根节点非常重要,TreeStore 中有一个removeAll 方法是删除树的所有节点,但是一旦删除树的所有节点就无法对树进行操作了,所以在删除的时候经常都是保留根节点进行删除
tree.getStore().getRootNode( ).removeAll();
待续。。。。。。。。
12:在可编辑的grid 中使用combobox 控件的时候选择的dispalyValue renderer以后就成了 value ,处理方法
var alarmStore=Ext.create("Ext.data.Store", { fields: ["alarmStandardId", "standardName"], proxy:{ type : 'ajax', url : 'findAlarmStandardNameList.action', pageParam:'pageNo', //model:'Delta.model.config.devicemanage.DeviceModel', reader : { type:'json' , root:'alarmStandardNameList' } } }); field: { allowBlank: true, xtype: 'combo', name:'', queryMode: 'remote', store:alarmStore, displayField:'standardName', valueField:'alarmStandardId', editable:false } , renderer: function(value, metadata, record, rowIndex, columnIndex, store){ index = alarmStore.findExact('alarmStandardId',value); if (index != -1){ rs = alarmStore.getAt(index).data; return rs.standardName; } /*var index = store.find(buildingCombobox.valueField,value); var r = store.getAt(index); alert(r.data.buildingName);*/ //console.log(record); return value; }
13:grid 中使用lock (固定表头) 下动态设置column 的show 和hide 方法, 在普通grid 下动态设定表头比较容易
只需要获取grid 的columns 然后设置 需要隐藏的列.columns[x].setVisible(false); 但是在使用固定表头的情况下这个方法就没法执行老是提示 no method 的就是错误,确实百撕不得骑姐,非常不正常,就在生成的js 的代码中看看什么状况吧,发现在属性plugins 中多了一些东西 其中有一个view 属性,在view属性中有找到了lockedGrid ,和normalGrid两个不同grid 呵呵知道是什么
原因了 原来固定表头其实是通过插件吧grid 分成了两个grid 真正的column 就隐藏在这两个grid中 grid.plugins[0].view.normalGrid.columns[6].setVisible(false); 呵呵搞定
14: 如何彻底隐藏列,一般开发者在使用隐藏列的时候都是hidde:true 用来隐藏列,但是这种隐藏列是不干净的,可以通过列下来在显示上,所以要想彻底隐藏列不但要设置 hidden 属性还要设置 hideable: false , 属性
15:ajax 提交返回结果中带有<per></per> ,解决方法 response.setContentType("text/html");
待续。。。。。。。。。。。。。。。
相关推荐
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议
包含各种类型的extjs小图标,Extjs4小图标
Extjs4的demo 很不错的例子
EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册...
extJs3升级extjs4方案, extJs3升级extjs4需要修改大量代码
我很自豪能代表Sencha和ExtJS团队和大家成功的分享了ExtJS 4的预览版、3个beta版和今天发布的正式版等5个版本。 ExtJS 4从创建之初,就以最全面现代化为目标,它采用了改进的架构和加入了许多新的特性,从而使你可以...
extjs4 中文 API
Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...
ExtJs 4 API 中文
最新的extjs4的各种包,包含js,exmple等,适合初学者
从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从ExtJs5开始则引入了MVVC架构。 从网上资料来看,多数都是停留在ExtJs3...
用extjs4 TreeGrid做的report报表
ExtJS4下拉树组件 ExtJS4下拉树组件
ExtJS4之初体验,中文版的文档,Getting started with extjs的中文版
extjs4-教程搭建 ExtJS 入门学习、可视化开发环境、布局详解 、文档阅读
extjs4环境搭建
ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)--...
用extjs4搭的一个简单布局框架
EXTJS4 菜单栏
Extjs4详解,详细介绍Extjs4开发技术,自是不必多说!