中文字幕一区在线观看,国产精品初高中精品久久,国产成人在线视频免费播放

【轉】Ext2 常見界面界面(grid分頁、窗口布局、下拉框級聯)

Posted on 2013-04-29 11:56 小胡子閱讀(343) 評論(0) 編輯收藏所屬分類: Ext

先上圖

grid分頁：
把grid和page工具綁定在一起

// create the Data Store

var store = new Ext.data.Store({

url:'termSearch.action',

storeId:'searchResult',

reader: new Ext.data.JsonReader({

totalProperty: 'totalrows',

root: 'data',

fields: [

{name: 'id', type:'int'},

'consumer',

'area',

'termid',

'name',

'status',

'udate'

]

})

});

var sm = new Ext.grid.CheckboxSelectionModel();// 多選行

var cm = new Ext.grid.ColumnModel([

new Ext.grid.RowNumberer(),

sm,

{header:'序號',width:40,dataIndex:'id'},

{header:'用戶',width:50,dataIndex:'consumer'},

{header:'地域',width:50,dataIndex:'area'},

{header:'終端編號',dataIndex:'termid'},

{header:'終端名稱',dataIndex:'name'},

{header:'終端狀態',dataIndex:'status',renderer: statusColor},

{header:'更新日期',dataIndex:'udate'}

]);

// by default columns are sortable

cm.defaultSortable = true;

var grid = new Ext.grid.GridPanel({

store: store,

cm: cm,

stripeRows: true,

height:350,

width:800,

title:'',

tbar: new Ext.PagingToolbar({

pageSize: 10,

width:'98%',

store: store,

displayInfo: true,

displayMsg: '顯示第 {0} 條到 {1} 條記錄，共 {2} 條',

emptyMsg: "無記錄"

})

});

窗口布局：
Ext2有很多布局，就是在layout包下，我這里用了TableLayout，TableLayout其實就是和一個HTML中的表格一樣，可以作row和column的span

var table = new Ext.Panel({

layout:'table',

defaults: {

bodyStyle:'padding:1px'

layoutConfig: {

columns: 4

items: [{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '終端編號',

id:'termId',

anchor:'95%'

}]

},{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '終端名稱',

id:'termName',

anchor:'95%'

}]

},{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '刷新延時',

id:'timeLapse',

anchor:'95%',

xtype:'combo',

store: new Ext.data.Store({

proxy: new Ext.data.MemoryProxy([['0','0'],['5','5'],['10','10'],['15','15'],['20','20']]),

reader: new Ext.data.ArrayReader({}, [

{name: 'value',mapping: 0, type: 'int'},

{name: 'text',mapping: 1}

]),

autoLoad:true

}) ,

displayField:'text',

valueField:'value',

hiddenName:'timeLapseValue',

typeAhead: true,

triggerAction: 'all',

forceSelection:true

}],

colspan:2

},{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '用戶',

anchor:'95%',

id: 'consId',

xtype:'combo',

anchor:'95%',

store: consumerStore,

displayField:'text',

valueField:'value',

hiddenName:'consumerId',

typeAhead: true,

mode: 'local',

triggerAction: 'all',

forceSelection : true,

emptyText:'Select a user

allowBlank: false,

selectOnFocus:true,

forceSelection:true,

listeners:{

select:{

fn:function(combo,record,index) {

var store = getSelectStore("55",record.get('value'));

Ext.getCmp('areaId').clearValue();

Ext.getCmp('areaId').store = store;

if(Ext.getCmp('areaId').view){

Ext.getCmp('areaId').view.setStore(store);

}

Ext.getCmp('areaId').enable();

}

}]

},{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '地域',

id:'areaId',

anchor:'95%',

xtype:'combo',

store: new Ext.data.Store(),

displayField:'text',

valueField:'value',

hiddenName:'consumerAreaId',

typeAhead: true,

mode: 'local',

triggerAction: 'all',

forceSelection : true,

emptyText:'Select a area

allowBlank: false,

selectOnFocus:true,

forceSelection:true,

disabled:true

}]

},{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '終端狀態',

id:'termStatus',

anchor:'95%',

xtype:'combo',

store: termStatusStore,

displayField:'text',

valueField:'value',

hiddenName:'termStatusId',

typeAhead: true,

triggerAction: 'all',

forceSelection:true,

editable:false,

mode: 'local'

}]

},{

labelWidth:55,

items: [{

id: 'Save',

text: '查詢',

xtype:'button'

}]

});

