6

extjsでアプリの開発を始めています。extjsのドキュメントに記載されているように、MVCアプローチを使用しています。

ユーザーに一連のアコーディオンコントロールを提示する必要がある動的データがいくつかあります。ストアにデータがありますが、アコーディオンアイテムを動的に作成する方法がわかりません（グリッドパネルとは異なり、ストアデータメソッドがないようです）。

これが私の現在のアコーディオンビューコードです-静的アイテムを使用：

Ext.define('BP.view.induction.LeftPage', {
extend: 'Ext.Panel',
alias : 'widget.leftpage',

title: "Left Page", 
layout: {
    type: 'accordion',
    align: 'stretch'
},
layoutConfig: {
    // layout-specific configs go here
    titleCollapse: true,
    animate: true,
    activeOnTop: true
},
items: [{
    xtype: 'panel', // fake hidden panel, so all appear collapsed
    hidden: true,
    collapsed: false
},{
    xtype: 'panel',
    title: 'Panel 1',
    html: 'Panel content!'
},{
    xtype: 'panel',
    title: 'Panel 2',
    html: 'Panel content!'
},{
    xtype: 'panel',
    title: 'Panel 3',
    html: 'Panel content!'
}]
});

上記を達成する方法についてのガイダンスをいただければ幸いです、ありがとうございます。

[編集]sraのリクエストに応えて、これが私のコントローラーです。

Ext.define('BP.controller.Induction', {
extend: 'Ext.app.Controller',

views: [
    'induction.Binder'
],

stores: [
    'Sections',
    'Categories',
    'Tasks'
],

init: function() {
    console.log('Initialized Induction!');
}
});

ここで、このコントローラーが親ビューをロードし、それが次にLeftPageビューをロードすることに注意する必要があります。これにより、スコープの問題が発生するかどうかはわかりません。さらに、ご覧のとおり、複数のストアがロードされています。

4

1 に答える 1

7

あなたはこのようにすることができます（いくつかの調整を加えた未テストの例）

Ext.define('BP.view.induction.LeftPage', {
    extend: 'Ext.Panel',
    alias : 'widget.leftpage',

    title: "Left Page", 
    layout: null,
    layoutConfig: null,
    store: null,
    attentive: true,
    initComponent: function() {
        var me = this;
        // begin edit
        // only set the store if is is not already defined
        me.store = me.store ? me.store : Ext.StoreMgr.lookup('Sections');  // you may change this to any storename you want
        // end edit
        me.layout = { // don't set objects directly in class definitions
            type: 'accordion',
            align: 'stretch'
        };
        me.layoutConfig = { // dont set objects directly in class definitions
            titleCollapse: true,
            animate: true,
            activeOnTop: true
        };

        me.callParent(arguments);
        if (me.attentive) {
            me.store('load', me.onRebuildContent, me);
            if (me.store.count() == 0)
                me.store.load();
        } else {
            me.buildContent(); 
        }
    },
    buildContent: function() {
        var me = this;
        function addItem(rec) {
            me.add({
                xtype: 'panel',
                title: rec.get('titleProperty'),
                html: rec.get('bodyProprty')
            });
        };

        me.store.each(addItem);
    },
    onRebuildContent: function() {
        var me = this;
        me.removeAll();
        me.buildContent();
    }   
});

ストアには少なくとも2つのプロパティが必要です。1つはタイトル用、もう1つはコンテンツ用です。また、これをインスタンス化する前に、ストアをロードする必要があります。しかし、それはコントローラー内で簡単に行うことができます。

コメントと新しいOP情報に基づいて編集します。

さて、あなたの見解はコントローラーの制御から少し外れています。したがって、StoreManagerを使用して有効なインスタンスを受け取ることをお勧めします（コードを編集しましたが、使用する正しいストアがわかりませんでした）。StoreManagerは、コントローラー内にリストしている限り、ストアについて認識します（StoreManagerはさらに多くの機能を備えていますが、現時点で知っておく必要があるのはそれだけです）。今後のリリースでは、ストアバインディングをよりクリーンに管理し、ストアが新しいデータを受信した後にアコーディオンを更新できるようにするミックスインバインド可能を使用することもできます（更新されます）

読みやすくするために編集

私はそれを少しクリーンアップし、attentiveこのコンポーネントをストアに直接バインドして、すべてのロードイベントに反応するように、またはストアがすでにロードされているはずの一種の静的イベントとして使用できるようにするスイッチパラメーターを含めました。全体として、これは複雑にすることなくあなたにスタートを与えるはずです。

于 2012-11-12T11:17:32.760 に答える