extJS-itemselector的使用

 

 
 

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

 

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: '班型-模块列表选择',   
        //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]   
});