翻譯：frank/sp42 轉載請保留本頁資訊
Grid 面闆為 Ext JS 的大頭核心之一。它是一個通用性很強的元件，提供了一個簡單的方式來顯示、排序（sort）、分組（group）和編輯（edit）資料。
讓我們開始建立一個基本的 Grid 面闆。通過這個例子你可以學習到建立 Grid 的基本方法并讓 Grid 順利地跑起來。
首先，我們需要定義一個模型。模型隻是一種集合，表示一個資料類型的字段。讓我們定義一個模型，它代表着“使用者User”：
為了簡單起見，我們直接寫出 Store 其具體資料。而在真實的應用程式中，您通常會配置代理對象 Proxy，透過 Proxy 從伺服器加載資料回來。更多請參閱使用 Proxy 的資料指導。
目前我們有一 Model，Model 定義了我們的資料結構，然後将這幾個 Model 執行個體添加到 Store，接着就可以使用 Grid 面闆顯示資料：
相當簡單，是吧！我們剛剛建立的一個 Grid 面闆，以 body 元素為容器，然後我們告訴它從我們前面建立的 userStore 中取出其資料。最後，我們不但定義了 Grid 面闆将有哪些列，而且通過 dataIndex 屬性來配置每列從使用者領域模型中得到的資料。列“Name”指定其寬度為固定的 100px，把排序和隐藏列都禁用；列“email”預設是隐藏的（可通過其他列上面的菜單打開顯示該列）；列“Phone Number”配置了 flex 為 1，表示其寬度自适應 Grid 面闆寬度，即除總寬度後剩下的寬度。要檢視執行個體，請通路“簡單的Grid示例”。
its data from. The <code>Name</code> column has a fixed width of 100px and has sorting and hiding disabled, the<code>Email Address</code> column is hidden by default (it can be shown again by using the menu on any other column), and the<code>Phone Number</code>
您可以通過列的 renderer 配置項來改變資料的現實方式。渲染器本身是一個函數，根據傳入的原始值來進行修改，傳回的那個值就是現實的值。最常見的一些渲染器都包含在 Ext.util.Format，當然你可以自定義渲染器：
but you can write your own as well:
現場示範一下自定義渲染器渲染。
把 Grid 裡面的行進行分組很容易，首先要在 Store 身上指定 groupField 屬性：
更多 Store 的分組請參閱資料指導。接下來，我們将配置 Grid 的 Feature 配置項以便進行行分組：
<code></code>
<code></code>可參考一下 Grouping Grid Panel 線上例子。