Ext3.4 表格基本操作

//
  1  var store=new Ext.data.Store({  
                storeId : 'mainGridStore',
                reader:new Ext.data.JsonReader(),  
                autoLoad:{params:{start:0,limit:20,orgTypeFlag:orgType}},
                pageSize:20,
                proxy:new Ext.data.HttpProxy({  
                  url:getPath()+'/UPCatalogManageServlet.json?fillDataIntoGrid=true', 
                  type:'ajax'
                }),
                listeners:{
                    "beforeload":function(store){
                        store.baseParams={
                                orgTypeFlag:orgType
                        }
                    }
                }
              });  
              
           /* var bottombar = new Ext.PagingToolbar({  
                pageSize : 20,
                store:store,  
                displayInfo: true,  
                displayMsg: '显示第 {0} - {1}条 共 {2} 条数据',  
                emptyMsg: "没有任何数据",  
                beforePageText:"第",  
                afterPageText:"/ {0}页",  
                firstText:"首页",  
                prevText:"上一页",  
                nextText:"下一页",  
                lastText:"尾页",  
                refreshText:"刷新",  
                items:[  
                    '-', {  
                    text: '生成Excel',  
                    handler : function() {
                        alert('生成excel，未做');
//                        exportExcel(formx);
                    }  
                }]  
              });  */
            
            bottombar = new Ext.ux.PagingToolbar({
                pageSize : 20,
                store : store,
                displayInfo : true,
                displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                emptyMsg : "没有记录",
                items : [ '-', {
                    text : '<font style="color:blue">生成EXCEL</font>',
                    handler : function(){
                        var catalogName = '';
                        var launchDept ='';
                        var status = Ext.getCmp('idMainPublishState').getValue();
                        if(hasClickedQuery){        //点击查询
                            catalogName = Ext.getCmp('idCatalogName').getValue();
                            launchDept = Ext.getCmp('idMainLaunchDept').getValue();
                        }
                        
                        var form = $("<form>");   //定义一个form表单
                        form.attr('style', 'display:none');   //在form表单中添加查询参数
                        form.attr('target', '');
                        form.attr('method', 'post');
                        form.attr('action', getPath() + '/UPCatalogManageServlet.json?exportExcel=true');
                        
                        var input1 = $('<input type="hidden" name="catalogName" value="'+catalogName+'" />');
                        var input2 = $('<input type="hidden" name="launchDept" value="'+launchDept+'" />');
                        var input3 = $('<input type="hidden" name="status" value="'+status+'" />');
                        
                        $('body').append(form);  //将表单放置在web中 
                        form.append(input1);   //将查询参数控件提交到表单上
                        form.append(input2);   //将查询参数控件提交到表单上
                        form.append(input3);   //将查询参数控件提交到表单上
                        form.submit().remove();
//                        if(isExcel=='1'){
//                           exportExcel(1,formx);
//                        }else{
//                           Ext.Msg.alert('提示','您没有权限导出数据！');
//                            }
                     }
                   } ]
            });
            
              var grid=new Ext.grid.GridPanel({  
//                title:'表格数据分页',  
                id:'idMainWinGrid',
                renderTo : 'grid',
                margins : '175 10 0 10',// 下右上左
                region : 'center',
                viewConfig : {
                    forceFit : true
                },
                layout : 'fit',
//                frame:true, 
                bbar:bottombar,
                store:store, 
                loadMask : true,
                bodyStyle : '90%',
                autoWidth : true,
                viewConfig : {
                    forceFit : true
                },
                columns:[
                 new Ext.grid.RowNumberer({
                     header : '序号',
                     width : 50,
                     dataIndex : 'no'
                     }),
                 {header:'pk',50,dataIndex:'pk',hidden:true,hideable:false},  
                 {header:'联合惩戒目录名称',dataIndex:'catalogName',sortable:true,renderer:function(data, cell, record, rowIndex, columnIndex, store){
                     return "<a style='color:blue;cursor:pointer' onclick='showItem()'>"+data+"</a>";
                 }},  
                 {header:'信息发起部门',80,dataIndex:'launchDept',sortable:true},  
                 {header:'联合执行部门',80,dataIndex:'executeDept',sortable:true},  
                 {header:'惩戒期限',60,dataIndex:'punishExpire',sortable:true,renderer:function(data, cell, record, rowIndex, columnIndex, store){
                     if(data=='null') return '';
                     else return data;
                 }},  
                 {header:'状态',30,dataIndex:'status',sortable:true,renderer:function(data, cell, record, rowIndex, columnIndex, store){
//                     cell.attr = "style=background-color:#F5C0C0";   //设置单元格的背景色  
                     if(data == 'D')
                         return '待发布';
                     if(data == 'A')
                         return '已发布';
                     if(data == 'Y')
                         return '已撤销';
                 }},  
//                 {header:'state',80,dataIndex:'state',sortable:true,hidden:true,hideable:false},
                 {
                     header : '操作',
                     dataIndex : 'operate',
                     sortable : true,
                     width : 80,
                     align : 'center',
                     renderer: function(value, a, record, rowIndex) {
                         var html_;
                         if(record['data']['status']=='D' || record['data']['status']=='Y'){
                             html_="<a style='color:blue;cursor:pointer' onclick='modify()'><U>修改</U></a>&nbsp&nbsp"
                                 +"<a  style='color:blue;cursor:pointer' onclick='publish()'><U>发布</U></a>&nbsp&nbsp"
                                 +"<a style='color:grey;'><U>撤销</U></a>";
                         }else{
                             html_="<a style='color:grey;'><U>修改</U></a>&nbsp&nbsp"
                                 +"<a  style='color:grey;'><U>发布</U></a>&nbsp&nbsp"
                                 +"<a style='color:blue;cursor:pointer' onclick='recede(this)'><U>撤销</U></a>";
                         }
                         var html = html_;
                             return html;
                      }
                 }
                ]  
              });  
            
              new Ext.Viewport({
                  // style : 'background-color:#E5F1F1',//设置背景色
                  layout : 'border',
                  items : [ grid ]
              });

