3

グリッドのビューを変更したいのですが、ベースから始めました (つまり、独自のビューを定義する前)。しかし、オブジェクトをビュープロパティに割り当てることさえできない方法もあります。ビューを作成する方法を知っている人はいますか?? フォローしてみました。

例は素晴らしいでしょう。

var viewConfig = {emptyText: "My msg",stripeRows: false};

this.grid = Ext.create('Ext.grid.Panel', {
            id: "t-"+this.gridName+"-grid",
            header: true,
            title: gridTitle,
            border: false,
            store: store,            
            columns: cm,
            selModel: sm,
            loadMask: true,
            //viewConfig: viewConfig, // works fine
            //view: new Ext.view.Table() ,//Ext.grid.View(),//Ext.grid.View(viewConfig ),
            provider: this.page.provider
        });

「view: new Ext.view.Table()」行のコメントを外すと、エラーが発生し、すべてが停止します。私はコメントを続け、グリッドの作成後、 this.grid.getView() プロパティでビューにアクセスできます。しかし、独自のビュー オブジェクトを作成する方法 (カスタム テンプレートを割り当てることができる場所) ???

どうもありがとう。

4

1 に答える 1

1

ドキュメントから：

これはExt.grid.ViewとExt.tree.Viewの両方の基本クラスであり、直接使用することはできません。

自分で作成する場合は、次の必須オプションを構成する必要があります。

itemSelector : String
store : Ext.data.Store
tpl : String/String[]

カスタムビューを作成する方法について は、ドキュメントをご覧ください。幸運を！ヘルプが必要な場合は、お気軽にお問い合わせください;）

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>'
);

var theView = Ext.create('Ext.view.View', {
    store: Ext.data.StoreManager.lookup('imagesStore'),
    tpl: imageTpl,
    itemSelector: 'div.thumb-wrap',
    emptyText: 'No images available'
});

var grid = Ext.create('Ext.grid.Panel', {
    id: "t-"+this.gridName+"-grid",
    header: true,
    title: gridTitle,
    border: false,
    store: store,            
    columns: cm,
    selModel: sm,
    loadMask: true,
    view: theView,
    provider: this.page.provider,
    renderTo: Ext.getBody()
});
//not tested but should work
于 2013-03-22T15:23:36.910 に答える