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

13 Dec 2011, 2:53 AM
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',
this.items = [
,height: '1000px'
,columnLines: true

{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

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.

13 Dec 2011, 8:39 AM
Please post in the appropriate forum. I have moved this to the Ext JS 4 Q&A forum for you.

14 Dec 2011, 5:00 AM
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 ?

22 Jan 2012, 4:43 AM
Hi I am having the same issue trying to modify my grid definition to 'live-search-grid'. Did you get the issue resolved?