extJS-itemselector的使用

 

上图是富客户端界面中常用的选择方式，下面是项目中的一段示例代码，仅供初学者参考：

 

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: '班型-模块列表选择',
        //width: 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,
    width:bodyWidth-180,
    height:350,    	
    autoScroll:true,
    	
    items:[isForm]
});