extjs 做数据库增删改查时,原先是全部查上来显示的,现在用条件查询,怎么在原先的位置上显示条件查询的结果

extjs 做数据库增删改查时,原先是全部查上来显示的,现在用条件查询,怎么在原先的位置上显示条件查询的结果

8个回答

重写store的onbeforeload方法,构造查询参数,执行查询时这些参数可以直接在后台获取到。这种方式比较好理解。

每次刷新(refreshGrid)都会执行这个方法。

[code="java"]
var grid;
/**

  • grid的参数 */ var params = { start : 0, limit : 1000 };

var rIndex;/** 操作行的id **/

function getGrid(){
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : proPath + '/area/area!orderGrid.action'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'total',root : 'root'},
[ {name:'id'},
{name:'name'},
{name:'code'}
]
)
});

var rn = new Ext.grid.RowNumberer();
var colm = new Ext.grid.ColumnModel([rn,{
    header : "ID",
    dataIndex : "id",
    width : 50,
    sortable : true
}, {
    header : "区域名称",
    dataIndex : "name",
    width : 170,
    sortable : true
}, {
    header : "区域代码",
    dataIndex : "code",
    width : 100,
    sortable : true
},{
    header : "排序",
    dataIndex : "id",
    renderer : orderButton,
    width : 50
}]);



grid = new Ext.grid.GridPanel({
    id : JCmpId.grid,
    region : 'center',
    store: store,
    cm : colm,
    stripeRows: true,
    height:320,
    width:600,
    frame:true,
    title:'区域排序',

    plugins: new Ext.ux.PanelResizer({
        minHeight: 100
    }),
    tbar : new Ext.Toolbar({
        items : [
            '-', '所属城市 ', citySiteCom(),
            '-', 
            {text : '查询',
                iconCls : 'mtfQuery',
                handler :function (){refreshGrid(grid);} 
            }
        ]
    }),
    bbar: new Ext.PagingToolbar({
        pageSize: 1000,
        store: store,
        displayInfo: true,
        refresh : function() {
            refreshGrid(grid);
        },
        plugins: new Ext.ux.ProgressBarPager()
    })
});
grid.addListener('rowclick', function(grid,rowindex,e){
    rIndex = rowindex;
});

// 查询参数统一在此处处理 ,点击刷新按钮更新 start limit见   base.js refreshGrid
store.on('beforeload', function(thiz, options) {
    Ext.apply(thiz.baseParams, {
        time : new Date().getTime(),
        'cityId' : Ext.getCmp("csId").getValue()
    });

});

// store.load({
// params : params
// });
return grid;
}
function refreshGrid(grid) {
var s = grid.getStore();
Ext.apply(params, {
'start' : grid ? grid.getBottomToolbar().cursor : 0
});
s.load( {
params : params
});
}
[/code]

你的数据显示应该是Grid的吧,直接把grid数据刷掉不就可以了?有什么问题?

在Store的请求上加参数
ext3.0使用baseParams
ext4.0使用extraParams

Ext.getCmp('unusualGrid').getStore().baseParams={
sapNum:Ext.getCmp("sapNum").getValue(),
poNum:Ext.getCmp("poNum").getValue(),
mateNum:Ext.getCmp("mateNum").getValue()
}
Ext.getCmp("unusualGrid").getStore().load();

把新的查询条件设置到store里面,然后直接调用store.load(),grid自然就刷新显示新的查询结果了。

