0

データを含むストアをロードできるExtJSの方法があるかどうか迷い、ロードした後、マスターパネルで他のコンポーネント(カスタムパネル)を作成して、そのデータを特定の方法で表示できますか?

ここに画像の説明を入力してください

カスタムコンポーネントを使用してパネルに保存されたデータを表示したい

4

1 に答える 1

1

2つのオプションがあります。

  1. データのみを表示する必要がある場合、DataViewはこのタスクに合わせて調整されます。
  2. コンポーネント(つまり、表示だけでなくユーザーの操作をカプセル化するもの)が本当に必要な場合は、このコンポーネントを作成し、ストアのロード時にレコードごとにコンポーネントを作成してマスターパネルに追加する必要があります。

dataviewのドキュメント例をコピーするには(オプション1):

Ext.define('Image', {
    extend: 'Ext.data.Model',
    fields: [
        { name:'src', type:'string' },
        { name:'caption', type:'string' }
    ]
});

Ext.create('Ext.data.Store', {
    id:'imagesStore',
    model: 'Image',
    data: [
        { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
        { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
        { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
        { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
    ]
});

var imageTpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div style="margin-bottom: 10px;" class="thumb-wrap">',
          '<img src="{src}" />',
          '<br/><span>{caption}</span>',
        '</div>',
    '</tpl>'
);

Ext.create('Ext.view.View', {
    store: Ext.data.StoreManager.lookup('imagesStore'),
    tpl: imageTpl,
    itemSelector: 'div.thumb-wrap',
    emptyText: 'No images available',
    renderTo: Ext.getBody()
});
于 2013-03-26T23:47:26.607 に答える