项目用到EXTJS,开始一直用的是JQuery,所以对EXTJS有点陌生。通过几天的时间终于算是摸到点门路了,这只是我的一些笔记,为了帮助自己记忆写的东西。
下面写写panelForm和combobox的用法:
1、先看看panelForm
var searchForm = new Ext.FormPanel({
frame : true,
labelAlign : 'right',
layout : "form",
labelWidth : 80,
border : false,
items : [{
layout : 'column',
border : false,
baseCls : 'x-plain',
items : [{
columnWidth : .25,
layout : 'form',
baseCls : 'x-plain',
border : false,
defaultType : 'textfield',
labelWidth : 100,
defaults : {
anchor : '93%'
},
items : [{
fieldLabel : '任务名称',
id : 'qtaskNameId',
name : 'qtaskName'
},{
fieldLabel : '要求完成时间',
id : 'taskLimitTimeId',
hiddenName : 'taskLimitTime',
xtype : 'datefield',
format : 'Y-m-d',
altFormats : 'Y-m-d',
maxLength : 50
},{
fieldLabel : '创建时间',
id : 'creationTimeId',
hiddenName : 'creationTime',
xtype : 'datefield',
format : 'Y-m-d',
altFormats : 'Y-m-d',
maxLength : 50
}]
}, {
columnWidth : .23,
layout : 'form',
border : false,
baseCls : 'x-plain',
labelWidth : 60,
defaultType : 'textfield',
defaults : {
anchor : '93%'
},
items : [
{
xtype : 'combo',
fieldLabel : '任务来源',
id : 'qtaskSourceId',
hiddenName : 'qtaskSource',
valueField : 'dicValue',
displayField : 'dicCnMsg',
mode : 'remote',
loadingText : '加载中...',
store : taskSourceStore,
selectOnFocus : true,
editable : false,
triggerAction : 'all',
maxLength : 40
},
{
fieldLabel : '到',
id : 'taskLimitTimeToId',
hiddenName : 'taskLimitTimeTo',
xtype : 'datefield',
format : 'Y-m-d',
altFormats : 'Y-m-d',
maxLength : 50
},
{
fieldLabel : '到',
id : 'creationTimeToId',
hiddenName : 'creationTimeTo',
xtype : 'datefield',
format : 'Y-m-d',
altFormats : 'Y-m-d',
maxLength : 50
}]
},{
columnWidth : '.1',
text : "查询",
layout : "form",
defaultType : "button",
items : [{
text : '查询',
handler : function() {
taskName = Ext.getDom("qtaskNameId").value;
taskSource = Ext.getDom("qtaskSourceId").value;
taskLimitTime = Ext.getDom("taskLimitTimeId").value;
taskLimitTimeToId = Ext.getDom("taskLimitTimeToId").value;
creationTime = Ext.getDom("creationTimeId").value;
creationTimeTo = Ext.getDom("creationTimeToId").value;
//alert(taskName+','+taskSource+','+taskLimitTime+','+taskLimitTimeToId+','+creationTime+','+creationTimeTo);
// 加载数据
queryStore.load({
params : {
start : 0,
limit : 10,
taskName : taskName,
taskSource : taskSource,
taskLimitTime : taskLimitTime,
taskLimitTimeTo : taskLimitTimeTo,
creationTime : creationTime,
creationTimeTo : creationTimeTo
}
});
//grid.getStore().reload();
}
}]
}]
}]
});
这是一个查询Form,里面的一些参数是什么意思就不用多说了,网上到处都是。个人觉得formPanel比较麻烦点的就是他的布局问题,开始一直把握不好究竟用哪种布局方式,在网上搜索了一大堆的资料,基本上解决了问题。这方面我也是初学,还向各位JE的大虾请教。
2、combobox
先贴点代码:
items : [
{
xtype : 'combo',
fieldLabel : '任务来源',
id : 'qtaskSourceId',
hiddenName : 'qtaskSource',
valueField : 'dicValue',
displayField : 'dicCnMsg',
mode : 'remote',
loadingText : '加载中...',
store : taskSourceStore,
selectOnFocus : true,
editable : false,
triggerAction : 'all',
maxLength : 40
}
combobox开始的时候也难到我了,一直搞不对它的store,所以一直取不到数据,因为store的数据是从数据字典里面取出来的,所以,先得搞清楚究竟它是怎样同后台交互的,要注意的是combobox现实的数据和其真实的值要搞清楚,valueField 是真实值,displayField 是显示值及我们实际看见的值,而前者是从数据库中取出的实际值。
下面store:
var taskSourceStore = new Ext.data.Store({
autoLoad : true,
proxy : new Ext.data.HttpProxy({
url : 'findDic.do?type=TASK_SOURCE'
}),
reader : new Ext.data.JsonReader({
root : 'root'
}, [{
name : 'dicValue',
type : 'string'
}, {
name : 'dicCnMsg',
type : 'string'
}])
});
EXT很多东西都已经给我们封装好的,而且开发出来的界面确实也不错,开发模式也感觉有点OO,只是个人看法,如果有什么说错的地方请JE的朋友帮忙指正。