0

チェックボックスと条件付きエントリを備えたきれいなコンボボックスを構築しています。実装方法がわからない 2 つの機能を除いて、すべて問題なく動作します。

1) ラベルをコンボボックス内に移動し、値を右にシフトさせ、わずかに灰色で表示したいと考えています。

2) 選択した特定のエントリ (グループ ヘッダー) を無視する値が欲しい。これらのエントリは、他のエントリのグループを選択/選択解除するための機能のためだけにあります。

プロジェクト全体が zip ファイルに含まれています。サーバーは必要ありません。これはクライアント ベースのアプリです。アーカイブをダウンロードして解凍し、ブラウザで app.html を起動するだけです。

http://filesave.me/file/30586/project-zip.html

そして、これが私が達成したいことのスナップショットです。

ここに画像の説明を入力

4

1 に答える 1

2

2番目の問題に関しては、コンボボックスをオーバーライドして、不要onListSelectionChangeな値をフィルタリングするのが最善の方法です。

onListSelectionChange: function(list, selectedRecords) {
    //Add the following line
    selectedRecords = Ext.Array.filter(selectedRecords, function(rec){
        return rec.data.parent!=0;
    });
    //Original code unchanged from here
    var me = this,
        isMulti = me.multiSelect,
        hasRecords = selectedRecords.length > 0;
    // Only react to selection if it is not called from setValue, and if our list is
    // expanded (ignores changes to the selection model triggered elsewhere)
    if (!me.ignoreSelection && me.isExpanded) {
        if (!isMulti) {
            Ext.defer(me.collapse, 1, me);
        }
        /*
         * Only set the value here if we're in multi selection mode or we have
         * a selection. Otherwise setValue will be called with an empty value
         * which will cause the change event to fire twice.
         */
        if (isMulti || hasRecords) {
            me.setValue(selectedRecords, false);
        }
        if (hasRecords) {
            me.fireEvent('select', me, selectedRecords);
        }
        me.inputEl.focus();
    }
},

そして、コンボのnot toonBoundlistItemClick内のアイテムのみを選択および選択解除するように変更します。boundlistsetValue

onBoundlistItemClick: function(dataview, record, item, index, e, eOpts) {
    var chk = item.className.toString().indexOf('x-boundlist-selected') == -1;

    if ( ! record.data.parent) {    
        var d = dataview.dataSource.data.items;
        for (var i in d) {
            var s = d[i].data;
            if (s.parent == record.data.id) {
                if (chk) { // select
                     dataview.getSelectionModel().select(d[i],true);
                } else { // deselect
                     dataview.getSelectionModel().deselect(d[i]);
                }
            }
        }
    }
},

最初の問題に関しては、displayTpl 構成オプションを使用してラベルを簡単に追加できます。ただし、これは必要なテキストのみを追加し、スタイル (灰色など) はありません。コンボは、html タグを受け入れないテキスト入力を使用しています。ユーザーがテキストを入力する必要がない場合は、コンボの基本的な動作を変更して、テキスト入力の代わりに別の要素を使用することをお勧めします。

于 2013-06-08T00:03:04.993 に答える