extJs门户内的数据网格的extJs livesearchpanel

Question

I am working on an Extjs portal example and downloaded the example from extjs4-mvc-portal on GitHub .

I have successfully integrated in Eclipse with Tomcat and added XML grid panel. I want to add a "livesearchpanel" similar to this Live Search Grid Example .

This example is split in different sections like store, portlet and I'm confused where to add the CSS files and JavaScript files to integrate livesearchpanel.

When I added in the portlet section the following error occurred

Failed to load resource: the server responded with a status of 404 (Not Found)

Ext.define('ExtMVC.view.portlet.livegrid', {
    extend: 'Ext.ux.LiveSearchGridPanel',
    alias: 'widget.livegrid',

height: 300,

/**
 * Custom function used for column renderer
 * @param {Object} val
 */
change: function(val) {
    if (val > 0) {
        return '<span style="color:green;">' + val + '</span>';
    } else if (val < 0) {
        return '<span style="color:red;">' + val + '</span>';
    }
    return val;
},

/**
 * Custom function used for column renderer
 * @param {Object} val
 */
pctChange: function(val) {
    if (val > 0) {
        return '<span style="color:green;">' + val + '%</span>';
    } else if (val < 0) {
        return '<span style="color:red;">' + val + '%</span>';
    }
    return val;
},

initComponent: function(){

    var store = Ext.create('ExtMVC.store.lives');

    Ext.apply(this, {
        height: this.height,
        store: store,
        stripeRows: true,
        columnLines: true,
        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, 
            sortable : true, 
            dataIndex: 'pctChange',
            //renderer: pctChange
        },
        {
            xtype    : 'datecolumn',
            text     : 'Last Updated', 
            width    : 85, 
            sortable : true, 
            dataIndex: 'lastChange'
        }]
    });

    this.callParent(arguments);
  }
});

I've tried EXT.ux.LiveSearchGridPanel.js in src section of extjs/src/grid/, change extend: 'Ext.grid.LiveSearchGridPanel', also `extend: 'Ext.grid.Ext.ux.LiveSearchGridPanel',

Answer 1

Ok problem is solved.......... i just involved ux folder in to extjs/src.

thanks