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中删除一条