Extjs mağazada

Question

kullanarak dinamik akordeon yaratıyorum extjs'de bir uygulamanın geliştirilmesine başladım. extjs documentation'da belirtildiği gibi MVC yaklaşımını kullanıyorum.

Kullanıcıya bir dizi akordeon kontrolünü sunması gereken bazı dinamik verilerim var. Verileri bir mağazada buldum, ancak akordeon öğelerini dinamik olarak nasıl oluşturacağımı bilmiyorum (ızgara panellerinden farklı olarak, bir mağaza veri yöntemi görünmüyor).

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!' 
}] 
}); 

yukarıda mutluluk duyacağız başarmak konusunda herhangi bir rehberlik, teşekkür ederim: Statik eşyalarla -

İşte benim şimdiki akordeon görünümü kodudur.

SRAların talebine yanıt olarak [Düzenle] İşte benim denetleyicisi: Ben bu kontrolör sırayla LeftPage görünümü yükleyen bir üst görünümü, yükler burada belirtmeliyiz

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

views: [ 
    'induction.Binder' 
], 

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

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

- Emin değilim Bu, herhangi bir kapsam belirleme sorunu oluşturursa. Dahası, gördüğünüz gibi, birden fazla mağaza yüklenir.

Answer 1

(bazı düzeltmelerle birlikte denenmemiş bir örnek) böyle yapabilirsiniz

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(); 
    } 
}); 

en az iki özelliğe gerekir Dükkanın; başlık için bir tane ve içerik için bir tane. Ve bunu baştan önce mağaza yüklenmelidir. Fakat bu, kontrol cihazınızda kolayca yapılabilir. Yorumlarınız ve yeni OP bilgi dayalı

Düzenleme:

Eh görünümünüzü kumandanın kontrol dışı bir parçasıdır. Bu yüzden, geçerli bir örnek almak için StoreManager'u kullanmanızı öneririz (kodu düzenledim, kullanmak için doğru depoyu bilmiyordum). StoreManager, bir denetleyicide onu listelediğiniz sürece mağaza hakkında bilgi sahibi olur (StoreManager çok daha fazlasını yapabilir, ancak şu anda bilmeniz gereken tek şey budur). Diğer bir sürüm için de mixin kullanabilirsiniz mağaza yeni veri okunabilmesi için (güncellenmelerini)

Edit aldıktan sonra sizin akordeon güncellemek için daha temiz bir storebinding yönetmek ve sağlar olurdu bindable

Sadece biraz temizledim ve bu bileşeni bir depoya doğrudan bağlı olarak kullanmanıza, tüm yük olaylarında tepki vermenize ya da deponun zaten yüklenmesinin gerektiği bir tür statik bir şekilde kullanılmasına izin veren bir anahtar parametresi attentive'u ekledim. Sonuç olarak, bu, onu karmaşık hale getirmeden bir başlangıç ​​vermelidir.