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