GridPanel详解

1、Ext.grid.GridPanel
     主要配置项:
          store:表格的数据集
          columns:表格列模式的配置数组,可自动创建ColumnModel列模式
          autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0
          stripeRows:表格是否隔行换色,默认为false
 
          cm、colModel:表格的列模式,渲染表格时必须设置该配置项
          sm、selModel:表格的选择模式,默认为Ext.grid.RowSelectionModel
          enableHdMenu:是否显示表头的上下文菜单,默认为true
          enableColumnHide:是否允许通过标题中的上下文菜单隐藏列,默认为true
          loadMask:是否在加载数据时显示遮罩效果,默认为false
          view:表格视图,默认为Ext.grid.GridView
          viewConfig:表格视图的配置对象
 
          autoExpandMax:自动扩充列的最大宽度,默认为1000
          autoExpandMin:自动扩充列的最小宽度,默认为50
          columnLines:是否显示列分割线,默认为false
          disableSelection:是否禁止行选择,默认为false
          enableColumnMove:是否允许拖放列,默认为true
          enableColumnResize:是否允许改变列宽,默认为true
          hideHeaders:是否隐藏表头,默认为false
          maxHeight:最大高度
          minColumnWidth:最小列宽,默认为25
          trackMouseOver:是否高亮显示鼠标所在的行,默认为true
 
      主要方法:
          getColumnModel():取得列模式
          getSelectionModel():取得选择模式
          getStore():取得数据集
          getView():取得视图对象
          reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel ):使用一个新的数据集和列模式重新配置表格组件

         

2、GridPanel用法     

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

 

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

 

  <!-- LIBS -->

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

  <!-- ENDLIBS -->

 

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

 

    <!-- Common Styles for the examples -->

    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />

    <style type="text/css">

     .x-drop-target-active {

       background-color: #D88;

     }

    </style>

</head>

<script>

 

Ext.onReady(function(){

 

       function change(val){

                     if(val>0){

                        return "<span style='color:green'>"+val+"</span>";

                     }else if(val<0){

                       return "<span style='color:red'>"+val+"</span>";

                     }

                       return "<a href='http://www.baidu.com' target='_blank'>"+val+"</a>";

        }

       function pctChange(val){

                    if(val>0){

                        return "<span style='color:green'>"+val+"%</span>";

                     }else if(val<0){

                        return "<span style='color:red'>"+val+"%</span>";

                     }

                       return val;

       }

       var myData = [

             ['3m Co', 71.72,0.02,0.03,'9/1 12:00am'],

             ['Alcoa Inc',29.01,0.42,1.47,'9/2 12:00am'],

             ['Altria Group Inc',52.55,0.01,0.02,'9/3 12:00am'],

             ['American Express Company',52.55,0.00,0.02,'9/4 12:00am'],

             ['American International Group,Inc.',64.13,-0.31,-0.49,'9/5 12:00am']

        ]

        var store = new Ext.data.ArrayStore({

             fields:[  {name:'company'},

                         {name:'price', type:'float'},

                         {name:'change', type:'float'},

                         {name:'pctChange',type:'float'},

                         {name:'lastChange',type:'date',dateFormat:'n/j h:ia'}

             ]

         });

         store.loadData(myData);

         var grid = new Ext.grid.GridPanel({

               store:store,

               columns:[

                          {id:'company',header:'供应商',width:160,sortable:true,dataIndex:'company'},

                          {header:'价格',width:75,sortable:true,renderer:'usMoney',dataIndex:'price'},

                          {header:'回扣',width:75,sortable:true,renderer:change,dataIndex:'change'},

                          {header:'回扣百分比',width:75,sortable:true,renderer:pctChange,dataIndex:'pctChange'}, 

                         {header:'日期',width:85,sortable:true,renderer:Ext.util.Format.dateRenderer('m/d/Y'),

dataIndex:'lastChange'}

               ],          

               stripeRow: true,

               autoExpandColumn:'company',

               autoHeight:true,

               width:600,

               title:'Array Grid',

               stateful:true,

               stateId:'grid'

               });

               grid.render('grid-example');

              });

</script>

<body>

          <div id="grid-example"></div>

</body>

</html>

 

你可能感兴趣的:(EXT GridPanel)