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空列表BUG
		if("[]".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();