浏览 6842 次
|
锁定老帖子 主题：EXTJS4 组件创建
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-08-02
最近做的一个项目采用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();
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-08-09
opoa？
|
| 返回顶楼 | |
|
发表时间：2011-08-09
用one page one appliaction
|
| 返回顶楼 | |
|
发表时间：2011-08-11
MVC？？？？
|
| 返回顶楼 | |
