Ext JS 4 Plugin: Live-Search-Grid - How to modify my Grid definition !

[kumar100]

I am trying to replace my grid with 'Live-Search-Grid' plugin. The 'live-search-grid' example and the way my past developer coded the custom Grid look quite different and I couldn't replace it and get it working properly.

Here is the example supplied by Ext JS:

    Ext.create('Ext.ux.LiveSearchGridPanel', {        store: store,
        columns: [
            { text: 'Company', flex     : 1,sortable : false,  dataIndex: 'company'},
            { text: 'Price', width: 75,   sortable : true,  renderer : 'usMoney', dataIndex: 'price'},
            { text: 'Change', width: 75, sortable : true, dataIndex: 'change',renderer: change },
            { text: '% Change', width: 75, dataIndex: 'pctChange', renderer: pctChange },
            { text : 'Last Updated', width    : 85, sortable : true, dataIndex: 'lastChange' }
        ],
        renderTo: 'grid-example'
    });
});

And, here is the existing grid:

Ext.Loader.setPath('Ext.ux', '/extjs/');Ext.require(['Ext.ux.RowExpander']);

 Ext.define('Loyaltics.view.chart.ReportAdvGrowthGrid' ,{
    extend: 'Ext.panel.Panel',
    ,layout:'border'        
      ,initComponent:function()
      {
          this.items = [
            {
        xtype:'grid'    
        ,height: '1000px'
        ,autoScroll:true
        ,region:'center'
        ,columnLines: true   
        store:'GrowthReports',

         columns:[
               {header: 'Survey Id',  dataIndex: 'id',hidden:true},
               {header: 'Campaign Id',  dataIndex: 'campaign_id',hidden:true},
               {header: 'Customer Name', dataIndex: 'username',id:'username', flex:1 },
               {header: 'Customer Email', dataIndex: 'email', flex:1, id:'email',flex:1}]
       } ];
        
        this.tbar = ['->',
            { id: 'cmb_campaign',  xtype: 'combo'},
            { id: 'cmb_year', xtype: 'combo' }];
         
         this.dockedItems = [{
                dock: 'bottom',
                xtype: 'pagingtoolbar',
                  pageSize: 10
            }];
        this.callParent();
        }
});

Can you please help, how to go about utilizing live-search-grid ? Do we need to replace Ext.Define, initComponent, this.items ? Thanks in advance !.

BTW, We are on Ext JS 4.0.2a.

[mitchellsimoens]

Please post in the appropriate forum. I have moved this to the Ext JS 4 Q&A forum for you.

[kumar100]

Thanks Mitchell, I wasn't knowing !.

And, everyone !

What is the xtype for live-search-grid ? Our existing code uses Ext.Define, and live-search-grid example uses Ext.Create !. Can we just replace xtype: 'grid' to xtype:'something' ? I tried with livesearchgrid, live-search-grid etc, but to no avail.

Any help, please ?

[directors@j7group]

Hi I am having the same issue trying to modify my grid definition to 'live-search-grid'. Did you get the issue resolved?