Sq_In
2011-08-17 16:08 阅读 275

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

8条回答 默认 最新

  • 已采纳
    mazzystar0 mazzystar0 2011-08-22 10:19

    重写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]

    点赞 评论 复制链接分享
  • myali88 myali88 2011-08-17 16:22

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

    点赞 评论 复制链接分享
  • HNsnopy HNsnopy 2011-08-17 16:23

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

    点赞 评论 复制链接分享
  • qq1988627 qq1988627 2011-08-17 17:17

    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();

    点赞 评论 复制链接分享
  • myali88 myali88 2011-08-17 17:24

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

    点赞 评论 复制链接分享
  • myali88 myali88 2011-08-18 09:54

    [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]
    这个是我项目里的一个例子

    点赞 评论 复制链接分享
  • qq1988627 qq1988627 2011-08-18 11:59
    点赞 评论 复制链接分享
  • cunyan cunyan 2011-08-23 08:52

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

    点赞 评论 复制链接分享

相关推荐