ExtJs4.0之multiselect应用

最新推荐文章于 2020-12-24 05:26:04 发布

原创

最新推荐文章于 2020-12-24 05:26:04 发布 · 5.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #function #文档 #api #ext

本文档介绍如何使用ExtJs4.0的multiselect组件来实现一个功能：用户在输入框中输入数据，点击添加按钮将数据添加到一个多选框中，从多选框中选择数据并点击删除按钮，数据会被移除。主要涉及添加和删除数据到store的操作。

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

由于视图层采用了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 =  cond

最低0.47元/天解锁文章