How to define view in Ext.grid.panel

Question

I want to modify view of the grid and i started from base (i.e before i define my own view). But some how i am not even able to assign object to view property. Please, anybody have any idea how to create view?? I tried following.

Example would be great.

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

If i de-comment "view: new Ext.view.Table()" line then it raise error and stops everything. I keep commented and after grid creation, i can access view with this.grid.getView() property. But how to create own view object (where i can assign custom Templates)???

Many thanks.

Answer 1

From the docs:

This is the base class for both Ext.grid.View and Ext.tree.View and is not to be used directly.

If you do want to create one yourself you need to configure the following required options.

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

Look into the docs how to create your custom view. Good luck! If you need any help feel free to ask ;)

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