extjs中使用ItemSelector 控件(從左邊選到右邊)

　　最近在項目中需要使用到從左邊選到右邊的那種控件，在window中見過，不知道叫啥名字，后來知道了這種控件叫做ItemSelector控件（效果如下圖)。

公司使用的是ext 3.4 ,在api中目前還找不到Itemselector的文檔，后來在官方的examples中找到一個，需要利用到ux包中的擴展類來實現。

在這里分享一下給大家。

　　　1.首先需要引入兩個js文件、一個css樣式表，分別是:

　　　　MultiSelect.js、ItemSelector.js、MultiSelect.css

　　　　js文件可以在官方包中的examples\ux\form下面找到，css文件在examples\ux\css中找到

<link rel="stylesheet" type="text/css" href="./css/MultiSelect.css" />
......
<script type="text/javascript" src="./inc/ux/ItemSelector.js"></script>

<script type="text/javascript" src="./inc/ux/MultiSelect.js"></script>

 

 　　　2.Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field,  {..)}

　　　　ItemSelector其實是繼承自field，這樣我們就可以將其放入formPanel中:

　　　　

                 /*未分配的條目*/
 		 var ds_from = new Ext.data.ArrayStore({
			   	url:'./'+ORD_BARGAINDISTRIBUTE,
			   	baseParams:{action:'aviliable',bizId:business_id},
				pruneModifiedRecords : true,
		        fields: [{name:'value'},{name:'text'}]
	    	});
	    
	        /*已分配的條目*/	
	   	 var ds_to = new Ext.data.ArrayStore({
	   	 	 	url:'./'+ORD_BARGAINDISTRIBUTE,
	   	 	 	baseParams:{action:'fenpei',bizId:business_id},
				pruneModifiedRecords : true,
		        fields: [{name:'value'},{name:'text'}]
	   	 });
    
	        ds_from.load();
		ds_to.load();



......
               　　　　　　　　　　　　new Ext.form.FormPanel({
						region:'center',
						id:'selector_form',
						width:350,
						bodyStyle:'padding:10px',
						items:[{　　　　　　　　　　　　　　　　　　　　　　　　
							xtype:'itemselector',　　　　　　//設置此field類型為field
							name:'itemselector',
							hideLabel:true,                //隱藏標簽
							imagePath: './images',　　　　　 //配置方向圖標的文件夾位置
					        multiselects: [{　　　　　　　　　　　　　　　//待選擇框
					               　　 width: 150,　　
					               　　 height: 260,
					              　　  legend:'可選條目',
					               　　 store: ds_from,　　　　　　　　//待選擇資源的結果集
					               　　 displayField: 'text',　　　　 //顯示的字段
					               　　 valueField: 'value'　　　　　 //值字段
			          			},
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　{　　　　　　　　　　　　　　　　　　 //已選擇框
					               　　 width: 150,
					               　　 height: 260,
					               　　 hideLabel:true,
					                　　legend:'已選條目',
					               　　 store:ds_to,
					                　　displayField: 'text',　　　　//顯示的字段
					                　　valueField: 'value',        //值字段
					                　　tbar:[{
					                    text: '清空',
					                    iconCls:'remove',
					                    handler:function(b,e){
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//用reset重置已選擇的項
						                    Ext.getCmp('selector_form').getForm().findField('itemselector').reset();
						                }
					             　　　　}]
			            　　　　　　　　　　}]
						}]
					})

　　　　　3.取值。

　　

	var select_values  = Ext.getCmp('selector_form').getForm().getValues(true);  //獲取已選擇的值  

　　　　取出來的值會包含空格以及一些無用的文字開頭，這時候就需要我們自己處理格式化取出來的值了。

　　　　4.感謝閱貼。