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中找到

1 <link rel="stylesheet" type="text/css" href="./css/MultiSelect.css" />

2 ......

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

4 

5 <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.感谢阅贴。