你的位置:首页 > Java教程

[Java教程]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.感谢阅贴。