隨筆 - 55  文章 - 187  trackbacks - 0
          <2008年3月>
          2425262728291
          2345678
          9101112131415
          16171819202122
          23242526272829
          303112345

          常用鏈接

          留言簿(12)

          隨筆分類

          隨筆檔案

          groovy

          搜索

          •  

          最新評論

          閱讀排行榜

          評論排行榜

          頁面代碼:
           1<html>
           2    <head>
           3        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
           4        <title>Ext Reader</title>
           5        <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
           6        <script type="text/javascript" src="../adapter/ext/ext-base.js">
           7        
          </script>
           8        <script type="text/javascript" src="../ext-all.js">
           9        
          </script>
          10        <script type="text/javascript" src="./test.js">
          11        
          </script>
          12    </head>
          13    <body>
          14        <div id="main">
          15        </div>
          16    </body>
          17</html>

          JavaScript代碼:
          第一種實現,簡單表格
           1/**
           2 * @author hasee
           3 */

           4Ext.onReady(function(){
           5
           6    //json數據
           7    var data = {
           8        'data': [{
           9            'id': 1,
          10            'name': 'david',
          11            'age': 25
          12        }
          {
          13            'id': 2,
          14            'name': 'marry',
          15            'age': 21
          16        }
          {
          17            'id': 3,
          18            'name': 'leo',
          19            'age': 19
          20        }
          ]
          21    }

          22    
          23    //表格控件
          24    var grid = new Ext.grid.GridPanel({
          25        renderTo: "main",
          26        title: "表格",
          27        columns: [{
          28            header: "ID",
          29            dataIndex: "id",
          30            sortable: true
          31        }
          {
          32            header: "姓名",
          33            dataIndex: "name",
          34            sortable: true
          35        }
          {
          36            header: "年齡",
          37            dataIndex: "age",
          38            sortable: true
          39        }
          ],
          40        ds: new Ext.data.JsonStore({
          41            data: data,
          42            autoLoad: true,
          43            root: 'data',
          44            fields: ['id', 'name', 'age']
          45        }
          ),
          46        autoExpandColumn: 2
          47    }
          )
          48}
          );
          49
          第二種實現,添加checkbox,右鍵菜單:
           1/**
           2 * @author hasee
           3 */

           4Ext.onReady(function(){
           5
           6    //json數據
           7    var data = {
           8        'data': [{
           9            'id': 1,
          10            'name': 'david',
          11            'age': 25
          12        }
          {
          13            'id': 2,
          14            'name': 'marry',
          15            'age': 21
          16        }
          {
          17            'id': 3,
          18            'name': 'leo',
          19            'age': 19
          20        }
          ]
          21    }

          22    
          23    //表格控件
          24    var sm = new Ext.grid.CheckboxSelectionModel();
          25    var grid = new Ext.grid.GridPanel({
          26        renderTo: "main",
          27        title: "表格",
          28        columns: [sm, {
          29            header: "ID",
          30            dataIndex: "id",
          31            sortable: true
          32        }
          {
          33            header: "姓名",
          34            dataIndex: "name",
          35            sortable: true
          36        }
          {
          37            header: "年齡",
          38            dataIndex: "age",
          39            sortable: true
          40        }
          ],
          41        ds: new Ext.data.Store({
          42            proxy: new Ext.data.MemoryProxy(data),
          43            reader: new Ext.data.JsonReader({
          44                root: 'data'
          45            }
          , [{
          46                name: 'id'
          47            }
          {
          48                name: 'name'
          49            }
          {
          50                name: 'age'
          51            }
          ]),
          52            autoLoad: true//一定要寫,否則無數據
          53        }
          ),
          54        sm: sm,//多選框checkbox
          55        autoExpandColumn: 3,//自動擴展最后一列
          56        autoHeight: true//一定要寫,否則顯示的數據會少一行
          57    }
          )
          58    
          59    var currentRowNumber;//保存當前行號,用戶右鍵菜單。
          60    grid.addListener('rowcontextmenu', rightClickFn);//為右鍵菜單添加事件監聽器
          61    //顯示右鍵菜單
          62    function rightClickFn(grid, rowindex, e){
          63        e.preventDefault();
          64        rightClickMenu.showAt(e.getXY());
          65        currentRowNumber = rowindex;
          66    }

          67    //右鍵菜單
          68    var rightClickMenu = new Ext.menu.Menu({
          69        id: 'rightClickMenu',
          70        items: [{
          71            id: 'menuContent1',
          72            handler: menuContent1Fn,
          73            text: '顯示行號'
          74        }
          {
          75            id: 'menuContent2',
          76            handler: menuContent2Fn,
          77            text: '右鍵菜單2'
          78        }
          ]
          79    }
          )
          80    function menuContent1Fn(){
          81        alert('行號為' + currentRowNumber);
          82    }

          83    function menuContent2Fn(){
          84        alert('右鍵菜單2');
          85    }

          86    
          87}
          );
          88
          posted on 2008-03-07 16:11 大衛 閱讀(5107) 評論(1)  編輯  收藏 所屬分類: JavaScript

          FeedBack:
          # re: Ext2.0的表格小例子 2009-07-30 09:44 adsfsdf
          你好 從數據庫里查詢出來的數據如何顯示在grid里面呢 能否給我個簡單的小例子 shenyejingling@126.com 先謝謝啦 嘿嘿~  回復  更多評論
            
          主站蜘蛛池模板: 延川县| 苏尼特右旗| 本溪市| 广宁县| 杭州市| 上虞市| 黄大仙区| 锦屏县| 华安县| 岗巴县| 乌兰察布市| 同德县| 绥滨县| 荆州市| 肥乡县| 诏安县| 资源县| 喀喇沁旗| 彩票| 瑞金市| 舟山市| 五常市| 黑山县| 会理县| 双桥区| 沙洋县| 商丘市| 靖江市| 昆明市| 临邑县| 平原县| 罗城| 炉霍县| 霍州市| 仁化县| 交城县| 保靖县| 新巴尔虎右旗| 马边| 清徐县| 青河县|