EXTJS4 组件创建
最近做的一个项目采用EXTJS4作为展现层，利用2天的周末时间看了一下EXTJS4的API，非常简单的重写了一个分页，先将方法介绍如下，如下看组件效果
?
?
?
首先看组件代码：
Ext.define('Ext.ux.CustomPaging', { extend: 'Ext.toolbar.Paging', requires: ['Ext.toolbar.TextItem', 'Ext.form.field.Number'], bStr:'', aStr:'', maxStr:'', minStr:'',initComponent : function(){ var pageSizeItems = [ this.bStr, {xtype: 'numberfield',cls: 'x-tbar-page-number',allowDecimals: false,allowNegative: false,enableKeyEvents: true,width: 75,maxValue: 100,maxText: this.maxStr,minValue: 1,minText: this.minStr,selectOnFocus: true,value: this.pageSize,submitValue: false,nanText:'\u8bf7\u8f93\u5165\u6570\u5b57',listeners: {scope: this,keydown: this.onHlPagingKeyDown//blur: this.onHlPagingBlur} },this.aStr ]; var userItems = this.items || []; this.items = userItems.concat(pageSizeItems); Ext.ux.CustomPaging.superclass.initComponent.call(this); },onHlPagingKeyDown: function(field, e){ if(field.isValid()){ var k = e.getKey();if(typeof(k) == "undefined" || typeof(k) == "null" || k == null || k == ""){ k = window.event.keyCode;}var r = e.RETURN;if(typeof(r) == "undefined" || typeof(r) == "null" || r == null || r == ""){ r = '13';} if (k == r) { e.stopEvent(); this.pageSize = field.getValue(); this.store.pageSize = field.getValue(); this.store.proxy.extraParams['pageSize'] = field.getValue(); this.store.loadPage(1); this.doRefresh(); } } }, onHlPagingBlur: function(field){ if(field.isValid()){ this.pageSize = field.getValue(); this.store.pageSize = field.getValue(); this.store.proxy.extraParams['pageSize'] = field.getValue(); this.store.loadPage(1); this.doRefresh(); } } }); ?如上为扩展组件，如果你想引入，则需要如下声明:
Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath('Ext.ux', '${ctx}/ext-4.0.0/ux/'); Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*', 'Ext.ux.ProgressBarPager']);Ext.onReady(function() {});?然后你可以去创建此对象：
var bbar= Ext.create('Ext.ux.CustomPaging', { pageSize: 20, store: store, displayInfo: true, displayMsg:'显示第{0}条到{1}条记录，一共{2}条', beforePageText:'第', afterPageText:'页,共 {0} 页', emptyMsg:'没有记录', bStr:'每页', aStr:'条', maxStr:'每页不允许超过100条', minStr:'每页不允许小于1条', plugins: Ext.create('Ext.ux.ProgressBarPager', {}) }); ?最后，将bbar引用给GRID对象的bbar属性，如
bbar:bbar,
?使用EXTJS4的时候，发现一个BUG，就是如果你的STORE对象获取后台数据，如果为空，则渲染GRID时，会报错（这个BUG存在于IE6、7、8），我个人有一种解决方法，首先你定义的Model，需要增加一个额外的映射
Ext.define('Task', {extend: 'Ext.data.Model', idProperty: 'root', fields: [ {name: 'noResult',mapping:'noResult'}, {name: 'ratingId',mapping:'ratingId'} ] });?上面的 "noResult"为额外属性，用于区分是否存在列表数据，然后增加监听方法
var store = Ext.create("Ext.data.Store",{model: 'Task',autoLoad: false,remoteSort: true,pageSize: 20,proxy: {type: 'ajax',url: '${ctx}/customerDrain/getCustomerDrainListJSON.action',reader: { type: 'json', root: 'root', totalProperty: 'totalProperty'}, extraParams:{pageSize:'20','customerDrainTO.branchCode':'', 'customerDrainTO.serviceUser':'', 'customerDrainTO.customerPackage':'', 'customerDrainTO.packageType':'', 'customerDrainTO.year':'', 'customerDrainTO.quarter':'', 'initFlag':Ext.getCmp('initFlag').getValue()} }, listeners:{load:function(t,records,successful,operation){if(records.length == 1 && records[0].get('noResult')== 1){this.removeAll(false);}}} });?当然你后台封装数据，如果列表为空必须冗余此属性并赋值，如
//声明返回JSON对象JSONObject json = new JSONObject();json.accumulate("totalProperty", total);//声明JSON数组JSONArray jsonArray = new JSONArray();for(Object o:li){ //转换为JSON对象JSONObject j = JSONObject.fromBean(o);//添加的JSON数组jsonArray.put(j);}//屏蔽IE空列表BUGif("[]".equals(jsonArray.toString())){JSONArray jArray = new JSONArray();JSONObject j = new JSONObject();j.accumulate("noResult", 1);jArray.put(j);json.accumulate("root", jArray);}else{json.accumulate("root", jsonArray);}return json.toString();??