下拉框級聯：
下拉框級聯的思路其實很簡單，就是在第一個的select事件中刷新跌入下拉框的store。這里問題主要在如何給第二個下拉框的store賦值，我這里是用了一個方法獲得一個新的store，然后賦值的。不僅要各combo賦值，還要給combo.view賦值。一開始就卡在這里了，物理如何我給 combo賦值后，下拉框中的值總是不能夠及時刷新。給combo.view賦值是需要使用combo.view.setStore(store)這個方法，而不能直接賦值。在賦值的時候需要檢查combo.view 是否存在。

var store = getSelectStore("55",record.get('value'));

Ext.getCmp('areaId').clearValue();

Ext.getCmp('areaId').store = store;

if(Ext.getCmp('areaId').view){

Ext.getCmp('areaId').view.setStore(store);

}

Ext.getCmp('areaId').enable();

完整源代碼如下

* Ext JS Library 2.0.2

* licensing@extjs.com

* http://extjs.com/license

Ext.onReady(function(){

// Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

// example of custom renderer function

function statusColor(val){

if(val == '在線'){

return '<span style="color:green;">' + val + '</span>';

}else if(val == '會議中'){

return '<span style="color:red;">' + val + '</span>';

}

return val;

}

// create the Data Store

var store = new Ext.data.Store({

// this page, an HttpProxy would be better

// proxy: new Ext.data.MemoryProxy(data),

// proxy: new Ext.data.HttpProxy({

// url: 'termSearch.action'

//// url:'../../temp/data.txt'

// }),

url:'termSearch.action',

storeId:'searchResult',

// create reader that reads the Topic records

reader: new Ext.data.JsonReader({

totalProperty: 'totalrows',

root: 'data',

// id: 'id',

fields: [

{name: 'id', type:'int'},

'consumer',

'area',

'termid',

'name',

'status',

'udate'

// {name: 'udate', mapping: 'udate', type: 'date', dateFormat: 'Y-m-d'}

]

})

// ,

// turn on remote sorting

// remoteSort: true

});

var sm = new Ext.grid.CheckboxSelectionModel();// 多選行

var cm = new Ext.grid.ColumnModel([

new Ext.grid.RowNumberer(),

sm,

{header:'序號',width:40,dataIndex:'id'},

{header:'用戶',width:50,dataIndex:'consumer'},

{header:'地域',width:50,dataIndex:'area'},

{header:'終端編號',dataIndex:'termid'},

{header:'終端名稱',dataIndex:'name'},

{header:'終端狀態',dataIndex:'status',renderer: statusColor},

{header:'更新日期',dataIndex:'udate'}

]);

// cm.defaultSortable = true;

// by default columns are sortable

cm.defaultSortable = true;

var grid = new Ext.grid.GridPanel({

store: store,

cm: cm,

stripeRows: true,

height:350,

width:800,

title:'',

tbar: new Ext.PagingToolbar({

pageSize: 10,

width:'98%',

store: store,

// paramNames:{rowStart: 'start', rowLimit: 'limit'},

displayInfo: true,

displayMsg: '顯示第 {0} 條到 {1} 條記錄，共 {2} 條',

emptyMsg: "無記錄"

})

});

// grid.render('div-grid');

// grid.getSelectionModel().selectFirstRow();

var consumerStore = getSelectStore("54");

var termTypeStore = getSelectStore("53");

var termStatusStore = getSelectStore("51");

// new Ext.data.SimpleStore({

// fields: ['text'],

// data : [['0','0'],['5','5'],['10','10'],['15','15'],['20','20']],

// fields:[{name: 'value', mapping: 0},{name:'text',mapping:1}],

// autoLoad:true

// })

var table = new Ext.Panel({

layout:'table',

defaults: {

bodyStyle:'padding:1px'

layoutConfig: {

columns: 4

items: [{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '終端編號',

id:'termId',

anchor:'95%'

}]

},{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '終端名稱',

id:'termName',

anchor:'95%'

}]

},{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '刷新延時',

id:'timeLapse',

anchor:'95%',

xtype:'combo',

store: new Ext.data.Store({

proxy: new Ext.data.MemoryProxy([['0','0'],['5','5'],['10','10'],['15','15'],['20','20']]),

reader: new Ext.data.ArrayReader({}, [

{name: 'value',mapping: 0, type: 'int'},

{name: 'text',mapping: 1}

]),

autoLoad:true

}) ,

displayField:'text',

valueField:'value',

hiddenName:'timeLapseValue',

typeAhead: true,

triggerAction: 'all',

forceSelection:true

}],

colspan:2

},{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '用戶',

anchor:'95%',

id: 'consId',

xtype:'combo',

anchor:'95%',

store: consumerStore,

displayField:'text',

valueField:'value',

hiddenName:'consumerId',

typeAhead: true,

mode: 'local',

triggerAction: 'all',

forceSelection : true,

emptyText:'Select a user

allowBlank: false,

selectOnFocus:true,

forceSelection:true,

listeners:{

select:{

fn:function(combo,record,index) {

// Ext.Msg.alert('','xxxxxxx');

var store = getSelectStore("55",record.get('value'));

// Ext.Msg.alert(''+store.getCount(),'xxxxxxxxx='+store.getTotalCount());

Ext.getCmp('areaId').clearValue();

Ext.getCmp('areaId').store = store;

if(Ext.getCmp('areaId').view){

Ext.getCmp('areaId').view.setStore(store);

// Ext.getCmp('areaId').view.refresh();

}

Ext.getCmp('areaId').enable();

}

}]

},{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '地域',

id:'areaId',

anchor:'95%',

xtype:'combo',

store: new Ext.data.Store(),

displayField:'text',

valueField:'value',

hiddenName:'consumerAreaId',

typeAhead: true,

mode: 'local',

triggerAction: 'all',

forceSelection : true,

emptyText:'Select a area

allowBlank: false,

selectOnFocus:true,

forceSelection:true,

disabled:true

}]

},{

width:165,

labelWidth:55,

items: [{

xtype:'textfield',

fieldLabel: '終端狀態',

id:'termStatus',

anchor:'95%',

xtype:'combo',

store: termStatusStore,

displayField:'text',

valueField:'value',

hiddenName:'termStatusId',

typeAhead: true,

triggerAction: 'all',

forceSelection:true,

editable:false,

mode: 'local'

}]

// {

// width:165,

// layout: 'form',

// labelWidth:55,

// items: [{

// xtype:'textfield',

// fieldLabel: '終端類型',

// name: 'termType',

// id:'termType',

// anchor:'95%',

// xtype:'combo',

// store: termTypeStore,

// displayField:'text',

// valueField:'value',

// hiddenName:'termTypeId',

// typeAhead: true,

// triggerAction: 'all',

// forceSelection:true,

// editable:false,

// mode: 'local'

// }]

// },

{

labelWidth:55,

items: [{

id: 'Save',

text: '查詢',

xtype:'button'

}]

});

