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.

Whats your problem? To customize the view use viewConfig as you still mention. — user1703279
ViewConfig works fine, but i want define my own view. But if i decomment view: new Ext.view.Table() it raise error that me.selModel is undefined. How to create object of Ext.view.Table() and assign to "view" property?? 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, view: new Ext.view.Table(), provider: this.page.provider }); — user2135671

A1rPun A1rPun · Accepted Answer · 2013-03-22T15:23:36

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

How to define view in Ext.grid.panel

1 Answers