使用ExtJS之Grid有感而發，貢獻示例給大家

iteye_9300發表於2010-03-17
JS

 

最近研究ExtJs覺得官方示例程式碼有些過多，尤其是Grid的使用程式碼有的幾乎沒有太大作用。本人在仔細研究後寫出瞭如下一個精簡的Grid示例，希望能給大家帶來點幫助 附帶圖片效果在附件中 首先，上官方下載資源包大家應該都很熟悉了

HTML頁面程式碼通常是這樣的 

 <html>
  <head>
    <title>My JSP 'index.jsp' ExtjsServlet page</title>
          <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="js/ext-all.js"></script>  
     <link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css" />  
      <script type="text/javascript" src="js/js.js" ></script>
  </head>
  <body>
   <input  type="button"  id="remove" value="remove" />
    <div id="grid"></div>
  </body>
</html>

 

第二步當然是核心了，我的JS檔案中的程式碼 

Ext.onReady(function(){
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        //設定網格大標題
        {header:'編號',dataIndex:'id',sortable:true,
            editor:new Ext.grid.GridEditor(new Ext.form.TextField(
            {
                allowBlank:false
            }))},
        {header:'價錢',dataIndex:'price',sortable:true,
        editor:new Ext.grid.GridEditor(new Ext.form.TextField(
            {
                allowBlank:false
            }))},
        {header:'性別',dataIndex:'sex',sortable:true,width:200,renderer:renderSex}
    ]);
    
    function renderSex(value)
    {
        if(value=='女')
        {
            return "<span style='color:red'>"+value+"</span>";
        }
        else
        {
            return "<img src='js/drop-yes.gif'/> <span style='color:greed'>"+value+"</span>";
        } 
    }
    
    var store= new Ext.data.Store({
        proxy:new Ext.data.HttpProxy({url:'ExtJs.do'}),//請求URL
        reader:new Ext.data.JsonReader({//從JSON中讀取的資料
                totalProperty:'totalProperty',//獲取總共的記錄數
                root:'root'//這個必須設定值否則網格里面沒有內容.值不一定是ROOT，其他的也行
            },[
                {name:'id'},
                {name:'price'},
                {name:'sex'}
            ])
        });
    //網格檢視設定
    var grid =  new Ext.grid.EditorGridPanel({
        title:'ORDER表查詢記錄顯示結果',
        renderTo:'grid',//這個引數必須設定否則顯示空白頁面
        store:store,
        cm:cm,
        loadMask:true,//這個對重新整理按鈕起作用
        width:400,
        height:200,
        //試圖下方分頁工具條顯示的內容
         bbar : new Ext.PagingToolbar({
              store : store,
              pageSize : 4,//每頁顯示的數目應該與limit的值保持一致
              displayInfo : true,//設定是否顯示資訊
              beforePageText:"第",
              afterPageText:"/ {0}頁",
              displayMsg : "當前記錄從 {0} - {1} 總 {2} 條記錄",
              emptyMsg : "沒有相關記錄!",
             })
    });
    //點選刪除按鈕可以移除當前檢視中的一項,但是重新整理後仍然是原來的樣子，並沒有刪除資料庫中的資料
    Ext.get('remove').on("click",function(){
         store.remove(store.getAt(1));
         grid.view.refresh();
    },this);
   //初始化引數，start表示從第幾條開始查詢，limit表示查詢多少條記錄,start與limit是提交請求時的請求引數，不可修改必須寫成這樣
    store.load({params:{start:0,limit:4}})；
});

  

以上的JS程式碼我採用的是配合JSON來替換值的方法做的，所以在處理業務邏輯時，比如在ACTION中的程式碼也顯得很重要 

 BaseForm bf=(BaseForm)form;
        Order1Dao dao=new Order1DaoImpl();
        System.out.println(bf.getStart()+"================================"+bf.getLimit());
        List<Order1> orders=dao.listall(bf.getStart(),bf.getLimit());
        int total=dao.getTotal();
        StringBuilder s= new StringBuilder("   {totalProperty:"+total+",pageNo:"+bf.getStart()+",pageSize:"+bf.getLimit()+",root:[");
        int i=0;
        for(Order1 order:orders){
            i++;
            s.append("{id:'"+order.getId()+"',price:'"+order.getPrice()+"',sex:'"+order.getSex()+"'}");
            if(i<5)
            {
                s.append(",");
            }
            
            
        }    
         s.append("]}");
         response.setContentType("text/html;charset=utf-8");
         response.getWriter().write(s.toString());

 

   怎麼樣？執行起來看看吧，是不是簡單許多呢？

相關文章