12

ListFilter プラグインを使用して、Grid パネルで結果をフィルタリングしています。列の定義は .

{
    header: 'Provider',
    filter: {
        type: 'list',
        store: Ext.getStore('MyApp.store.Provider'),
        dataIndex: 'provider_id',
        labelField: 'name'
    }
}

MyApp.store.Providerとして作成されます

   Ext.create('Ext.data.Store', {
        storeId: 'MyApp.store.Provider',
        autoDestroy: true,
        autoLoad: {start: 0, limit: 50},
        autoSync: true,
        model: 'MyApp.model.Provider',
        pageSize: 50,
        proxy: {
            type: 'ajax',
            api: {
                create:  'proxy/provider/create',
                read:    'proxy/provider/read',
                update:  'proxy/provider/update',
                destroy: 'proxy/provider/destroy'
            },
            reader: {
                type: 'json',
                root: 'data',
                successProperty: 'success',
                messageProperty: 'message',
                totalProperty: 'total'
            },
            writer: {
                allowSingle: false,
                type: 'json',
                writeAllFields: false,
                root: 'data'
            }
        }
    });

そして最後にモデルMyApp.model.Providerは次のように定義されます

Ext.define('MyApp.model.Provider', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'provider_id', type: 'int'},
        'name',
        { name: 'create_time', type: 'date', dateFormat: appDateFormat },
        { name: 'status', type: 'int'}
    ],
    idProperty: 'provider_id',
    displayProperty: 'name' // A custom property used for dynamically use the property to display
})

これで、このコードはフィルター メニューにサブメニューを表示しなくなりました。読み込み中を示しているだけです。画像を参照してください。

ローディングを表示

アップデート

次のフィルター構成を使用して解決しました。これは実際にはoptions構成を手動で入力します。したがって、ここでは nostoreが使用されます。

{
  type: 'list',
  labelField: 'name',
  options: (function () {
    var opts = [];
    fS.load(function (records, operation, success) {
      for (var i = 0; i < records.length; i++) {
        var ar = {
          id: records[i].get('provider_id'),
          name: records[i].get('name')
        };

        opts.push(ar);
      }
    });
    return opts;
  })(),
  single: true
}

「id」はハードコーディングされているようです。id: records[i].get('provider_id'),よく見えません。それは機能しますが。

しかし、私はまだそれを行う適切な方法を探しています。

注:予想される動作は で確認できますExtJS 4.1.1。このjsfiddleを参照してください。再現させていただきました。しかし、これとまったく同じことが機能しませんExtJS 4.0.7

4

1 に答える 1

8

私はこれを自分で試していませんが、デフォルトでに設定されているidField プロパティ[ ExtJS4.1.3の新機能]を使用してIDを手動で設定する必要がありますid。だから私はこれがうまくいくと思います：

{
    header: 'Provider',
    filter: {
        type: 'list',
        idField: 'provider_id',
        store: Ext.getStore('MyApp.store.Provider'),
        dataIndex: 'provider_id',
        labelField: 'name'
    }
}

アップデート

OK、ソースを調べたところ、これが答えであることがわかりました。したがって、4.2がリリースされるまで回避策を実行するか、次の変更を適用しExt.ux.grid.menu.ListMenuて実行する必要があります。

idFieldデフォルト値でを追加します。

コンストラクター内でこの行を探します

case 'object': options.push([value.id, value[this.labelField]]); break;
// some more lines
fields: ['id', this.labelField],

と置き換えます

case 'object': options.push([value[me.idField], value[me.labelField]]); break;
// some more lines
fields: [me.idField, me.labelField],

onLoad関数内で

itemValue = records[i].get('id');

と置き換えます

itemValue = records[i].get(me.idField);

そしてそれはほとんどそれです。

于 2013-03-04T07:06:07.330 に答える