Ext表格控件和樹控件

1. 表格控件

  1.2 可編輯的表格 EditorGridPannel

2與服務器交互

3. 數據存儲 Store

  3.1 存放數據的類 Record

  3.2 Store 數據存儲器

  3.3 DateReader 數據讀取器

4 DataProxy 數據代理

5. 樹控件 TreePanel

  5.2 事件處理

  5.3 樹加載器 TreeLoader

  5.4 自定義 TreeLoader

1. 表格控件

1.1基本表格 GridPanel

 

ExtJS中的表格功能非常強大，包括了排序、緩存、拖動、隱藏某一列、自動顯示行號、列彙總、單元格編輯

等實用功能。
  表格由類Ext.grid.GridPanel定義，繼承自Panel，其xtype爲grid。ExtJS中，表格Grid必須包含
列定義信息，並指定表格的數據存儲器Store。表格的列信息由類Ext,grid.ColumnModel定義，而表格的

數據存儲器由Ext.data.Store 定義， 數據存儲器根據解析的數據不同分爲JsonStore、SimpleStore、GroupinStore等。我們看一個簡單的使用表格控件的代碼：

Ext.onReady(function(){
  var data=[
    [1, '任務管理系統', '3D','www.renwu.com'],
    [2, 'Blog系統', 'BJT','www.blog.org'],
    [3, 'Ext管理系統', '3d','www.Extrw.com'],
    [4, '中流網', 'ZLW','www.zlweb.cn']
  ];
  var store=new Ext.data.SimpleStore({
    data:data,
    fields:["id","name","organization","homepage"]
  });
  var grid = new Ext.grid.GridPanel({
    renderTo:"hello",
    title:"NetJava表格測試",
    height:150,
    width:600,
    columns:[{header:"項目名稱",dataIndex:"name"},
          {header:"開發團隊",dataIndex:"organization"},
          {header:"網址",dataIndex:"homepage"}],
    store:store,
    autoExpandColumn:2
});

運行上面的代碼，可以得到一個簡單的表格如下：

  上面的代碼中，第一行“var data-…”用來定義表格中要顯示的數據，這是一個[][]二維數組；第二行”var
store=…”用來創建一個數據存儲，這是GridPannel需要使用配置屬性，數據存儲器Store負責把各種各樣
的數據（如二維數組、JSon對象數組、XML文本）等轉換成ExtJS的數據記錄集Record，關於數據存儲器
Store我們將會在下一節中作專門講解。第三行”var grid=new Ext.grid.GridPannel(…)”負責創建一個表格，
表格包含的列由columns配置屬性來描述，columns是一個數組，每一行數據元素描述表格的一列信息。
表格的列信息包含列頭顯示的文本（header）、列對應的記錄集字段（dataIndex）、列是否可排序
（sorable）、列的渲染函數（renderer）、格式化信息（format）等，在上面的列中只用到了header和
dataIndex.

下面我們再來看看錶格控件的其它一些特性，修改一下上面的代碼，內容如下：

function showUrl(value){
  return "<a href="+value+">"+value+"</a>";
}
Ext.onReady(function(){
  var data=[
    [1, '任務管理系統', '3D','http://www.renwu.com'],
    [2, 'Blog系統', 'BJT','http://www.blog.org'],
    [3, 'Ext管理系統', '3d','http://www.Extrw.com'],
    [4, '中流網', 'ZLW','http://www.zlweb.cn']
  ];
  var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
  var colM=new Ext.grid.ColumnModel([
      {header:"項目名稱",dataIndex:"name",sortable:true},
      {header:"開發團隊",dataIndex:"organization",sortable:true},
      {header:"網址",dataIndex:"homepage",sortable:true,renderer:showUrl}]);
  var grid = new Ext.grid.GridPanel({
  renderTo:"hello",
  title:"NetJava表格測試",
  height:150,
  width:600,
  cm:colM,
  store:store,
  autoExpandColumn:2
});

上面的代碼直接使用Ext.grid.ColumnModel來創建表格的列定義信息，在各列中我們添加了sortable爲
true的屬性，表示該列可以排序，另外，買一列的數據渲染方式還可以自己定義，比如上面的代碼中，
我們希望用戶在表格中點擊網址可以打開這些團隊的網站，也就是給網址這一列添加了超連接，運行效
果如下：

在定義“網址”的時候加上renderer屬性：renderer:showUrl。showUrl是一個自定義的函數，內容是根
據傳入的value參數返回一個包含<a>標籤的html片段。自定義的列渲染函數可以實現在單元格中顯示自
己所需要的各種信息，只要是瀏覽器支持的html都可以。

除了二維數組以外，表格還能顯示其它格式的數據嗎，這個是當然的，下面我們來看個例子，將數
據定義爲以下格式：

var data=[{id:1,
  name:'任務管理系統',
  organization:'3D',
  homepage:'http://www.renwu.com'},
  {id:2,
  name:'Blog系統',
  organization:'BJT',
  homepage:'http://www.renwu.com'},
  {id:3,
  name:'Ext管理系統',
  organization:'3D',
  homepage:'http://www.Extrw.com'},
  {id:4,
  name:'中流網',
  organization:'ZLW',
  homepage:'http://www.zlweb.cn'}
];

也就是說數據變成了一維數組，數組中的每一個元素是一個對象，這些對象包含"id"，
"name"，"organization"，"homepage" 等屬性，要讓表格上顯示上面的數據，只要將存儲器store 改爲
Ext.data.JsonStore即可，如下：

var store=new Ext.data.JsonStore({data:data,fields:["id","name","organization","homepage"]});

上面的代碼執行的結果與前面的一樣。另外，表格同樣能顯示xml格式的數據，將上面的數據存放成
store.xml文件，如下：

<?xml version="1.0" encoding="UTF-8"?>
  <database>
    <row>
      <id>1</id>
      <name>任務管理系統</name>
      <organization>3D</organization>
      <homepage>http://www.renwu.com</homepage>
    </row>
    <row>
      <id>2</id>
      <name>Blog系統</name>
      <organization>BJT</organization>
      <homepage>http://www.renwu.com</homepage>
    </row>
    <row>
      <id>3</id>
      <name>Ext管理系統</name>
      <organization>3D</organization>
      <homepage>http://www.Extrw.com</homepage>
    </row>
    <row>
      <id>4</id>
      <name>中流網</name>
      <organization>ZLW</organization>
      <homepage>http://www.zlweb.cn</homepage>
    </row>
</database>

將js代碼數據存儲器部分改爲：

function showUrl(value){
  return "<a href='"+value+"' target='_blank'>"+value+"</a>";
}
Ext.onReady(function(){
  var store=new Ext.data.Store({
    url:"tab.xml",
    reader:new Ext.data.XmlReader({record:"row"},["id","name","organization","homepage"])
  });
  var colM=new Ext.grid.ColumnModel([
    {header:"項目名稱",dataIndex:"name",sortable:true},
    {header:"開發團隊",dataIndex:"organization",sortable:true},
    {header:"網址",dataIndex:"homepage",sortable:true,renderer:showUrl}
  ]);
  var grid = new Ext.grid.GridPanel({
    renderTo:"hello",
    title:"NetJava表格測試",
    height:150,
    width:600,
    cm:colM,
    store:store,
    autoExpandColumn:2
  });
  store.load();

});

Store.load()是用來加載數據，執行上面的代碼產生的表格與前面的完全一樣。