完整源代码如下
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* 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,
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:'timeLapseValue',
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 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,
layout: 'form',
labelWidth:55,
items: [{
xtype:'textfield',
fieldLabel: '地域',
name: 'consumerArea',
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,
layout: 'form',
labelWidth:55,
items: [{
xtype:'textfield',
fieldLabel: '终端状态',
name: 'termStatus',
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'
// }]
//
// },
{
layout: 'form',
labelWidth:55,
items: [{
name: 'Save',
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);
});
分享到:
相关推荐
extjs表格布局小例子,涉及到数据的存储,如何删除数据和添加数据
ext实例 ext操作步骤,页面布局,创建窗口,ext基本表格介绍,
让你知道ext表格控件的厉害。 2.1. 功能丰富,无人能出其右 2.2. 让我们搞一个grid出来耍耍吧。 2.3. 上边那个是1.x的,2.0稍微有些不同哦 2.4. 按顺序,咱们先要把常见功能讲到 2.4.1. 自主决定每列的宽度 2.4.2. ...
EXT JS通常简称为EXT,它是一个非常优秀的Ajax框架...法实现或极难实现的功能,却能用EXT轻易实现,比如EXT中的表格、树形、布局等控件能为我 们的日常开发工作节约大量的时间和精力,这些都坚定了我们使用EXT的决心。
让你知道ext表格控件的厉害。 第 3 章 歌颂吧!只为了树也要学ext。 第 4 章 祝福吧!把表单和输入控件都改成ext的样式。 第 5 章 雀跃吧!超脱了一切的弹出窗口。 第 6 章 奔腾吧!让不同的浏览器...
让你知道ext表格控件的厉害。 2.1. 功能丰富,无人能出其右 2.2. 让我们搞一个grid出来耍耍吧。 2.3. grid默认自带的功能 2.4. 按顺序,咱们先要把常见功能讲到 2.4.1. 自主决定每列的宽度 2.4.2. 让grid支持按列...
让你知道ext表格控件的厉害。 2.1. 功能丰富,无人能出其右 2.2. 让我们搞一个grid出来耍耍吧。 2.3. 上边那个是1.x的,2.0稍微有些不同哦 2.4. 按顺序,咱们先要把常见功能讲到 2.4.1. 自主决定每列的宽度 ...
9.3 实现一个功能完整的增、删、查、改表格控件 259 9.3.1 扩展GridPanel 259 9.3.2 配置列模型 259 9.3.3 配置显示数据 260 9.3.4 点缀EasyGrid 261 9.3.5 实现添加一条记录的功能 262 9.3.6 实现修改一条记录的...
Ext在最开始的时候,是作为YUI的一个扩展存在的,所以那个时候它的名称是YUI.Ext,后来,Ext作为一个独立的项目进行开发,并不再依赖于YUI。适合企业级开发,能实现复杂的Layout布局,界面效果可以和backbase媲美,...
全书由一个可以引领读者快速入门的“hello world”示例开篇,紧接着对ext js的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后以一...
9.4.11 表格布局:ext.layout.container.table / 454 9.4.12 列布局:ext.layout.container.column / 455 9.4.13 自适应布局:ext.layout.container.abstractfit与ext.layout.container.fit / 456 9.4.14 卡片...
全书由一个可以引领读者快速入门的“hello world”示例开篇,紧接着对ext js的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后以一...
全书由一个可以引领读者快速入门的“hello world”示例开篇,紧接着对ext js的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后以一...
[深入浅出Ext.JS].(徐会生&何启伟&康爱媛)....ext布局。ext几个实例。EXT开发指南。EXT树简介。JavaScript使用手册。很多的extjs教程,你6分下载这个压缩包很值的,足足有三十几个教程文档。包括的很全面。
该资源是 针对于ext3.0的组件的小demo,包括表格,工具栏,动态提示,模板,reader,布局,事件,ajax,跨域ajax,dataview及控制台等
然后按照Ext JS的开发顺序,首先讲解了页面的布局设定,接着详细讲解了各种常用组件的使用方法,并对实际开发中常用的画面场景进行了总结,最后通过完整的示例演示了Ext JS+REST+Spring+Hibernate的整合方案。...
EXTJS4自学手册——EXT容器布局(Auto,Anchor,Absolute,Hbox) EXTJS4自学手册——EXT容器布局(Vbox,Accordion,Table,Column) EXTJS4自学手册——EXT容器布局(Fit,Card,Border) EXTJS4自学手册——EXT组件布局 ...
折叠布局Ext.layout.AnchorLayout 边框布局Ext.layout.BorderLayout 卡片式布局Ext.layout.CardLayout 列布局Ext.layout.ColumnLayout 填充布局xt.layout.FitLayout 表单布局Ext.layout.FormLayout 表格布局Ext....
全书由一个可以引领读者快速入门的“Hello World”示例开篇,紧接着对Ext JS的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后一个...