如何删除extjs中的网格?

时间:2014-02-04 11:56:49

标签: extjs4.2

我是第一次自动加载Extjs网格,它加载了来自servlet的所有值。该网页还具有基于其(用户的输入)正在创建另一网格的表单。 When the new grid is being created i don't want the old one。或is there another way to load only the store?代码如下:

Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*',
        'Ext.form.*',

        'Ext.tip.QuickTipManager', 'Ext.ux.LiveSearchGridPanel' ]);

Ext.onReady(function() {
            Ext.QuickTips.init();

            var itemsPerPage = 50;
            var simple = Ext.create('Ext.form.Panel', {

                renderTo : 'form',
                frame : true,
                align : 'center',

                title : 'Audit LOG',
                bodyStyle : 'padding:5px 5px 0',
                width : 825,
                fieldDefaults : {
                    msgTarget : 'side',
                    labelWidth : 75
                },
                defaultType : 'textfield',
                defaults : {
                    anchor : '100%'
                },
                items : [ {
                    fieldLabel : 'Date',
                    xtype : 'datefield',
                    name : 'Date',
                    id : 'Date',
                    format : 'd M Y',
                    allowBlank : false,
                    cls : 'input_single',
                    emptyText : 'dd-MMM-YYYY',

                }, {
                    fieldLabel : 'Start Time',
                    name : 'sTime',
                    xtype : 'timefield',
                    id : 'sTime',
                    format : 'H:i:s',
                    altFormats : 'H:i:s'

                }, {

                    fieldLabel : 'End Time',
                    name : 'eTime',
                    xtype : 'timefield',
                    id : 'eTime',
                    format : 'H:i:s',
                    altFormats : 'H:i:s'

                } ],buttons : [ {
                    text : 'GO',
                    handler : function() {

                        var startDate = Ext.getCmp('Date').getValue();
                        var sTime = Ext.getCmp('sTime').getRawValue();
                        var eTime = Ext.getCmp('eTime').getRawValue();
                        grid(startDate,sTime,eTime);
                    }
                } ]

            });

            var store = Ext.create('Ext.data.Store', {
                id : 'pageStore',
                autoLoad : false,
                fields : [ {
                    name : 'S_NO',
                    type : 'int'
                },{
                    name : 'LoggedTime',
                    type : 'string'
                }, {
                    name : 'Level',
                    type : 'string'
                }, {
                    name : 'LoggerName',
                    type : 'string'
                }, {
                    name : 'MethodName',
                    type : 'string'
                }, {
                    name : 'AuditMessage',
                    type : 'string'
                }, {
                    name : 'Customer',
                    type : 'string'
                }, {
                    name : 'Activity',
                    type : 'string'
                } ],
                pageSize : itemsPerPage,
                proxy : {
                    type : 'ajax',
                    url : '/LogHandlers/Log',
                    params : {

                        flag:'no'
                    },

                    reader : {
                        type : 'json',
                        root : 'itemsList',
                        totalProperty : 'totalCount'
                    }
                }
            });

            store.load({
                params : {
                    start : 0,
                    limit : itemsPerPage,
                    flag:'no'

                }
            });
            var groupingFeature = Ext
                    .create(
                            'Ext.grid.feature.Grouping',
                            {
                                groupHeaderTpl : '{columnName}:{groupValue} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
                                 hideGroupedHeader: true
                            });
            var userGrid = new Ext.create('Ext.ux.LiveSearchGridPanel', {
                renderTo : 'logs',


                height : 600,
                store : store,
                features : [ groupingFeature
                             ],
                columns : [ {
                    header : 'S_NO',
                    dataIndex : 'S_NO',
                    items: [{
                        icon   : "extjs/resources/ext-theme-classic/images/menu/menu-parent.gif"  // Use a URL in the icon config
                                            }]
                },{
                    header : 'LoggedTime',
                    dataIndex : 'LoggedTime'
                }, {
                    header : 'Level',
                    dataIndex : 'Level',
                    groupable : false,
                }, {
                    header : 'LoggerName',
                    dataIndex : 'LoggerName',
                    groupable : false
                }, {
                    header : 'MethodName',
                    dataIndex : 'MethodName',
                    groupable : false
                }, {
                    header : 'AuditMessage',
                    dataIndex : 'AuditMessage',
                    groupable : false
                }, {
                    header : 'Customer',
                    dataIndex : 'Customer'
                }, {
                    header : 'Activity',
                    dataIndex : 'Activity'
                } ],
                dockedItems : [ {
                    xtype : 'pagingtoolbar',
                    pageSize : itemsPerPage,
                    store : store, // same store GridPanel is using
                    dock : 'bottom',
                    displayInfo : true,
                    text : 'Show Preview',
                    beforePageText : 'Page',
                    afterPageText : 'of {0}',
                    mode : 'local',
                    width : 50,

                    displayMsg : 'Displaying {0} - {1} of {2}',
                    emptyMsg : 'No Records to display'
                }],

                viewConfig : {
                    forceFit : true
                }
            });

        });
