本文介绍如何使用ExtJS进行页面布局设计及组件绘制，包括表单、下拉框、日期选择器等控件的配置与使用方法，并详细解释了如何通过ExtJS构建响应式网格面板。
<script type="text/javascript">
//页面布局开始
//初始化
var queryForm;
Ext.onReady(function(o){
// 因为我采用的是内嵌的ifram，所以这行为设定父panel的高度，根据页面显示内容调整自定义页面高度
parent.tabs.setHeight(574);
// 绘制表单
paintForm();
// 绘制内容展示区
centerPanel = new Ext.Panel( {
region :'center', // 当父panel布局为borderLayout时，必须有center region，否则将抛出异常
monitorResize :true, // 适应屏幕大小
border :false, // 不显示边框
style:'margin:3px 0 0 0;', // 设置上边距为3个像素
items : [{
id :'centerPanel', //名称可任意指定
header:false, // 不显示该panel的 title项
border:false,
contentEl:'mainDiv' // 必须要有此项，当items里没有item项时，必须使用contentEl指定一个已存在的元素作为容器
}]
});
// 从这里开始绘制页面，Viewport的默认容器为body
var layout = new Ext.Viewport( {
layout :'border', // 布局样式，类似swing的布局，分为上左中右下五个区域
defaults : {border :false}, // 设置全局样式
items : [queryForm, centerPanel] // 包含queryForm(north)和centerPanel(center)两个panel。
});
//调用绘制列表的方法
list();
});
// 绘制查询表单
function paintForm(){
//绘制下拉选择框，也可使用ComboBox的store对象的loadData方法动态加载选择项
var checkStateCombo = new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({
fields: ["value", "text"],
data: [['0','全部'],['3','违规'],['1','未审核'],['4','非违规']]
}),
valueField :"value", // 这两项要与上面的fields对应
displayField: "text",
mode: 'local', // 数据从本地获取
blankText:'请选择',
emptyText:'------',
triggerAction: 'all', // 显示全部选择项
fieldLabel: '审核状态',
name: 'torrentQuery.checkState',
hiddenName:'torrentQuery.checkState', // 每个元素必须有hiddenName项,form对象读取的值是跟此项关联的,命名规则取决于你与action之间的传值策略，这里使用的是VO注入。
anchor:'100%'
});
var orderCombo = new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({
fields:["value","text"],
data:[['downloadNum','排序A],['detectedTime','排序B]]
}),
valueField :"value",
displayField: "text",
mode: 'local',
blankText:'请选择',
emptyText:'------',
triggerAction: 'all',
fieldLabel:'排序方式',
name: 'torrentQuery.orderBy',
hiddenName:'torrentQuery.orderBy',
value:'downloadNum',
anchor:'100%'
});
var sortCombo = new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({
fields:["id","text"],
data:[['desc','倒序'],['asc','正序']]
}),
valueField :"id",
labelSeparator:"",
displayField: "text",
mode: 'local',
blankText:'请选择',
emptyText:'------',
value:'desc',
triggerAction: 'all',
hiddenName:'torrentQuery.sortBy',
fieldLabel:'',
name: 'torrentQuery.sortBy',
anchor:'100%'
});
queryForm = new Ext.FormPanel({
height: 60,
labelAlign: 'right',
region:'north',
buttonAlign:'right',
labelWidth:70,
border: false,
header:false,
frame:false,
monitorResize:true,
items:[{
layout:'column', // 布局为一列
ctCls:'form-bg', // 自定义父元素的样式
border:false,
items:[{
columnWidth:.3, // 列宽为百分之30%
layout: 'form',
border:false,
items: [{
id:'remark',
xtype:'textfield',
fieldLabel: '名称',
name: 'torrentQuery.remark',
hiddenName:'torrentQuery.remark',
anchor:'100%',
allowBlank:true // 允许为空
}]
},{
columnWidth:.3,
layout: 'form',
border:false,
items: [{
id:'sitename',
xtype:'textfield',
fieldLabel: '网站',
name: 'torrentQuery.siteName',
hiddenName:'torrentQuery.siteName',
anchor:'100%',
allowBlank:true
}]
},{
columnWidth:.25,
layout: 'form',
labelWidth:80,
border:false,
items: [
{
id:'detectedTimeStart',
xtype:'datefield',
fieldLabel: '发现时间从',
name: 'torrentQuery.detectedTimeStart',
hiddenName: 'torrentQuery.detectedTimeStart',
readOnly:true, // 设置为只读
maxValue:new Date(), // 设置最大值
format:'Y-m-d',
anchor:'98%',
value:'',
allowBlank:true
}]
},{
columnWidth:.15,
layout: 'form',
border:false,
labelWidth:10,
labelSeparator:" ",
items: [
{
id:'detectedTimeEnd',
xtype:'datefield',
fieldLabel: '到',
name: 'torrentQuery.detectedTimeEnd',
hiddenName:'torrentQuery.detectedTimeEnd',
readOnly:true,
maxValue:new Date(),
format:'Y-m-d',
anchor:'100%',
allowBlank:true
}]
} ,{
columnWidth:.3,
layout:'form',
border:false,
items:[checkStateCombo]
},{
columnWidth:.2,
layout: 'form',
border:false,
labelWidth:70,
labelSeparator:":",
items: [orderCombo]
},{
columnWidth:.1,
layout: 'form',
border:false,
labelWidth:10,
labelSeparator:" ",
items: [sortCombo]
},{
columnWidth:.2,
layout: 'form',
border:false,
labelWidth:80,
items:[{
xtype: 'radiogroup',
fieldLabel: 'SELECT',
// 单选框
items: [
{boxLabel: 'B',name:'torrentQuery.B', inputValue: 0},
{boxLabel: 'E', name:'torrentQuery.E',inputValue: 1}
]
}]
},{
columnWidth:.04,
layout: 'form',
border:false
},{
layout:'form',
columnWidth:.09,
border:false,
items:[{
xtype:'button',
text:' 检索 ',
cls:'w-btn',
handler: list
}]
},{
layout:'form',
columnWidth:.07,
border:false,
items:[{
xtype:'button',
text:' 重置 ',
cls:'w-btn',
handler: function(){conditionForm.form.reset();}
}]
}]
}]
});
}
// 绘制列表
function list(){
// 表单验证检查
if(!queryForm..form.isValid()){
Ext.Msg.alert('提示信息', '表单数据格式有误，请检查后重新查询。');
return;
}
if(queryForm.form.findField('torrentQuery.detectedTimeStart').getValue()!='' && queryForm.form.findField('torrentQuery.detectedTimeEnd').getValue()!=''){
if(queryForm.form.findField('torrentQuery.detectedTimeStart').getValue().getTime() > query.form.findField('torrentQuery.detectedTimeEnd').getValue().getTime()){
Ext.Msg.alert("提示信息","发现时间的起始时间大于结束时间，请重新输入！");
return;
}
}
// 构造数据源
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'${ctx}/torrent/manage!list.action'}),
// 向action层传递参数,Ext提供的工具可以方便的将form中的值组装成json对象传到后台
baseParams:Ext.decode(Ext.encode(queryForm.form.getValues())),
method: 'post',
reader:new Ext.data.JsonReader(
{ root:'result',
id:'id',
totalProperty: 'totalCount'
},
[
{name:"id"}, // 当name与返回数据的的JSON串的Element一致时，无须使用mapping属性,默认类型为string
{name:"name"},
{name:"siteName"},
{name:"downloadNum",type:"int"}, //对于需要排序的数据，需要加上type属性指定具体数据类型
{name:"siteId"},
{name:"btEmule"}
]
)});
// 构造多选框
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex: 'id',
width: 20
});
// 构造列表的显示项
var cm = new Ext.grid.ColumnModel([
sm,
{
header:"名称",
width:160,
dataIndex:"name",
align:"left"
//renderer:addTooltip // 可以将结果重新绘制，传入6个参数，详细参考api
},
{
header:"网站",
width:60,
dataIndex:"siteName",
//renderer:addUnderline,
align:"left"
}, {
header:"下载次数",
width:40,
sortable:true,
dataIndex:"downloadNum",
align:"center"
},{
header:"详情",
width:40,
dataIndex:"id",
align:"center",
renderer:detailStyle
} ]);
paintGrid(ds,cm,sm);
}
// 绘制表格或称为组装
function paintGrid(ds,cm,sm){
// 清空容器
Ext.get('mainDiv').dom.innerHTML="";
grid = new Ext.grid.GridPanel({
id:'resultGrid',
el:'mainDiv', // 已存在的元素,与centerPanel对应同一容器，这样这个grid就会被绘制到centerPanel中去。
autoScroll:true,
header: false,
store: ds,
cm: cm,
sm: sm,
height: document.body.clientHeight - 63,
width: document.body.clientWidth,
border: false,
monitorResize:true,
enableColumnHide:false, // 不允许隐藏列，用于避免列表的监听事件错位
enableColumnMove:false, // 不允许移到列
trackMouseOver:false, //鼠标滑动变色 默认false
loadMask: true, // 加载时显示遮罩
listeners:{cellclick:renderPage}, // 添加监听事件
viewConfig: {
forceFit: true, // 自动计算列宽以适应当前panel大小
columnsText:'选择列', // 默认为英文
sortAscText:'正序排列',
sortDescText:'倒序排列'
},
bbar: new Ext.PagingToolbar({ // 分页信息显示
pageSize: 15,
store: ds,
displayInfo: true,
displayMsg: '显示第{0} - {1}条记录，总共{2}条记录，共{3}页', // 这里的信息重写了，原实现只有三个占位符，根据需要来定
emptyMsg: "没有结果显示",
items:[{
xtype:'button',
text:'导出查询结果',
iconCls: 'addmenu', // 自定义图标样式
handler: exportResult // 自定义执行动作
},'-'
]
})
});
grid.render();
ds.load({params:{start:0, limit:15}}); // 加载数据
}
// 鼠标点击触发事件
function renderPage(grid, rowIndex, columnIndex, e){
var id = grid.getStore().getAt(rowIndex).data['id'];
switch(columnIndex){
case 12: detail(id); break;
case 13: alert('其它操作…'); break;
……
default: break;
}
}
</script>
顺便加一句:
formPanel里的Combo控件有一个bug，当id与hiddenName同时存在的时候，下拉框的位置会不对，用的时候只需要写入name和hiddenName就行了，hiddenName必须保留，因为在baseForm.getValue的时候，读的是这个属性。
扫一扫
1267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
