3

私は に 2 を持ってMultiSelectsいItemSelectorますFormPanel。それぞれMultiSelectが 2 で構成されていStoresます: 左側と右側 (2 つの間で項目を移動するための矢印付き)。

パネルをロードするとき、現在はそれらを区別する方法がないため、ある側から別の側に移動したアイテムを強調表示するために参照をフィードします (たとえば、移動したアイテムのスタイルを赤に設定します)。

でイベントをキャッチafterAddし、StoresDOM アクセスを介してスタイルを適用することができました。これはトレース中に機能しますが、後で残りの ExtJS 標準呼び出しが実行され、適用したばかりのスタイルがオーバーライドされます...

私がやっていることは良い方法ではないと感じていますが、ExtJS は初めてなので、ここで少し迷っています...助けてくれてありがとう!

EDIT :これが私のコードのサンプルです。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

Ext 4.2 の場合

これは、選択したレコードに色を付けるフィドルです。（使用するには、いくつかのアイテムを選択して「赤」を押します..）イベントの追加とキャッチは、選択したアイテムの色付けだけではありません。これが問題の部分であることを理解しています。

基本的に、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 の場合

これがフィドルです。@VDP が述べたように、Ext 3.2 は複数選択に ListView を使用し、tpl 構成を取得できます (templatecolumn は実際にはリストビューでは使用できず、グリッドのみで使用できます)

ただし、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>'
    )
}

残りは同じです。アミットのソリューションも同様に優れています;）

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 に答える