extjs的基本用法

                   关于json字符串 (jsonreader,gridpanel,viewport)

写在客户端的代码（把一个从客户端传过来的map对象转换成json字符）
<%
String jsonStr=null;//定义一个空的字符串
Map queryFilterMap = (Map)request.getAttribute("queryFilter");//从服务器上获得的一个map类型的对象
if(queryFilterMap != null){
        JSONObject jsonObject=new JSONObject();//生成一个JSONObject类型的对象
        Set keySet=queryFilterMap.keySet();//把一个map的对象转换成一个set集合对象
        for(Object key:keySet){
            Object value=queryFilterMap.get(key);//获得键值
            if(value!=null)
            jsonObject.put(key,value);//把值不为空的键，值
        }
       
        jsonStr=jsonObject.toString();
    }
%>

 把从数据库中获得的数据转换成一个json字符串(写在服务器上的代码)

   JSONArray arrayjson = new JSONArray();//定义一个jsonarray型的对象
       for (int i = 0; i < list1.size(); i++) {//list1是从数据库中获得所有对象（docbase）的集合
                    JSONObject object = new JSONObject();
                    Docbase docbase = (Docbase) list1.get(i);//list1中的一个对象
                    object.put("_id", docbase.getId());//把该对象的属性加到jsonobject的对象（object）中
                    object.put("createdate", docbase.getCreatedate());
                    object.put("categoryname", categoryname);
                    object.put("content", contentvalue);
                    object.put("subject", subject + iconnew);
                    object.put("objno", docbase.getObjno());
                    object.put("_parent", parentid);
                    object.put("creator", creator);
                    object.put("attachnum", docbase.getAttachnum());
                    object.put("docstatus", status);
                    object.put("docstatus", status);
                    object.put("modifydate", docbase.getModifydate());
                    object.put("modifytime", docbase.getModifytime());
                    arrayjson.add(object);
                }
                JSONObject jsonresult = new JSONObject();
                jsonresult.put("success", true);
                jsonresult.put("result", arrayjson);
                response.getWriter().print(jsonresult.toString());//把json字符串返回给客户端
                return;

写在客户端 显示出一个表格如图

写在页面上即客户端的代码

