EXTJS开发过程中，遇到的问题和解决办法 15条经验

1、关于组件重载方法的问题，有参数的函数function(e){this.callParent(arguments) },调用父类方法时，也要带参数，没有参数的函数，调用父类方法时，直接this.callParent()即可。


2、关于grid中插件   plugins: [
             Ext.create('Ext.grid.plugin.CellEditing', {
                 clicksToEdit: 1//点击几下可以编辑
             })
     ]
放入的插件后，grid单元格中显示的值，往往不是我们想要看到的，需要renderer方法一下，因为要是不renderer，则显示的是插件的value值，可能是对象[object Object]，对象需要转换成字符显示。如果是combobox显示的是value值，但是这个value值往往不是我们想要的，所以需要renderer一下，方法时renderer ： function(v){这里面处理v的值，return XXX}.grid单元格显示的值，就是XXX。




3、combobox提交后台的input的name属性是combobox的hiddenName属性，对应store的东西，如hiddenName：'id'，提交到后台的input对应store的id。   displayField，显示文本，对应store里面的东西。




4、JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。但它们之间还是有区别的：
typeof
typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。
它返回值是一个字符串，该字符串说明运算数的类型。typeof 一般只能返回如下几个结果：
number,boolean,string,function,object,undefined。我们可以使用 typeof 来获取一个变量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错，对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。


instanceof
instance：实例,例子
a instanceof b?alert("true"):alert("false"); //a是b的实例？真:假
instanceof 用于判断一个变量是否某个对象的实例，如 var a=new Array();alert(a instanceof Array); 会返回 true，同时 alert(a instanceof Object) 也会返回 true;这是因为 Array 是 object 的子类。再如：function test(){};var a=new test();alert(a instanceof test) 会返回true
谈到 instanceof 我们要多插入一个问题，就是 function 的 arguments，我们大家也许都认为 arguments 是一个 Array，但如果使用 instaceof 去测试会发现 arguments 不是一个 Array 对象，尽管看起来很像。
另外：
测试 var a=new Array();if (a instanceof Object) alert('Y');else alert('N');
得'Y’
但 if (window instanceof Object) alert('Y');else alert('N');
得'N'
所以，这里的 instanceof 测试的 object 是指 js 语法中的 object，不是指 dom 模型对象。
使用 typeof 会有些区别
alert(typeof(window)) 会得 object






5、关于value和rawValue,value是组件的真实值，rawValue是组件的显示值，通过查询父类的getValue,setValue,getRawValue,setRawValue这些方法，然后重写这几个方法，进行对组件的真实值和显示值设置。




6、添加键盘事件，首先看看组件是否有键盘事件，如果有才能添加键盘事件。用keypress : function(field,e){}，要在对应的组件中设置enableKeyEvents: true,否则键盘事件不可用；使用getKey（）方法判断按键是否为自己设置的按键，具体按键号码可参照ExtJS给出的api，然后做具体操作。注意：如果是特殊的键盘事件：比如enter，esc，ctrl等，要用specialkey : function(field,e){}事件操作，否则也无效果。（一般只对当前的一个组件有效果）


7、组件Ext.Action，触发它的handler句柄方法，也就是单击事件，是XXX.execute()方法，如果有参数，则把参数都写进到方法里面。




8、关于Ext.encode(函数)的问题，在Ext4.0版本以下的，Ext.encode(function(){})返回的是{}；在Ext4.0版本以上，Ext.encode(function(){})返回值是null。（已经亲测过了）




9、ext4.2版本以上的关于TreeStore的定义，如果有其他自定义的属性时，需要自己定义model，然后把自定义的model应用到TreeStore的model属性中，自定义model如下：
Ext.define('mymodel',{
extend : 'Ext.data.Model',
fields: [
        {name: 'value',  type:'string'},
        {name: 'text',  type: 'string'},
        {name: 'type', type : 'string'}
        ]
});
name就是自定义的一系列属性，type是规定的属性类型只能是这个类型，不写type，可以是任意类型。


10、Extjs4 window关闭后打开 cannot read property addcls of null
 
