[CLOSED] GridPanel created in Javascript. Reconfigure.

[supera]

Hi!

I'm creating the gridPanel in Javascript, this way:

var getGrid = function (title) {
            return {
                id: "panel1",
                xtype: "panel",
                flex: 1,
                items: [{
                    store: {
                        model: Ext.define("SuperaWeb.SGCO.modelExplorerWebContext", {
                            extend: "Ext.data.Model",
                            fields: [{
                                name: "ID",
                                type: "int"
                            }, {
                                name: "Name",
                                type: "string"
                            }]
                        }),
                        storeId: "Store1",
                        type: "paging",
                        autoLoad: true,
                        pageSize: 10,
                        remoteSort: true,
                        proxy: {
                            data: [{
                                "ID": "1",
                                "Name": "Anderson Silva"
                            }, {
                                "ID": "1",
                                "Name": "José Aldo"
                            }, {
                                "ID": "1",
                                "Name": "Vitor Belfort"
                            }, {
                                "ID": "1",
                                "Name": "Lyoto Machida"
                            }, {
                                "ID": "1",
                                "Name": "Maurício Shogun Rua"
                            }],
                            type: 'pagingmemory'
                        }
                    },
                    id: "gridPanel1",
                    xtype: "grid",
                    flex: 1,
                    bbar: {
                        id: "tbPaging1",
                        xtype: "pagingtoolbar",
                        displayInfo: true,
                        store: "Store1"
                    },
                    columns: {
                        items: [{
                            dataIndex: "ID",
                            text: "ID"
                        }, {
                            dataIndex: "Name",
                            text: "Name"
                        }]
                    },
                    selModel: window.SuperaWeb.SGCO.rsmExplorerWebContext = Ext.create("Ext.selection.RowModel", {
                        proxyId: "rsmExplorerWebContext",
                        selType: "rowmodel"
                    })
                }],
                layout: "fit",
                title: "Test of OnDirectClick!"
            };
        };

I wish reconfigure the grid with another data.
I'm trying use the grid.reconfigure(store, columns)....
columns, ok... but store don´t is 'replace' or reconfigured...

I'm creating then new store as follow:

store = new Ext.data.Store({
                        model: Ext.define("SuperaWeb.SGCO.modelExplorerWebContext", {
                            extend: "Ext.data.Model",
                            fields: [{
                                name: "ID",
                                type: "int"
                            }, {
                                name: "Name",
                                type: "string"
                            },
                            , {
                                name: "Birthdate",
                                type: "date",
                                format: "M$"
                            }]
                        }),
                        storeId: "Store1",
                        type: "paging",
                        autoLoad: true,
                        pageSize: 10,
                        remoteSort: true,
                        proxy: {
                            data: [{
                                "ID": "10",
                                "Name": "xxxxxxxxxxx",
                                "04/12/1975"
                            }, {
                                "ID": "11",
                                "Name": "yyyyyyyyyyyyyy",
                                "04/12/1985"
                            }],
                            type: 'pagingmemory'
                        }
                    })

I understand that this support is not the responsibility of the staff of ext.net...
But it would be very grateful if I pointed a way.

thanks for any help.

[Daniil]

Hi,

I am unable to reproduce. Here is the example I've tested with.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script type="text/javascript">
        var renderGrid = function () {
            Ext.create("Ext.grid.Panel", {
                id : "GridPanel1",
                renderTo : Ext.getBody(),
                autoHeight : true,
                store : {
                    model : Ext.define(Ext.id(), {
                        extend : "Ext.data.Model",
                        fields : [{
                            name : "test"
                        }]
                    }),
                    autoLoad : true,
                    proxy : {
                        data : [["test1"], ["test2"], ["test3"]],
                        type : 'memory',
                        reader : { 
                            type : "array" 
                        }
                    }
                },
                columns : {
                    items : [{
                        dataIndex : "test",
                        text : "Test"
                    }]
                }
            });
        };

        var reconfigureGrid = function () {
            var grid = Ext.getCmp("GridPanel1"),
                store,
                columns;
              
            store = new Ext.data.Store({
                model : Ext.define(Ext.id(), {
                    extend : "Ext.data.Model",
                    fields : [{
                        name : "test1",
                    }, {
                        name : "test2",
                    }]
                }),
                autoLoad : true,
                proxy : {
                    data : [["test11", "test12"], ["test21", "test22"], ["test31", "test32"]],
                    type : 'memory',
                    reader : { 
                        type : "array" 
                    }
                }
            });

            columns = [{
                dataIndex : "test1",
                text : "Test1"
            }, {
                dataIndex : "test2",
                text : "Test2"
            }];

            grid.reconfigure(store, columns);
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Button runat="server" Text="Render grid" Handler="renderGrid" />

    <ext:Button runat="server" Text="Reconfigure grid" Handler="reconfigureGrid" />
</body>
</html>

Please provide your simplified test case.

[supera]

Hi Daniil!

Follow your example, I got!

Thanks a lot...

Now, I have some problem with toolbarPaging! After reconfigure, don't self refresh with new data. Start new thread?

[Daniil]

Lets continue the current thread, it looks to be tightly related

I think you should call the bindStore method for the PagingToolbar.
http://docs.sencha.com/ext-js/4-0/#!...thod-bindStore

Example

pagingToolbar.bindStore(newStore);

[supera]

Works...

Thanks a lot, Daniil!