第十六讲：ExtJS组件之GridPanel(上)

梦里梦外; 2022-04-05 10:49 284阅读 0赞

数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。

示例一：最简单的GridPanel。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady(function(){ var&nbsp;data = [ [1,"张三",20], [2,"李四",20], [3,"王五",20], [4,"赵六",20] ] &nbsp; var&nbsp;store = new&nbsp;Ext.data.SimpleStore({ data:data, fields:["id","name","age"] }); &nbsp; var&nbsp;gridPanel = new&nbsp;Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:400, height:400, store:store, columns:[ {header:"id",dataIndex:"id"}, {header:"姓名",dataIndex:"name"}, {header:"年龄",dataInde:"age"} ], autoExpandColumn:2// 默认自动扩展宽度的字段 }); }); &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

示例二：可排序的GridPanel。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady(function(){ var&nbsp;data = [ [1,"张三",43], [2,"李四",34], [3,"王五",26], [4,"赵六",67] ] &nbsp; var&nbsp;store = new&nbsp;Ext.data.SimpleStore({ data:data, fields:["id","name","age"] }); &nbsp; var&nbsp;gridPanel = new&nbsp;Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:400, height:400, store:store, columns:[ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true} ], autoExpandColumn:2// 默认自动扩展宽度的字段 }); }); &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

示例三：使用Ext.grid.ColumnModel来创建表格中列的定义信息。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady(function(){ var&nbsp;data = [ [1,"张三",43], [2,"李四",34], [3,"王五",26], [4,"赵六",67] ] &nbsp; var&nbsp;store = new&nbsp;Ext.data.SimpleStore({ data:data, fields:["id","name","age"] }); &nbsp; var&nbsp;colM = new&nbsp;Ext.grid.ColumnModel([ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true} ]); &nbsp; var&nbsp;gridPanel = new&nbsp;Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:400, height:400, store:store, cm:colM, autoExpandColumn:2// 默认自动扩展宽度的字段 }); }); &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

示例四：添加链接。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> function&nbsp;showUrl(value){ return&nbsp;"&lt;a href=http://"+value+"&gt;"+value+"&lt;/a&gt;"; } &nbsp; Ext.onReady(function(){ var&nbsp;data = [ [1,"张三",43,"www.ibeifeng.com"], [2,"李四",34,"www.ibeifeng.com"], [3,"王五",26,"www.ibeifeng.com"], [4,"赵六",67,"www.ibeifeng.com"] ] &nbsp; var&nbsp;store = new&nbsp;Ext.data.SimpleStore({ data:data, fields:["id","name","age","homePage"] }); &nbsp; var&nbsp;colM = new&nbsp;Ext.grid.ColumnModel([ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true}, {header:"个人主页",dataIndex:"homePage",renderer:showUrl} ]); &nbsp; var&nbsp;gridPanel = new&nbsp;Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:500, height:400, store:store, cm:colM, autoExpandColumn:3// 默认自动扩展宽度的字段 }); }); &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

示例五：使用JsonStore数据存储器。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> function&nbsp;showUrl(value){ return&nbsp;"&lt;a href=http://"+value+"&gt;"+value+"&lt;/a&gt;"; } &nbsp; Ext.onReady(function(){ var&nbsp;data = [ { id:1, name:"张三", age:43, homePage:"www.ibeifeng.com" }, { id:2, name:"李四", age:34, homePage:"www.ibeifeng.com" }, { id:3, name:"王五", age:26, homePage:"www.ibeifeng.com" }, { id:4, name:"赵六", age:67, homePage:"www.ibeifeng.com" } &nbsp; ] &nbsp; var&nbsp;store = new&nbsp;Ext.data.JsonStore({ data:data, fields:["id","name","age","homePage"] }); &nbsp; var&nbsp;colM = new&nbsp;Ext.grid.ColumnModel([ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true}, {header:"个人主页",dataIndex:"homePage",renderer:showUrl} ]); &nbsp; var&nbsp;gridPanel = new&nbsp;Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:500, height:400, store:store, cm:colM, autoExpandColumn:3// 默认自动扩展宽度的字段 }); }); &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

示例六：使用XML储存数据。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> &lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;dataset&gt; &lt;row&gt; &lt;id&gt;1&lt;/id&gt; &lt;name&gt;张三&lt;/name&gt; &lt;age&gt;43&lt;/age&gt; &lt;homePage&gt;www.ibeifeng.com&lt;/homePage&gt; &lt;/row&gt; &lt;row&gt; &lt;id&gt;2&lt;/id&gt; &lt;name&gt;李四&lt;/name&gt; &lt;age&gt;24&lt;/age&gt; &lt;homePage&gt;www.ibeifeng.com&lt;/homePage&gt; &lt;/row&gt; &lt;row&gt; &lt;id&gt;3&lt;/id&gt; &lt;name&gt;王五&lt;/name&gt; &lt;age&gt;45&lt;/age&gt; &lt;homePage&gt;www.ibeifeng.com&lt;/homePage&gt; &lt;/row&gt; &lt;row&gt; &lt;id&gt;4&lt;/id&gt; &lt;name&gt;赵六&lt;/name&gt; &lt;age&gt;12&lt;/age&gt; &lt;homePage&gt;www.ibeifeng.com&lt;/homePage&gt; &lt;/row&gt; &lt;/dataset&gt; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> function&nbsp;showUrl(value){ return&nbsp;"&lt;a href=http://"+value+" target='_blank'&gt;"+value+"&lt;/a&gt;"; } &nbsp; Ext.onReady(function(){ var&nbsp;store=new&nbsp;Ext.data.Store({ url:"data.xml", reader:new&nbsp;Ext.data.XmlReader({ record:"row"}, ["id","name","age","homePage"]) }); &nbsp; var&nbsp;colM = new&nbsp;Ext.grid.ColumnModel([ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true}, {header:"个人主页",dataIndex:"homePage",renderer:showUrl} ]); &nbsp; var&nbsp;gridPanel = new&nbsp;Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:500, height:400, store:store, cm:colM, autoExpandColumn:3// 默认自动扩展宽度的字段 }); &nbsp; store.load(); }); &nbsp; </td> 
 </tr> 
 </tbody> 
</table>