[code="java"]
//事件列表
Mes.issue.IssueGrid = Ext.extend(Ext.grid.GridPanel , {
initComponent : function() {
var me = this ,pageSize = 25,

     sm = new Ext.grid.CheckboxSelectionModel(),

     store = new Ext.data.JsonStore({
         autoDestroy: true,
         url: 'issue!query.action',
         root: 'list',
         totalProperty: 'total',
         fields : [
             'id' , 'status' , 'statusDesc','happenAt','definationId',   
             'causeId' , 'causeCode' , 'causeName' , 'typeId' , 'typeName' , 'typeCode' , 'oitType' ,
             'locationId' , 'locationFullName' , 'equiipmentId' , 'equiipmentCode' , 'equipmentName' , 
             'reportRfid' , 'reportName' , 'reportTime' , 
             'check' , 'checkRfid' , 'checkName' , 'checkTime',
             'manage', 'manageRfid','manageName','manageTime','manageDesc',
             'close','closeRfid','closeName','closeTime',
             'order' , 'ip', 'createdAt','modifiedAt','createdBy','modifiedBy'
         ],
         listeners : {
             beforeload : function(store){
                 store.baseParams.start = 0;
                 store.baseParams.limit = pageSize;

                 store.baseParams.condition = me.getQueryCondition();
             },
             exception : function(store , type , action , options , response) {
                 var resp = Ext.decode(response.responseText);
                 resp && resp.message && Mes.Msg.error( resp.message );
             }
         }
     }),

     colModel = new Ext.grid.ColumnModel({
         defaults: {
             width: 80,
             sortable: true
         },
         columns: [
             sm,
             { header : '事件原因' , dataIndex : 'causeName' },
             { header : '设备编码' , dataIndex : 'equiipmentCode' },
             { header : '设备名称' , dataIndex : 'equipmentName' },
             { header : '当前状态' , dataIndex : 'statusDesc' },
             { header : '地点', dataIndex : 'locationFullName' , width : 150},
             { header : '发生时间' , dataIndex : 'happenAt'  , width : 120},
             { header : '报告RFID卡号' , dataIndex : 'reportRfid' },
             { header : '报告人' , dataIndex : 'reportName' },
             { header : '报告时间' , dataIndex : 'reportTime'  , width : 120},
             { header : '是否确认' , dataIndex : 'check' },
             { header : '确认RFID卡号' , dataIndex : 'checkRfid' },
             { header : '确认人' , dataIndex : 'checkName' },
             { header : '确认时间' , dataIndex : 'checkTime' },
             { header : '是否处理' , dataIndex : 'manage' },
             { header : '处理RFID卡号' , dataIndex : 'manageRfid' },
             { header : '处理人' , dataIndex : 'manageName' },
             { header : '处理时间' , dataIndex : 'manageTime' },
             { header : '处理描述' , dataIndex : 'manageDesc' },
             { header : '是否关闭' , dataIndex : 'close' },
             { header : '关闭RFID卡号' , dataIndex : 'closeRfid' },
             { header : '关闭人' , dataIndex : 'closeName' },
             { header : '关闭时间' , dataIndex : 'closeTime' },
             { header : '创建时间' , dataIndex : 'createdAt'   , width : 120},
             { header : '修改时间' , dataIndex : 'modifiedAt'   , width : 120},
             { header : '创建人' , dataIndex : 'createdBy' },
             { header : '修改人' , dataIndex : 'modifiedBy' }
         ]
     }),

     bbar = new Ext.PagingToolbar({
         pageSize: pageSize,
         store: store,
         displayInfo: true,
         displayMsg: '显示事件 {0} - {1} 共 {2} 条',
         emptyMsg: "没有事件显示"
     });

    var createContextMenu = function() {
        return new Ext.menu.Menu({
            items : [
                 {text : '导出...' , handler : function(){
                    Ext.each(Ext.query('form[class=export-excel]') , function(v) {
                        Ext.removeNode(v);
                    });
                    var params = me.queryParams , dh = Ext.DomHelper , 
                        form = dh.append(Ext.getBody() , {tag : 'form' ,cls : 'export-excel', action : 'issue!export.action' , method : 'post'}),
                        tpl = dh.createTemplate({tag : 'input' , type : 'hidden' , name : '{0}' , value : '{1}'});

                    tpl.append(form , ['condition.keyword' , params.keyword ? params.keyword : '']);

                    var tbar = me.getTopToolbar() ,
                        start = tbar.getComponent('startTime'),
                        end = tbar.getComponent('endTime');

                    me.queryParams.start = start.disabled ? null : (start.getValue() && start.getValue().format('Y-m-d'));
                    me.queryParams.end = end.disabled ? null : (end.getValue() && end.getValue().format('Y-m-d'));

                    if (!start.disabled) 
                        tpl.append(form , ['condition.start' , me.queryParams.start]);
                    if (!start.disabled)
                        tpl.append(form , ['condition.end' , me.queryParams.end]);

                    Ext.each(params.status , function(v , i) {
                        tpl.append(form , ['condition.status[' + i + ']' , v]);
                    });
                    Ext.each(params.types , function(v , i) {
                        tpl.append(form , ['condition.types[' + i + ']' , v]);
                    });

                    form.submit();
                }},
                 {text : '短信日志...' , handler : function() {
                     var sm = me.getSelectionModel();
                     if (!sm.hasSelection()) {
                         Mes.Msg.alert('请选择事件记录!');
                         return;
                     }
                     var issue = sm.getSelected().data;
                     var win = new Mes.issue.IssueLogWindow({ issueId : issue.id });
                     win.show();
                 }} ,
                 {text : '事件定义...' , handler : function() {
                     var sm = me.getSelectionModel();
                     if (!sm.hasSelection()) {
                         Mes.Msg.alert('请选择事件记录!');
                         return;
                     }
                     var issue = sm.getSelected().data;
                     var win = new Mes.issue.EventViewWindow({ issue : issue });
                     win.show();
                 }} , 
                 {text : '详细...' , handler : function() {
                     var sm = me.getSelectionModel();
                     if (!sm.hasSelection()) {
                         Mes.Msg.alert('请选择事件记录!');
                         return;
                     }
                     var issue = sm.getSelected().data;
                     var win = new Mes.issue.IssueViewWindow({ issue : issue });
                     win.show();
                 }} 
            ]
        });
    };

    Ext.apply(me , {
        layout : 'fit',
        loadMask: true,
        minHeight:150,
        tbar : me.createTopbar(),
        bbar : bbar,
        store : store,
        sm : sm ,
        colModel : colModel ,
        listeners : {
            rowclick :function(grid, rowIndex){
                var record = me.store.getAt(rowIndex),
                cur = me.issue,
                issue = me.issue = record.data;
                if(cur == undefined || (cur && (issue.id != cur.id))) {
                    me.fireEvent('issueselctionchange' , me , issue);
                }
            },
            rowcontextmenu : function(grid , index ,e){
                var m = createContextMenu();
                e.stopEvent();
                m.showAt(e.getPoint());
            } ,
            search : function(grid , cond) {
                grid.store.load();
            }
        }
    });

    Mes.issue.IssueGrid.superclass.initComponent.call(this , arguments);

    me.addEvents('issueselctionchange' , 'search');
},
createTopbar : function() {
    var me = this;

    function operateHandler() {
        var url = this.url , sm = me.getSelectionModel();
        if (!sm.hasSelection()) {
            Mes.Msg.alert('请选择事件!');
            return;
        }
        var list = [] , datas = sm.getSelections();
        Ext.each(datas , function(item){
            var d = item.data;
            list.push(d);
        });

        Ext.Ajax.request({
            url : url,
            params : {issues : list},
            success: function(response){
                var resp =  Ext.decode(response.responseText);
                if (resp.failure) {
                    Mes.Msg.error(resp.message);
                } else {
                    Mes.Msg.alert(resp.message , function(){
                        me.store.load();
                    });
                }
            }
        });
    }

    return new Ext.Toolbar({
        items : [
            {text : '查询' , handler : function() {
                win = new Mes.issue.QueryWindow({condition : me.condition});
                win.on('condition' , function(panel , condition) {
                    var cond = condition || {};

                    Ext.apply(cond , me.getQueryCondition());

                    me.condition = cond;

                    me.fireEvent('search' , me , cond);
                });
                win.show();
            }},
            ' ',
            { text: '刷新' , handler : function() {
                me.store.load();
            }},

            '-',
            {text : '确认' , url : 'issue!confirm.action' , handler : operateHandler},
            {text : '处理', url : 'issue!process.action' , handler : operateHandler},
            {text : '关闭', url : 'issue!close.action' , handler : operateHandler},
        ]
    });
},
getQueryCondition : function() {
    var cond = this.condition || {};
    cond.locationId = this.location;

    return cond;
}

});
[/code]
这个是我项目里的一个例子

[size=xx-large]晕,没那么复杂,重新加载load数据就可以了。
开始的时候ajax调用过一次,现在你再次调用一次。
data.reload();[/size]

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