[CLOSED] [URGENT - Need Help ] ux is missing ( grid live data search )

[Pyropace]

Hi All,

I am creating a grid panel by js code

        var store =Ext.create('Ext.data.Store',  {
            model: Ext.define("DataModel", {
                extend: "Ext.data.Model",
                fields: tableFields
            }),
            pageSize: 20,
            remoteSort: true,
            proxy: {
                data: tableValues,
                type: 'memory',
                reader: {
                    type: "array"
                }
            }
        });
        
        Ext.create("Ext.grid.Panel", {
            id: "GridPanel1",
            renderTo: App.gridContainer.getBody(),
            height: 500,
            ForceFit: true,
            disableSelection: true,
            loadMask: true,
            store: store,
            columns: {
                items: columns
            },
            // paging bar on the bottom
            bbar: Ext.create('Ext.PagingToolbar', {
                store: store,
                displayInfo: true,
                displayMsg: 'Displaying Items {0} - {1} of {2}',
                emptyMsg: "No Items to display"
            })
        });
        });

I need to add live search to production i saw this example
http://try.sencha.com/extjs/4.0.7/ex...id/viewer.html

however i get a 404 error for /ux//LiveSearchGridPanel.js?_dc=1363877132475

here are my required namespaces

   Ext.Loader.setPath('Ext.ux', '../ux/');
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.toolbar.Paging',
        'Ext.ux.PreviewPlugin',
        'Ext.ModelManager',
        'Ext.tip.QuickTipManager',
        'Ext.ux.LiveSearchGridPanel',
        'Ext.window.MessageBox', 'Ext.tip.*'
    ]);

Full code

 Ext.Loader.setConfig({ enabled: true });

    Ext.Loader.setPath('Ext.ux', '../ux/');
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.toolbar.Paging',
        'Ext.ux.PreviewPlugin',
        'Ext.ModelManager',
        'Ext.tip.QuickTipManager',
        'Ext.ux.LiveSearchGridPanel',
        'Ext.window.MessageBox', 'Ext.tip.*'
    ]);
    

    function PopulateGrid(records) {
        Ext.tip.QuickTipManager.init();
        

        var tableFields = [];
        var tableValues = [];
        var columns = [];

        if (records.result.length == 0) {
            ShowMessage("No Data Available", App.comboBoxMethods);

            return;
        }

        for (var i = 0; i < records.result.length; i++) {
            var obj = records.result[i];
            var values = [];
            for (var key in obj) {
                if (i == 0) {
                    if (key.indexOf("date") !== -1 || key.indexOf("Date") !== -1) {
                        columns.push({ text: key, dataIndex: key, xtype: 'datecolumn', format:'Y-M-d', sortable: true });
                        tableFields.push({ name: key, type: 'date' });
                    } else if (key.indexOf("amount") !== -1 || key.indexOf("Amount") !== -1) {
                        columns.push({ text: key, dataIndex: key, renderer: moneyColorRenderer, sortable: true });
                        tableFields.push({ name: key });
                    } else {
                        columns.push({ text: key, dataIndex: key, sortable: true });
                        tableFields.push({ name: key });
                    }
                }
                values.push([obj[key]]);
            }

            tableValues.push(values);
        }


        var store =Ext.create('Ext.data.Store',  {
            model: Ext.define("DataModel", {
                extend: "Ext.data.Model",
                fields: tableFields
            }),
            pageSize: 20,
            remoteSort: true,
            proxy: {
                data: tableValues,
                type: 'memory',
                reader: {
                    type: "array"
                }
            }
        });
        
        Ext.create("Ext.grid.Panel", {
            id: "GridPanel1",
            renderTo: App.gridContainer.getBody(),
            height: 500,
            ForceFit: true,
            disableSelection: true,
            loadMask: true,
            store: store,
            columns: {
                items: columns
            },
            // paging bar on the bottom
            bbar: Ext.create('Ext.PagingToolbar', {
                store: store,
                displayInfo: true,
                displayMsg: 'Displaying Items {0} - {1} of {2}',
                emptyMsg: "No Items to display"
            })
        });
        
        // trigger the data store load
        store.on('load', function (store, records, successful, operation) {
            this.loadData(tableValues.slice((this.currentPage - 1) * 20, (this.currentPage) * 20));
        }, store);

        store.load();
    }

[Daniil]

Hi @Pyropace,

Well, it means that there is no "LiveSearchGridPanel.js" file under the "ux" folder under the application's root folder. Please double check.

By the way, we incorporated this functionality into Ext.NET. Please take a look at the following example.
http://svn.ext.net/premium/trunk/Ext...h/Default.aspx

[Pyropace]

Hi @Pyropace,

Well, it means that there is no "LiveSearchGridPanel.js" file under the "ux" folder under the application's root folder. Please double check.

By the way, we incorporated this functionality into Ext.NET. Please take a look at the following example.
http://svn.ext.net/premium/trunk/Ext...h/Default.aspx

Hi Danil

lol well thanks for explaining 404 :)

the web solution is using ext.net i guess what i am trying to ask is , is that js included in ext.net or does it have to be added manually, if it is included how do i add it ?

i thought it was included because of your example

but like i said i am using js to create this grid ( mainly because the grid has to be reconstructed with data , i couldnot find an easy way to do it with ext.net )

[Pyropace]

Hi @Pyropace,

Well, it means that there is no "LiveSearchGridPanel.js" file under the "ux" folder under the application's root folder. Please double check.

By the way, we incorporated this functionality into Ext.NET. Please take a look at the following example.
http://svn.ext.net/premium/trunk/Ext...h/Default.aspx

http://svn.ext.net/premium/trunk/Ext...chGridPanel.cs

that link answered my question

thanks
Amir