• • 后台处理，包括查询的多种情况：表格初始化、有条件查询、翻页查询

@ResponseBody
    @RequestMapping(params = "fillDataIntoGrid")
    public void fillDataIntoGrid(HttpServletRequest request, HttpServletResponse response){
        List<Object> list = new ArrayList<Object>();
        Enumeration enumeraion = request.getParameterNames();
        Map<String,String[]>  map = request.getParameterMap();
        while(enumeraion.hasMoreElements())
            System.out.println(enumeraion.nextElement());
        
        
        int start = Integer.parseInt(Util.strNewFiltrate(request.getParameter("start")));
        int limit = Integer.parseInt(Util.strNewFiltrate(request.getParameter("limit")));
        String orgTypeFlag = Util.strNewFiltrate(request.getParameter("orgTypeFlag"));            //区分是工商用户还是非工商用户
        String catalogName = Util.strNewFiltrate(request.getParameter("catalogName"));
        String launchDept ="",status="";
        if(map.get("launchDept") == null || map.get("launchDept").length==1)
            launchDept =Util.strNewFiltrate(request.getParameter("launchDept"));
        else
            launchDept = map.get("launchDept")[1];//request.getParameter("launchDept");
        if(map.get("status") == null || map.get("status").length==1)
            status = Util.strNewFiltrate(request.getParameter("status"));            //这里，表单直接提交上来，通过getParameter获取不到
        else
            status =  map.get("status")[1];//request.getParameter("status");
        
        if(!orgTypeFlag.equals("1"))        //非工商用户只展示已发布
            status="A";
        list.add(start);
        list.add(limit);
        list.add(catalogName);
        list.add(launchDept);
        list.add(status);
        System.out.println(start);
        System.out.println(limit);
        String resultJson = uPCatalogManageService.fillDataIntoGrid(list.toArray());
        try {
            response.getWriter().write(resultJson);            //数据格式要带单引号
        } catch (IOException e) {
            throw new RuntimeException("response 写数据失败!");
        }
    }

• • 后台返回数据类型的格式

/**
     * 根据前台传的参数来确定sql，填充表格中的数据。参数可能是空、可能是null。
     */
    public String fillDataIntoGrid(Object [] params){
        int start =  (Integer) params[0];
        int limit = (Integer) params[1];
        int end = start+limit;
        String catalogName = params[2]+"";        //null值也转为了字符串“null”
        String launchDept = params[3]+"";
        String status = params[4]+"";
        List<Object> list = new ArrayList<Object>();
        list.add(start+1);
        list.add(end);
        list.add(catalogName);
        list.add(launchDept);
        list.add(status);
        List<Map<String,Object>> resultList = uPCatalogManageDao.fillDataIntoGrid(list.toArray());
        int size = uPCatalogManageDao.countAll();        //要得到正确的数，要保证这条sql的执行在上面sql的下面
        StringBuffer json = new StringBuffer();
        json.append("{");
        json.append("metaData:{");
        json.append(" totalProperty:'results',");
        json.append("root:'rows',");
        json.append("fields:[");
        json.append("{name:'pk',mapping:'pk',hidden:true,hideable:false},");
        json.append("{name:'catalogName',mapping:'catalogName'},");
        json.append("{name:'launchDept',mapping:'launchDept'},");
        json.append("{name:'executeDept',mapping:'executeDept'},");
        json.append("{name:'punishExpire',mapping:'punishExpire'},");
        json.append("{name:'status',mapping:'status'},");
        json.append("]},");
        json.append("results:"+size+",");
        json.append("rows:[");
        int length = resultList.size();
        for(int i=0;i<length;i++){
            json.append("{pk:'"+resultList.get(i).get("pk")+"',catalogName:'"+resultList.get(i).get("catalogName")+"',launchDept:'"+resultList.get(i).get("launchDept"));
            json.append("',executeDept:'"+resultList.get(i).get("executeDept")+"',punishExpire:'"+resultList.get(i).get("punishExpire")+"',status:'"+resultList.get(i).get("status"));
            json.append("'}");
            if(i!=length-1)
                json.append(",");
        }
        json.append("]}");
        return json.toString();
    }