这种常见应用
布局：
Grid分页
级联：
代码如下：
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
********************
*
*extjs/license
*/
// example of custom renderer function
function statusColor(val){
if(val == '在线'){
return '<span >' + val + '</span>';
}else if(val == '会议中'){
return '<span >' + val + '</span>';
}
return val;
}
/
/ create the Data Store
var store = new Ext.data.Store({
url:'termSearch.action',
storeId:'searchResult',
// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
totalProperty: 'totalrows',
root: 'data',
fields: [
{name: 'id', type:'int'},
'consumer',
'area',
'termid',
'name',
'status',
'udate'
]
})
// turn on remote sorting
// remoteSort: true
});
var sm = id.CheckboxSelectionModel();// 多选行var cm = id.ColumnModel([
id.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 = id.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: "无记录"
})
});
// der('div-grid');
// SelectionModel().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,
layout: 'form',
labelWidth:55,
items: [{
xtype:'textfield',
fieldLabel: '终端编号',
name: 'termId',
id:'termId',
anchor:'95%'
}]
},{
width:165,
layout: 'form',
labelWidth:55,
items: [{
xtype:'textfield',
fieldLabel: '终端名称',
name: 'termName',
id:'termName',
anchor:'95%'
}]
},{
width:165,
layout: 'form',
labelWidth:55,
items: [{
xtype:'textfield',
fieldLabel: '刷新延时',
name: 'timeLapse',
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:'timeLapseV alue',
typeAhead: true,
triggerAction: 'all',
forceSelection:true
}],
colspan:2
},{
width:165,
layout: 'form',
labelWidth:55,
items: [{
xtype:'textfield',
fieldLabel: '用户',
name: 'consumerId',
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 ',
allow Blank: false,
selectOnFocus:true,
forceSelection:true,
listeners:{
select:{
fn:function(combo,record,index) {
// Ext.Msg.alert('','xxxxxxx');
var store = getSelectStore("55",('value'));
// Ext.Msg.alert(''+Count(),'xxxxxxxxx='+TotalCount());
Cmp('areaId').view){
// Cmp('areaId').fresh();
}