<script >

  Ext.LoadMask.prototype.msg='正在加载,请稍候...';
  var grid;
  var sm=new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn});

  Ext.onReady( function()
{

    // create the data store

    var store = new Ext.ux.maximgb.treegrid.AdjacencyListStore({//这是一个树装（tree）显示
     autoLoad : true,
     url: '<%=action%>',//获的json字符串的路径 如：action=/ServiceAction/com.eweaver.document.base.servlet.DocbaseAction?action=getdocbaseall在DocbaseAction中if(action.equals("getdocbaseall"))
{

  //从服务器上返回过来的json字符串
 json字符串的格式为：
   {"result":[{"attachnum":0,"docstatus":"正式","categoryname":"管理手册","_parent":null,"content":"摘要","objno":"0000046","modifydate":"2008-07-03","creator":"王红女","_id":"4028d80f1ade2106011ae8211a2a0fa9","createdate":"2008-07-03","subject":"test","_is_leaf":true,"modifytime":"16:54:20"}],"totalCount":1,"success":true}
}
     reader: new Ext.data.JsonReader({
     id: '_id',//这个绑定的是你在页面上单击一下 所返回个服务器端的值 但在服务器上获得值为request.getparamter("anode");
                                         获得的是你也页面上点击的值
     root: 'result',//绑定json字符串中的result
     totalProperty: 'totalCount',json字符串中的totalcount一般是绑定从数据库中查询的记录的总数
                                     fields:['_id','_parent','_is_leaf','createdate','subject','objno','creator','attachnum','docstatus','modifydate','content','categoryname','modifytime']
                }),//json字符串中的值 也是jsonarray中存放的列名（即数据库中的查询出来的列名）

        remoteSort: true（如果你要对整个数据排序而不是排序只对本页面有效时，写的一个条件（它里面封装好了sort这样的一个字段 你在服务器上通过request.getparameter("sort")来获得你要排序的字段 从而来达到整个数据排序 dir 这个字段来显示你是要升序还是降序 （根据你在客户端选择的结果）））

    });
  //store.setDefaultSort('id', 'desc');//设置数据的ID列默认的排序是降序
  
    // create the Grid

    grid = new Ext.ux.maximgb.treegrid.GridPanel({
      store: store,
      sm:sm,
      master_column_id : 'subject',
      columns: [               //表头
                         {id:'subject',header: "标题", width: 75,  dataIndex: 'subject'},
                           {header:"创建日期", width: 85, sortable: true, dataIndex: 'createdate'} ,
                           {header: "文档编号", width: 75,  dataIndex: 'objno'},
                           {header: "创建者", width: 75, dataIndex: 'creator'},
                           {header:"附件数", width: 75, dataIndex: 'attachnum'},
                           {header:"是否正式", width: 75, dataIndex: 'docstatus'},
                           {header:"分类名", width: 75, dataIndex: 'categoryname'},
                           {header:"摘要", width: 75, dataIndex: 'content'},
                           { header:"修改日期", width: 85, sortable: true,dataIndex:'modifydate'},
                           { header:"修改时间", width: 85, dataIndex:'modifytime'}                  ],
      stripeRows: true,
      autoExpandColumn: 'subject',
      loadMask: true,//页面加载时显示出来的一个加载....
      viewConfig: {
                           forceFit:true,
                           enableRowBody:true,
                           sortAscText:'升序',
                           sortDescText:'降序',
                           columnsText:'列定义',
                           getRowClass : function(record, rowIndex, p, store){
                               return 'x-grid3-row-collapsed';
                           }
                       },
      tbar: [Ext.get('divSearch').dom.innerHTML],
      bbar: new Ext.ux.maximgb.treegrid.PagingToolbar({
         store: store,
          displayInfo: true,
          beforePageText:"第",
          afterPageText:"页/{0}",
          firstText:"第一页",
          prevText:"上页",
          nextText:"下页",
          lastText:"最后页",
          refreshText:"刷新",
          displayMsg: '显示 {0} - {1}条记录 / {2}',
          emptyMsg: "没有结果返回",
          //paramNames:{start:"start",limit:"limit",paged:"paged"},其中limit 表示每一页显示的大小
          pageSize: <%=pageSize%>
      })
    });
    store.baseParams=<%=(jsonStr==null?"{}":jsonStr)%>//其中jsonstr是客户端上的一个json字符串 当发送到服务器上时，就换成了单个的参数 你在
服务器上可以这样接受 如：假如jsonstr中包含一个交 creator的参数 并且有值 在服务器端 可以通过request.getparameter("creator")获得creator的值

     store.load({params:{start:0, limit:<%=pageSize%>},paged:""}); 其中limit是分页中 每一页的大小

    var vp = new Ext.Viewport({//页面的布局显示 如果在代码中有此代码 则不要在页面上写一div层的id来绑定gridpanel中的属性renderto的值
     layout : 'fit',
     items : grid
    });
     grid.getSelectionModel().selectFirstRow();

});
 
                 }
    }
    }
            );
    sm.on('rowselect',function(selMdl,rowIndex,rec ){
        var reqid=rec.get('requestid');
        for(var i=0;i<selected.length;i++){
                    if(reqid ==selected[i]){
                         return;
                     }
                 }
        selected.push(reqid)
    }
            );
    sm.on('rowdeselect',function(selMdl,rowIndex,rec){
        var reqid=rec.get('requestid');
        for(var i=0;i<selected.length;i++){
                    if(reqid ==selected[i]){
                        selected.pop(reqid)
                         return;
                     }
                 }

    }
            );
     <%}%>
 
});
</script>