Ext2 常见界面界面(grid分页、窗口布局、下拉框级联)
先上图
这中间遇到grid分页和下拉comboBox级联(用户、地域)
源代码如下:
* 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();
// para.termTypeId = Ext.get('termTypeId').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
});
// var sss = new Ext.data.Store();
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;
// sss.add(records);
// sss.insert(0,rs);
s.insert(0,rs);
});
return store;
}
Ext2 常见界面界面(grid分页、窗口布局、下拉框级联)相关推荐
- qt int转换成qstring_「QT界面编程实例」创建颜色下拉框并改变窗体颜色(调色板)...
[实例]Qt创建窗体下拉框并改变窗体颜色:QPalette.QColor.QPixmap.QSize.QIcon.QStringList.QString 本例是想创建一个颜色下拉框(颜色是自动从QCo ...
- 【博主推荐】html下拉框树形(附好看的登录界面)
文章目录 [博主推荐]html下拉框树形(附好看的登录界面) 下拉框示例 下拉框代码 登录1示例 登录1代码 登录2示例 登录2代码 资源下载 [博主推荐]html下拉框树形(附好看的登录界面) [博 ...
- QComboBox自定义(一)--类似QQ登陆界面的下拉框
刚学Qt的时候,初步经历的第一个学习项目基本上都是LANQQ,初识时,不懂QSS,不懂布局,绘制界面最简单的方式成了使用designer拉满整个界面的控件,或者使用代码写了一些很蹩脚的布局.也是很羡慕 ...
- 下拉框_jQuery 美化界面的下拉框
插件简介 之前我们介绍过一款基于jQuery多级联动美化版Select下拉框,很多朋友都非常喜欢,可见经过美化过的下拉框的确可以让你的网页更为精妙.今天我们要介绍的这款美化界面下拉框也是基于jQuer ...
- 高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框
上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...
- el-pagination分页自定义前往第几页样式(下拉框形式)
业务场景 应客户要求,需要对表格分页时候的样式进行一些修改. 效果图如下 就是修改了el-pagination前往第几页的样式,把官方的输入页数的方式改成了下拉框的形式 实现步骤 1.利用el_pag ...
- (首页上一页下一页尾页 + 下拉框跳转)分页功能
说在前头(本人用的是bootstrap +jQuery 和 struts2 + MVC)不影响分页功能 制作一个分页功能: 效果如下: 由上图可知,此功能只适合页数不是特别多的情况下,页数多的时候, ...
- css设置下拉框,撑开下面的内容,且不影响整体布局
首先我们看一下需要达到的样子 鼠标移入到商品会有商品的基本信息的展示,且不影响下面的布局 下面开始堆代码 首先我们把整体的样式设置出来 html部分: <li class="cosme ...
- DOM 案例——(美团外卖下拉框菜单、半透明——信息滑入、模态窗口拖拽效果、放大镜效果、滚动条滑到一定位置的固定导航栏、12306购票网站多级联动、斗鱼TV无规则弹幕特效、百度搜索条动态输入下拉瀑布)
目录 1.缓动动画--美团外卖下拉框菜单 2.半透明--信息滑入 3.模态窗口拖拽效果 4.放大镜效果 5.滚动条滑到一定位置的固定导航栏 6.12306购票网站多级联动 7.斗鱼TV无规则弹幕特效 ...
最新文章
- szucodeforce训练1081C组合数学lucas定理,div2 627的D dfs +剪枝优化,697D Puzzles{dfs序+概率}
- 我记录网站综合系统 -- 技术原理解析[10:PermissionChecker流程]
- 「MTA」的「錯誤訊息代碼」
- python selenium过极验滑动验证码
- SAP Fiori Elements - how is sap-label annotation inserted to odata request
- java 对象池 实现_Java对象池技术的原理及其实现
- Flash Player版本相关问题
- Hanlp添加未登陆词
- 20、淘宝技术这十年
- 姚前:算法经济与算法监管
- 三菱PLC编程软件 GX Developer 8.86 中文版的下载与安装 (win 7 64位)
- Android Notification中PendingIntent.Flag的应用
- 二维图片做出三维效果
- Oracle之排序会影响rownum混乱的问题
- 分频电路设计(笔记)
- 【hihoCoder】#1615 : 矩阵游戏II
- Visualforce 标签(一)
- [转]WIN MOBILE UI开发入门
- JAVA毕业设计html5在线医疗系统计算机源码+lw文档+系统+调试部署+数据库
- apmserv mysql_解决在本地计算无法启动Apmserv-MySQL5.1服务,错误1067:进程意外终止