上图是富客户端界面中常用的选择方式,下面是项目中的一段示例代码,仅供初学者参考:
Js代码
var _smsTemplateToStore = new Ext.data.Store({
id:"_smsTemplateToStore",
proxy : new Ext.data.HttpProxy({url:"modelSelectedData.jsp"}),
reader: new Ext.data.JsonReader({
totalProperty:"totalProperty",
root:"root"},
[
{name:"code"},
{name:"desc"}
]
)
});
var _smsTemplateFromStore = new Ext.data.Store({
id:"_smsTemplateToStore",
proxy : new Ext.data.HttpProxy({url:"moduleUnSelectedData.jsp"}),
reader: new Ext.data.JsonReader({
totalProperty:"totalProperty",
root:"root"},
[
{name:"code"},
{name:"desc"}
)
});
var _toolbarStudyClassTypeNodes = new Ext.Toolbar({
items:[ {
text:"保存",
pressed : true,
iconCls : 'icon-table-save',
handler:function(){
saveRelation();
}
}]
});
var isForm = new Ext.form.FormPanel({
title: '班型-模块列表选择',
// bodyWidth-180,
height: 340,
bodyStyle: 'padding:5px;',
tbar:_toolbarStudyClassTypeNodes,
items:[{
xtype:"itemselector",
name:"itemselector",
fieldLabel:"信息",
//labelWidth:1,
dataFields:["code", "desc"],
toData:[],
msWidth:220,
msHeight:260,
valueField:"code",
displayField:"desc",
imagePath:"../images/",
toLegend:"已选择",
fromLegend:"待选择",
fromData:[],
fromStore:_smsTemplateFromStore,
toStore:_smsTemplateToStore
}]
});
var _panelStudyClassTypeNodes = new Ext.Panel({
collapsible:true,
bodyWidth-180,
height:350,
autoScroll:true,
items:[isForm]
});