ext学习_GridPanel(7)
1.GridPanel
ExtJS 中的表格功能非常强大,包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。
表格由类Ext.grid.GridPanel 定义,继承自Panel,其xtype 为grid。ExtJS 中,表格Grid必须包含列定义信息, 并指定表格的数据存储器Store 。表格的列信息由类Ext.grid.ColumnModel 定义、而表格的数据存储器由Ext.data.Store 定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore 等。
(1)、简单的表格的使用:
function showUrl(value){return "<a href='http://"+value+"' target='_blank'>"+value+"</a>";}Ext.onReady(function(){var store=new Ext.data.Store({url:"aa.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",renderer:showUrl}]);var grid = new Ext.grid.GridPanel({renderTo:"hello",title:"中国Java开源产品及团队",height:200,width:600,cm:colM,store:store,autoExpandColumn:2});store.load();});