// table.render('div-grid');

var fp = new Ext.FormPanel({

// labelAlign: 'top',

frame:true,

title: '.',

bodyStyle:'padding:5px 5px 0',

width: 800

});

fp.add(table);

fp.add(grid);

fp.render("div-form");

//增加基本參數

store.on('beforeload', function(store) {

var para = {termId:'',termName:'',consumerId:'',areaId:'',termTypeId:'',tstatus:''};

para.termId = Ext.get('termId').getValue();

para.termName = Ext.get('termName').getValue();

para.consumerId = Ext.get('consumerId').getValue();

para.areaId = Ext.get('consumerAreaId').getValue();

para.tstatus = Ext.get('termStatusId').getValue();

Ext.apply(store.baseParams,para);

});

store.load({params:{start:0, limit:10}});

Ext.get("Save").on('click', function(){

store.load({params:{start:0, limit:10}});

});

function getSelectStore(selectId,pid){

if(!pid) pid = '';

var store = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({

method: 'GET',

url: '../webapp-cfg/getSelectOption.action?selectId='+selectId+'&pvalue='+pid+'&random='+Math.random()

}),

reader: new Ext.data.ArrayReader(

{id: "value"},

[

{name: 'value', mapping: 'value'},

{name: 'text',mapping:'text'}

]),

autoLoad:true

});

store.load();

store.on('load', function( s, records, options ) {

var rs = new Array(1);

var all = new Ext.data.Record([{name: 'value', mapping: 'value'},

{name: 'text',mapping:'text'}]);

all.set('value','');

all.set('text','全部');

rs[0] = all;

s.insert(0,rs);

});

http://www.aygfsteel.com/winderain/articles/200573.html

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 讓Extjs EditorGridPanel 編輯時支持方向鍵提高EXT js的加載速度的方法 [轉]Ext GridPanel根據條件顯示復選框 [轉]EXT EditorGridPanel 中用復選框表示真假值,擴展官方示例【轉】Ext.grid.GridPanel隔行顯示不同的背景顏色【轉】Ext2 常見界面界面(grid分頁、窗口布局、下拉框級聯) ExtJS 2.2,圖書管理系統共享全部源碼下載 [轉]Ext combobox 動態模糊匹配【轉】ExtJS練習——ComboBox的四種擴展【轉】Ext Combox 分頁

海水正藍

【轉】Ext2 常見界面界面(grid分頁、窗口布局、下拉框級聯)

日歷

常用鏈接

留言簿(1)

隨筆分類

隨筆檔案

文章檔案

搜索

最新評論

閱讀排行榜

評論排行榜