0

これは 2 部構成の質問です。

主な質問: ストアからプルするコンボボックス (以下のコード) があるとします。特定の値のみが実際にドロップダウンに表示されるように、データをフィルター処理する配列があるとします。それを行うパラメータが見つからないようです...これを行う簡単な方法はありますか?

二次的な質問: ドロップダウンが作成された後のユーザーのアクションに基づいて、ドロップダウン内のアイテムを無効にしたり再度有効にしたりできるようにする必要もあります。ドロップダウン内でアイテムを再度有効/無効にする機能はありますか?

注: 無効とは、dom で削除された「存在しない」ことを意味しますが、フィルタリングされていないストアにはまだ存在します。

{
  xtype: 'combobox',
  anchor: '100%',
  name: 'Permission_id',
  fieldLabel: 'Permissions',
  hideLabel: false,
  displayField: 'Name',
  forceSelection: true,
  store: 'PermissionStore',
  typeAhead: true,
  valueField: 'id',
  valueNotFoundText: 'Add Permission'
}
4

2 に答える 2

0

必要なのはフィルターを操作することだけだと思います。ドロップダウンに特定の値のみを表示したい場合は、ストアをフィルタリングするだけで済みます。配列があれば、ArrayStore を使用できます。

2 番目の質問については、ストアをフィルターしても元の値は失われず、スナップショットとして内部的に保存され、フィルターをクリアすると古い値がドロップドンリストに再び表示されます。

この実際の例を見てください: http://jsfiddle.net/lontivero/Mz6S4/1/

最初の答え: 方法は です。フィルター()。例えば：

var store = Ext.create('Ext.data.ArrayStore', {
    fields: ['Id', 'Name'],    
    data: [
        [ 1, 'Lucas' ],
        [ 2, 'Pablo' ],
        [ 3, 'Francisco' ]
    ]
});


Ext.create('Ext.form.field.ComboBox', {
    fieldLabel: 'Permissions',
    displayField: 'Name',
    store: store,
    valueField: 'Id',
    renderTo: Ext.getBody()
});

//Hide Pablo in the dropdownlist
store.filter([
    {filterFn: function(record) { return record.get('Name') !== 'Pablo'; }}
]);

// uncomment this to reenable hidden records (to display Pablo again)
//store.clearFilter();

2 番目の答え: ストアのフィルターをクリアする

于 2012-11-29T03:24:02.613 に答える
0

lontiveroが言ったように、フィルターはあなたの問題を解決します：

primary : 配列にはデータを含めることができますが、フィルターはドロップダウンから非表示にします

secondary : フィルターを変更して、ドロップダウンで表示と非表示を切り替えることができます

残りの問題は、Ext 以外のコードからフィルターを変更する方法です。ここでは、Ext は単なる JavaScript であり、Ext とは関係のない他の JavaScript から呼び出すことができるという事実を利用できます。

そう：

  1. HTML DOM からアクセス可能な場所/スコープに、追加および削除するフィルターを適用するいくつかの関数を追加します。
  2. onclick(プレーン HTML) ボタンのハンドラーにそれらを追加します。

秘訣は、ID による Ext ルックアップを使用してストアにアクセスすることです。

したがって、次のコード (lontivero の jsfiddle を拡張) が js ファイル (またはスクリプト タグ) に直接含まれている場合は、要求どおりに動作します。

(jsfiddle: http://jsfiddle.net/mCv6A/ )

// functions that do the filtering
var noPablo = function(record) { return record.get('Name') !== 'Pablo' }
var noJames = function(record) { return record.get('Name') !== 'James' }

// the combination of functions we'll use
var withoutJamesFilter = [{ filterFn: noPablo }, { filterFn: noJames }]
var withJamesFilter = [{ filterFn: noPablo }]

function addJames()
{
    var store = Ext.getStore('people')
    store.clearFilter()
    store.filter(withJamesFilter)
}

function delJames()
{
    var store = Ext.getStore('people')
    store.clearFilter()
    store.filter(withoutJamesFilter)
}

Ext.onReady(function()
{
    var store = Ext.create('Ext.data.ArrayStore', {
        id: 'people',
        fields: ['Id', 'Name'],    
        data: [
            [ 1, 'Lucas' ],
            [ 2, 'Pablo' ],
            [ 3, 'Francisco' ],
            [ 4 , 'James' ]
        ]
    })

    Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Permissions',
        displayField: 'Name',
        store: store,
        valueField: 'Id',
        renderTo: Ext.getBody()
    })

    // start without james in list
    store.filter(withoutJamesFilter)
})

(単純化された例ではなく) 実際に使用する際の考慮事項:

  • ラッピングaddJames、delJamesおよびそれらがオブジェクトまたは即時関数で使用する変数 (noPabloなどnoJames) を使用して、変数がグローバル (ウィンドウ) スコープを乱雑にしないようにする
  • フィルター変数を書き直して、実装をより適切に共有します (名前のリストを取得してフィルター配列を生成する関数や、それらの名前をフィルター処理するフィルター関数のようなものが賢明です)。
于 2013-03-19T23:26:16.503 に答える