Ext2.0 學習系列(轉) ------- Ext Grid （一）

現在的JS框架已經越來越多了，新興的一些框架使用率上升非常快，因此不能落後啊！
    最近開始學習Ext2.0，據說功能非常強大，呵呵！無論是界面之美，還是功能之強，ext的表格控件都高居榜首。單選行，多選行，高亮顯示選中的行，推拽改變列寬度，按列排序，這些基本功能咱們就不提了。下面記錄我的學習點滴。

如何用三種基本類型的數據（Array, Json, Xml）來創建最簡單的表格
最簡單的表格由以下幾個元素組成：
1. 列定義(ColumnModel)
    首先我們知道表格肯定是二維的，橫着叫行，豎着叫列。跟設計數據庫，新建表一樣，我們要先設置這個表有幾列，每列叫啥名字，啥類型，咋顯示，這個表格的骨 架也就出來了。這裏我們建立一個四列的表格，第一列叫編號(id)，第二列叫性別(sex)，第三列叫名稱(name)，第四列叫描述(descn)。

    // 定義一個ColumnModel
    var cm = new Ext.grid.ColumnModel([
        {header:'編號',dataIndex:'id'},
        {header:'性別',dataIndex:'sex'},
        {header:'名稱',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);
    cm.defaultSortable = true;

其中，cm.defaultSortable = true;這句話表示默認爲可排序的表格，可以先不要去管它

2. 數據(Data)
    有了表格的骨架，現在我們要向裏邊添加數據了。這個數據當然也是二維了，下面分別介紹三種數據類型的使用方法：
(1) Array Data

    // ArrayData
    var data = [
        ['1','male','name1','descn1'],
        ['2','male','name1','descn2'],
        ['3','male','name3','descn3'],
        ['4','male','name4','descn4'],
        ['5','male','name5','descn5']
    ];

(2) Json Data

    //JsonData
    var people = { 
        'coders': [
            { 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': '[email protected]' },
            { 'id': '2', 'sex': 'male','name':'Hunter', 'descn': '[email protected]' },
            { 'id': '3', 'sex': 'female','name':'Harold', 'descn': '[email protected]' }
        ],
        'musicians': [
            { 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
            { 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
        ]
       }

(3) Xml Data
    Xml類型的數據一般是由一個.xml文件提供的，通過http請求的方式得到。

3. 數據的讀取
    定義好數據之後，我們需要將其轉換爲能夠爲grid所用的頁面，ext爲咱們提供了一個橋樑，Ext.data.Store，通過它我們可以把任何格式的 數據轉化成grid可以使用的形式，這樣就不需要爲每種數據格式寫一個grid的實現了。現在咱們就來看看這個Ext.data.Store是如何轉換三 種數據的。
(1) ArrayReader

    // ArrayReader
    var ds1 = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds1.load();

    ds要對應兩個部分：proxy和reader。proxy告訴我們從哪裏獲得數據，reader告訴我們如何解析這個數據。
    現在我們用的是Ext.data.MemoryProxy，它是專門用來解析js變量的。你可以看到，我們直接把data作爲參數傳遞進去了。 Ext.data.ArrayReader專門用來解析數組，並且告訴我們它會按照定義的規範進行解析，每行讀取三個數據，第一個叫id，第二個叫 sex，第三個叫name，第四個descn。這些是跟cm定義中的dataIndex對應的。這樣cm就知道哪列應該顯示那條數據了。
記得要執行一次ds.load()，對數據進行初始化。

(2) JsonReader

    // JsonReader
    var ds2 = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(people),
        reader: new Ext.data.JsonReader({root: 'coders'}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds2.load();

其中，root: 'colders'表示取數據的時候取的是'coders'這個節點的數據，而不是'musician'

(3) XmlReader

    // XmlReader
    var ds3 = new Ext.data.Store({
        url: 'test.xml',
        reader: new Ext.data.XmlReader({record: 'item'}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds3.load();

其中，record: 'item'表示每條記錄對應的節點是'item'，下面我會給出test.xml文件的內容，便於更好的理解

test.xml

<?xml version="1.0" encoding="UTF-8"?>
<dataset>
     <results>2</results>
     <item>
           <id>1</id>
           <sex>male</sex>
           <name>Taylor</name>
           <descn>Coder</descn>
     </item>
     <item>
           <id>2</id>
           <sex>female</sex>
           <name>Sophia</name>
           <descn>Civil Servant</descn>
    </item>
    <item>
           <id>3</id>
           <sex>male</sex>
           <name>Taylor</name>
           <descn>Coder</descn>
     </item>
     <item>
           <id>4</id>
           <sex>female</sex>
           <name>Sophia</name>
           <descn>Civil Servant</descn>
    </item>
    <item>
           <id>5</id>
           <sex>female</sex>
           <name>Sophia</name>
           <descn>Civil Servant</descn>
    </item>
</dataset>

4. 下面組裝數據，也分三個表格來顯示

    // 對應Array
    var grid1 = new Ext.grid.GridPanel({
        el: 'grid1',
        ds: ds1,
        cm: cm
    });
    grid1.render();
    
    // 對應Json
    var grid2 = new Ext.grid.GridPanel({
        el: 'grid2',
        ds: ds2,
        cm: cm
    });
    grid2.render();
    
    // 對應Xml
    var grid3 = new Ext.grid.GridPanel({
        renderTo: 'example-grid',
        ds: ds3,
        cm: cm,
        title: 'HelloWorld',
        autoHeight: 'true'
    })

其中，grid1和grid2中都有個el屬性以及render()方法，這個意思是，當執行該方法的時候，會自動去找頁面中id=xxx的標籤，然後在裏面插入表格；效果跟grid3中的方式是一樣的。

5. 頁面代碼（舉例）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Grid3 Example</title>

   <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- GC -->
     <!-- LIBS -->
     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
     <!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>

    <script type="text/javascript" src="testGrid.js"></script>
    <link rel="stylesheet" type="text/css" href="grid-examples.css" />

    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../examples.css" />

</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>TestGrid Example1</h1>
<p>Note that the js is not minified so it is readable. See <a href="testGrid.js">testGrid.js</a>.</p>

<div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="example-grid"></div>
</body>
</html>

其中的testGrid.js的內容就是上面的js代碼，注意要寫在
Ext.onReady(function(){})事件中哦！