function grid(startDate,sTime,eTime) {



    var itemsPerPage = 50;
    var store = Ext.create('Ext.data.Store', {
    id : 'pageStore',
    autoLoad : false,
    fields : [ {
        name : 'S_NO',
        type : 'int'
    },{
        name : 'LoggedTime',
        type : 'string'
    }, {
        name : 'Level',
        type : 'string'
    }, {
        name : 'LoggerName',
        type : 'string'
    }, {
        name : 'MethodName',
        type : 'string'
    }, {
        name : 'AuditMessage',
        type : 'string'
    }, {
        name : 'Customer',
        type : 'string'
    }, {
        name : 'Activity',
        type : 'string'
    } ],
    pageSize : itemsPerPage,
    proxy : {
        type : 'ajax',
        url : '/LogHandlers/Log',
         actionMethods: {
             read: 'POST'
         },
        params : {
            Date : startDate,
            startTime : sTime,
            endTime : eTime,
            flag:'yes'
        },

        reader : {
            type : 'json',
            root : 'itemsList',
            totalProperty : 'totalCount'
        }
    }
});

store.load({
    params : {
        start : 0,
        limit : itemsPerPage,
        Date : startDate,
        startTime : sTime,
        endTime : eTime,
        flag:'yes'

    }
});
var groupingFeature = Ext
        .create(
                'Ext.grid.feature.Grouping',
                {
                    groupHeaderTpl : '{columnName}:{groupValue} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
                     hideGroupedHeader: true
                });
var userGrid = new Ext.create('Ext.ux.LiveSearchGridPanel', {
    renderTo : 'logs',

    height : 600,
    store : store,
    features : [ groupingFeature
                 ],
    columns : [ {
        header : 'S_NO',
        dataIndex : 'S_NO',
        items: [{
            icon   : "extjs/resources/ext-theme-classic/images/menu/menu-parent.gif"  // Use a URL in the icon config
                                }]
    },{
        header : 'LoggedTime',
        dataIndex : 'LoggedTime'
    }, {
        header : 'Level',
        dataIndex : 'Level',
        groupable : false,
    }, {
        header : 'LoggerName',
        dataIndex : 'LoggerName',
        groupable : false
    }, {
        header : 'MethodName',
        dataIndex : 'MethodName',
        groupable : false
    }, {
        header : 'AuditMessage',
        dataIndex : 'AuditMessage',
        groupable : false
    }, {
        header : 'Customer',
        dataIndex : 'Customer'
    }, {
        header : 'Activity',
        dataIndex : 'Activity'
    } ],
    dockedItems : [ {
        xtype : 'pagingtoolbar',
        pageSize : itemsPerPage,
        store : store, // same store GridPanel is using
        dock : 'bottom',
        displayInfo : true,
        text : 'Show Preview',
        beforePageText : 'Page',
        afterPageText : 'of {0}',
        mode : 'local',
        width : 50,

        displayMsg : 'Displaying {0} - {1} of {2}',
        emptyMsg : 'No Records to display'
    }],

    viewConfig : {
        forceFit : true
    }
});
}

1 个答案:

答案 0 :(得分:1)

您是说您要删除网格并重新创建它,以从服务器提取更新的数据?如果是这种情况,只需在您的商店中调用load()(使用您要传入的任何参数,就像您在代码中一样),这将加载最新数据,与您创建时相同商店和网格。您可以通过调用getStore()从网格中获取商店,因此它看起来像这样:

userGrid.getStore().load();