javascript – ExtJS – 区分MultiSelect中的项目

我在ItemSelector中有2个MultiSelects,它本身在FormPanel中.每个MultiSelect由2个商店组成：左侧和右侧(带箭头以在2之间移动项目).

当我加载面板时,我提供一个参考,以突出显示从一侧移动到另一侧的项目(例如,将设置的样式设置为红色以移动项目),因为今天无法区分它们.

我设法在商店后添加事件并通过DOM访问应用我的风格.这在跟踪期间有效,但稍后会执行剩余的ExtJS标准调用,覆盖我刚刚应用的样式…

我觉得我所做的并不是好方法,但我是ExtJS的新手所以我在这里有点失落…感谢您的帮助！

编辑：这是我的代码示例,我忘了告诉我我在ExtJS 3.2上工作(哼……). pool_cnx_to_rule是我的FormPanel：

pool_cnx_to_rule.afterMethod('add', function ()
{
    //var pools_available_ = Ext.getCmp('pools_available').getValue();
    var pools_selected_ = Ext.getCmp('pools_selected').getValue();
    var i, j;
    for (i = 0; i < pool_cnx_to_rule.data.length; ++i)
    {
        var pool_descr_ = pool_cnx_to_rule.data.items[i].data.pool_descr;
        var changed = true;
        for (j = 0; j < pool_cnx_to_rule_ref.length; ++j)
        {
            if (pool_cnx_to_rule_ref[j] == pool_descr_)
            {
                changed = false;
                break;
            }
        }
        if (changed)
        {
            var pools_selected_ = Ext.getCmp('pools_selected');
            var nodes_ = pools_selected_.view.getNodes();
            var node_ = nodes_[j];
            var record_ = pools_selected_.view.getRecord(node_);
            record_.set('color', 'red');
            // Instead of assigning pools_selected_.view, create var
            var view_ = new Ext.ListView({
                multiSelect: true,
                store: pools_selected_.store,
                columns: [{
                    dataIndex: pools_selected_.displayField,
                    header: 'Value',
                    width: 1,
                    tpl: new Ext.XTemplate(
                        '<tpl if="red==true">',
                        '<div class="red">{' + pools_selected_.displayField + '}</div>',
                        '<tpl else>',
                        '<div>{' + this.displayField + '}</div>',
                        '</tpl>'
                        ),
                }],
                hideHeaders: true
            });
            pools_selected_.fs.items.clear();
            pools_selected_.fs.add(view_);
            pools_selected_.fs.doLayout();
        }
    }
});

解决方法:

对于Ext 4.2

Here是一个小提琴,可以为您选择的记录着色. (要使用它,选择一些项目并按’红色’..)
它没有注意添加和捕捉事件只有所选项目的颜色,因为我知道这是你的问题部分.

基本上我添加了一个listConfig到multiSelection,它将它传递给它的boundList：

listConfig: {
    itemTpl: '<div class="my-boundlist-item {color}">{numberName}</div>',
}

模板从多选商店获取它的值,因此我们可以为我们想要的记录设置“颜色”字段：

myRecord.set('color', 'red');

通过这样做,我们设置的项目现在将具有“红色”类.最后一件事是为该类添加css：

.red {
    background-color: rgba(255,0,0,0.2);
}

请注意,我使它非常透明,因此选择和悬停颜色仍然会很明显.

对于Ext 3.2

Here是小提琴.正如@VDP所提到的,Ext 3.2使用ListView进行多选,它可以获得tpl配置(templatecolumn实际上不适用于listview,仅适用于网格)

但是MultiSelect不公开这个配置,所以我们必须覆盖多选的onRender,这是有趣的部分：

Ext.ux.form.ConfigurableMultiSelect = Ext.extend(Ext.ux.form.MultiSelect,  {
    listItemTpl: null,

    onRender: function(ct, position){
        ...
        var listItemTpl = this.listItemTpl || '<div>{'+this.displayField+'}</div>';

        this.view = new Ext.ListView({
            multiSelect: true,
            store: this.store,
            columns: [{  
                dataIndex: this.displayField,
                header: 'Value',
                width: 1,
                tpl: listItemTpl
            }],
            hideHeaders: true
        });
        ...

现在我们可以使用扩展类将listItemTpl配置传递给视图：

items: [{
    xtype: 'confmultiselect', //the new xtype we registered
    fieldLabel: 'Multiselect',
    name: 'multiselect',
    id: 'multiselect-field',
    allowBlank: false,
    displayField: 'text',
    store: store,
    listItemTpl: '<div class="inner-boundlist-item {color}">{text}</div>',
}],

其余部分与Ext 4.2中的几乎相同

javascript – ExtJS – 区分MultiSelect中的项目

相关推荐