Extjs動態(tài)創(chuàng)建grid

WindySky 2011-08-07

展開全文

Ext.onReady(function(){
var store; //store
var cm; //columnModel
var pagingBar; //pagingBar
var grid; //grid
var pageSize = 3; //pageSize
/*
* 創(chuàng)建store
*/
var createStore = function(record){
var arrayField = record.name.split(',');
var str = "{'fields':[";
for(var i=0;i<arrayField.length;i++){
str=str+"{name:'"+arrayField[i]+"',mapping:'"+arrayField[i]+"'},";
}
var fields = str.substring(0, str.length-1)+']}';
var jsonFields = new Ext.util.JSON.decode(fields);
store = new Ext.data.JsonStore({
url:path+'/SysPage/getList.json',
baseParams:{start:0},
root:'rows',
totalProperty:'rowCount',
fields:jsonFields.fields,
autoLoad:true
});
store.on('beforeload',function(){
Ext.apply(store.baseParams,{
limit:pageSize
});
});
return store;
};
/*
* 創(chuàng)建column
*/
var createColumn = function(record){
var arrayHead = record.fieldName.split(',');
var arrayIndex= record.name.split(',');
var columnArray = new Array();
var rowNumber = new Ext.grid.RowNumberer();
columnArray[arrayIndex.length]=rowNumber;
var str = "{'columnModle':[new Ext.grid.RowNumberer(),";
for(var i=0;i<arrayIndex.length;i++){
str =str+"{'header':'"+arrayHead[i]+"',dataIndex:'"+arrayIndex[i]+"'},";
}
str = str.substring(0, str.length-1)+"]}";
var jsonColumn = new Ext.util.JSON.decode(str);
cm = new Ext.grid.ColumnModel(jsonColumn.columnModle);
return cm;
};
/*
* 創(chuàng)建pagingToolbar
*/
var createPage = function(store){
pagingBar = new Ext.PagingToolbar({
pageSize : pageSize,
store : store,
displayInfo : true
});
return pagingBar;
};
/*
* 創(chuàng)建grid
*/
var createGrid = function(record){
store = createStore(record);
cm = createColumn(record);
pagingBar = createPage(store);
grid = new Ext.grid.GridPanel({
cm:cm,
store:store,
tbar:[{
text:'查詢',
handler:function(){
store.load({params:{start:0}});
grid.getView().refresh();
}
},{
text:'查看',
handler:function(){
var record = grid.getSelectionModel().getSelected();
if(!record){
Ext.Msg.alert('tip','no data');
}else{
Ext.Msg.alert(record.get('name'),record.data.fieldName);
}
}
}],
height:500,
bbar:pagingBar,
listeners:{
'rowclick':function(grid,index,e){
var record = store.getAt(index).data;
Ext.Msg.alert(record.name,record.fieldName);
}
}
});
return grid;
};
/*
* 創(chuàng)建viewport
*/
var createViewport = function(record){
grid = createGrid(record);
return new Ext.Viewport({
layout:'fit',
items:[grid]
});
};
/*
* 獲取表字段
*/
Ext.Ajax.request({
url:path+"/SysPage/getById.json",
params:{id:'6'},
success:function(response,options){
var array = Ext.util.JSON.decode(response.responseText);
if(array!=null&&array.data!=null){
var record = array.data;//data是前臺傳遞的JavaBean
createViewport(record);
}
}
});
});

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻花（0） +1

來自： WindySky > 《EXTJS》

舉報/認領(lǐng)

0條評論

發(fā)表

請遵守用戶評論公約

類似文章 更多

WindySky

關(guān)注對話

TA的最新館藏

[轉(zhuǎn)] 盤點 2014 電影營銷大戰(zhàn)經(jīng)典案例
SpringCloud+Docker+Jenkins+GitLab+Maven實現(xiàn)自動化構(gòu)建與部署實戰(zhàn)
[轉(zhuǎn)] Android通過JUV+Red5+Speex實現(xiàn)網(wǎng)絡(luò)語音聊天(一)
[轉(zhuǎn)] Nginx常見錯誤與解決方法
[轉(zhuǎn)] 基于前后端分離的身份認證方式
[轉(zhuǎn)] SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問題(一)

喜歡該文的人也喜歡更多

熱門閱讀換一換

乡下人产国偷v产偷v自拍,国产午夜片在线观看,婷婷成人亚洲综合国产麻豆,久久综合给合久久狠狠狠9

Extjs動態(tài)創(chuàng)建grid