ExtJs4.0之multiselect应用

 

项目中有一个需求要实现一个组件，功能大概是在一个输入框中输入一条数据，点击添加按钮，该条数据会添加到下面一个“输入框”中，选择该输入框中的数据点击“删除”按钮，该条数据被删除，如下图所示。

 

由于视图层采用了ExtJs4.0，查了半天API文档才找到解决方法，采用Ext的multiselect组件可以实现此需求。

主要代码如下：

首先定义前置条件下拉框store：

//定义前置条件添加框    var conditionsClection = Ext.create('Ext.data.Store',{       fields:['value','displayName'],       data:[]               });

 

其次实现在点击条件按钮的时候给下拉框store中添加一条数据：

function addCondition() {       // 取得输入框内容       var str = Ext.getCmp('condition').getValue();           conditionsClection.add({           displayName:str,           value:str       });       Ext.getCmp('condition').setValue('');    }

 

最后还要实现点击删除按钮时从store中删除一条记录

function removeCondition(){        var conditionStoreItems =  conditionsClection.data.items;        var index = 0;         var selectedStoreValue = Ext.getCmp('article_form').getForm()              .findField('expertArticleCondition').boundList.getSelectionModel()              .getLastSelected().data.value;            var storeLenth = conditionStoreItems.length;       for (var i = 0; i < storeLenth; i++) {           if (conditionStoreItems[i].data.value == selectedStoreValue) {              index = i;              break;           }       }       var removeRecord = conditionStoreItems[index];       //if (index > 0) {           conditionsClection.remove(conditionStoreItems[index]);           conditionsClection.load();           //conditionsClection.insert(index - 1, removeRecord.data);               //}    }

 

其中'expertArticleCondition'为multiselect输入框的id