3

我有 2MultiSelects在一个ItemSelector，它本身在一个FormPanel。每个MultiSelect由 2 组成Stores：左侧和右侧（用箭头在 2 之间移动项目）。

当我加载面板时，我提供了一个参考，以突出显示从一侧移动到另一侧的项目（例如，将移动项目的样式设置为红色），因为今天没有办法区分它们。

我设法通过 DOM 访问捕获事件afterAdd并Stores应用我的样式。这在跟踪期间有效，但稍后会执行剩余的 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();
        }
    }
});
4

2 回答 2

4

对于分机 4.2

这是一个为您选择的记录着色的小提琴。（要使用它，请选择一些项目并按“红色”..）它不负责添加和捕获事件，只处理所选项目的着色，因为我知道这对你来说是有问题的部分。

基本上我向 multiSelection 添加了一个 listConfig，它将它传输到它的 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);
}

请注意，我让它变得非常透明，因此选择和悬停颜色仍然很明显。

对于分机 3.2

这是小提琴。正如@VDP 提到的，Ext 3.2 使用 ListView 进行多选，可以获得一个 tpl 配置（templatecolumn 实际上不适用于 listview，仅用于网格）

然而 MultiSelect 并没有暴露这个配置，所以我们必须重写 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 中的几乎相同

于 2013-05-16T20:18:48.687 回答
3

当你想要标记它时，我并不清楚。

我要做的是在fromField和/或的商店上附加一个监听器toField

假设我们想要从 toField 中删除的所有项目，标记为：

// somewhere after setupItems (that's where the lists got created)

itemSelector.toField.store.on('remove', itemSelector.onRemoveItem);
onRemoveItem = function(record){
    record.set('removed', true);
}

// on the 'Ext.view.BoundList' of the fromField I would change my itemTpl and
// check if removed is true in the template. If so, add a class

// refresh the list

这不是一个现成的解决方案，但也许这会让你走上正轨......

更新：

@Amit Aviv 刚刚详细写了我的意思是“更改”itemTpl 以添加一个类

我的想法是这样的：

listConfig: {
    itemTpl: new Ext.XTemplate(
        '<tpl if="removed==true">',
            '<div class="my-boundlist-item removed">{value}</div>',
        '<tpl else>',
            '<div class="my-boundlist-item">{value}</div>',
        '</tpl>'
    )
}

其余的都是一样的。Amit 的解决方案同样出色 ;)

在 Ext 3 和 itemselector 中包含 2 Ext.ux.form.MultiSelect。MultiSelect 有一个 Ext.ListView，而在 Ext 4 中它使用一个 BoundList。这个 ListView 非常类似于网格。

它没有 itemTpl，但它有列。您可以覆盖 MultiSelect 的 onRender，以便在 ListView 中插入您自己的列。这是要修改的部分：

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

可以是这样的：

this.view = new Ext.ListView({
    multiSelect: true,
    store: this.store,
    columns: [{ xtype: 'templatecolumn',
        header: 'Value',
        width: 1,
        tpl: new Ext.XTemplate(
            '<tpl if="removed==true">',
                '<div class="removed">{' + this.displayField + '}</div>',
            '<tpl else>',
                '<div>{' + this.displayField + '}</div>',
            '</tpl>'
        )
    }],
    hideHeaders: true
});

或者你可以在渲染后修改它......你的选择:)

于 2013-05-16T13:17:55.457 回答