最近遇到一个刺手的问题，折腾了好久，一直没找到原因，问题是：Extjs4 window关闭后打开 cannot read property addcls of null。从网上看了好多，都说是什么初始化的什么不正确，要什么initComponent,都是抄袭，并没有解决我的问题。现在说说具体的见解
    当关闭window时，组件（包括window里面的所有组件）直接被destory掉，第二次打开的时候，如果你在用add进行加载，items属性需要再次初始化，上次的已经被destory了，如果你还是调用先前初始化的items,就会抛出上面的错误。window可以设置 closeAction:'hide',当点击关闭的时候，可以隐藏。所以不需要每次进行构造(new)。（或者把window里面的组件写到外面，跟window同时写到一个方法中，当调用这个方法时，它把所有的东西都重新创建一次，然后就会出现我们想要的效果了）


11、grid中每行前面加复选框，grid中加属性
selType: 'checkboxmodel',
selModel: {
mode : 'SIMPLE'
}
其中selModel中的mode有三种选择，SINGLE：默认的，只允许单选，MULTI：按住ctrl或者shift键可以多选，SIMPLE:允许多选，在每一行上点击也可以多选




12、extjs中Ext.encode(value)函数，value中有中文会转化成unicode编码，解决办法，用js自带的unescape函数转化一下就可以解决问题。
unescape(Ext.encode(value).replace(/\\u/gi, '%u'))就是这句话。




13、Ext.tab.Panel中有多个标签，当激活另外的标签时，该标签却加载不出来其对应的东西，这时候要在tabPanel中加一个配置项：


deferredRender: false,//是否在激活显示每个标签的时候再渲染标签中的内容.默认true。


加上该配置项，就可以正常显示了。


注：其他重要属性解释
 tabPosition: 'top',//表示TabPanel头显示的位置,只有两个值top和bottom.默认是top.     
 enableTabScroll:：Tab标签过多时,出现滚动条 




14、关于extjs4的Ajax请求和分页的集成：
 在store中请求ajax
var store = new Ext.data.Store({
clearRemovedOnLoad : true,
fields : fields,
proxy: {
       type: 'ajax',
       url : url + '/log/log.list.jsp',
       extraParams : {type : type},
   reader: {
    idProperty : 'id',
       type: 'json',
       root: 'datas',
       totalProperty : 'total'
   }
   }
});






在分页标签中引用store
var pagingToolbar =  Ext.create('Ext.toolbar.Paging',{
pageSize : 50, //每页显示几条数据  
store : store,
border : false, 
firstText : '第一页',
prevText : '上一页',
inputItemWidth : 50,
beforePageText : '第',
afterPageText : '页，共{0}页',
displayInfo : true, //是否显示数据信息  
displayMsg : '显示第 {0} 条到 {1} 条记录，一共  {2} 条', //只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据  
lastText : '最后一页',
nextText : '下一页',
refreshText : '刷新',
emptyMsg : '没有记录' //没有数据时显示信息  
});






在grid中引用store和分页标签
var grid = Ext.create('Ext.grid.Panel', {
//region : 'center',
border : false,
   stripeRows:true, //斑马线效果  
        loadMask:true, //显示遮罩和提示功能,即加载Loading…… 
sortableColumns : false,
allowDeselect : true,
   columns : columns,
   width : 500,
store : store,
dockedItems : [{
       dock: 'bottom',
       border : false,
       items: [description, pagingToolbar]
}]
});


后台处理代码：
int pagenum = Integer.parseInt(request.getParameter("page"));
int start = Integer.parseInt(request.getParameter("start"));
int limit = Integer.parseInt(request.getParameter("limit"));
page、start、limit是extjs自动添加的参数


返回的数据中要有total总数，否则不能显示一共多条




15、Extjs中Ext.data.Store的返回数据中,JsonArray中的每个JsonObject中的key不能是XXX.XXX.XXX的格式,如果key中有这种格式,前台页面会展示该key对应的value为空值,原因可能是store在load的时候,把XXXX.XXXX.XXXX的点“.”当成XXX的对象处理了,所以对应的value会显示空值。这个需要注意，以后在做Ext.data.Store的时候，返回的json中的key，一定不能带有“.”，否则会出现对应的值不显示。