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:
Code:
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:
Code:
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.