ExtJs_GridWithPlugins

HTML设置：

    head--->

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

     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
   
    <!-- JS文件的引用 -->
    <script type="text/javascript" src="../../examples/ux/RowExpander.js"></script>
    <script type="text/javascript" src="GridWithPlugins.js"></script>

    <style type="text/css">
        body .x-panel {
            margin-bottom:20px;
        }
        .icon-grid {
            background-image:url(../../examples/shared/icons/fam/grid.png) !important;
        }
        #button-grid .x-panel-body {
            border:1px solid #99bbe8;
            border-top:0 none;
        }
        .add {
            background-image:url(../../examples/shared/icons/fam/add.gif) !important;
        }
        .option {
            background-image:url(../../examples/shared/icons/fam/plugin.gif) !important;
        }
        .remove {
            background-image:url(../../examples/shared/icons/fam/delete.gif) !important;
        }
        .save {
            background-image:url(../../examples/shared/icons/save.gif) !important;
        }
    </style>

    JS--->

   

/**
 * 2011_04_15
 */
Ext.onReady(function() {

    Ext.QuickTips.init();
   
    var xg = Ext.grid;    //简称
   
    //ArrayReader
    var reader = new Ext.data.ArrayReader({},[
        {name: 'company'},
        {name: 'price', type: 'float'},
        {name: 'change', type: 'float'},
        {name: 'pctChange', type: 'float'},
        {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
        {name: 'industry'},
        {name: 'desc'}
    ]);
   
    //Grid1_rowExpander 行内容扩展
    var expander = new Ext.ux.grid.RowExpander({
        tpl: new Ext.Template(
            '<p><b>Company:</b> {company}</p><br>',
            '<p><b>Summany:</b> {desc}</p>'
        )   
    });
   
    //第一个grid：带有行内容扩展的。
    var grid1 = new xg.GridPanel({
        store: new Ext.data.Store({    //store配置参数
            reader: reader,
            data: xg.dummyData
        }),
        cm: new xg.ColumnModel({    //cm_ColumnModel模型的添加
            defaults: {
                width: 20,
                sortable: true
            },
            columns: [    //列
                expander,    //添加行内容扩展
                {id: 'company', header: 'Company', width: 40, dataIndex: 'company'},
                {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                {header: 'Change', dataIndex: 'change'},
                {header: '% Change', dataIdnex: 'pctChange'},
                {header: 'Last Updated', renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ]
        }),
        viewConfig: {    //grid视图的配置
            forceFit: true
        },
        width: 600,
        //height: 300,    //说明：当设置autoHeight属性时，height就起不到作用
        autoHeight: true,
        plugins: expander,    //扩展组件
        collapsible: true,
        animCollapse: false,
        title: 'GridWithExpanderRows',
        iconCls: 'icon-grid',
        renderTo: document.body
    });
   
    //grid2_CheckboxSelectionModel
    var sm = new xg.CheckboxSelectionModel();
    var grid2 = new xg.GridPanel({
        store: new Ext.data.Store({
            reader: reader,
            data: xg.dummyData
        }),
        cm: new xg.ColumnModel({
            defaults: {
                width: 120,
                sortable: true
            },
            columns: [
                sm,
                {id: 'company', header: 'Company', width: 200, dataIndex: 'company'},
                {header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                {header: 'Change', dataIndex: 'change'},
                {header: '% Change', dataIndex: 'pctChange'},
                {header: 'Last Updated', width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ]
        }),
        sm: sm,
        columnLines: true,    //true to add css for column separation lines. Default is false.
        width: 600,
        //height: 300,
        autoHeight: true,
        frame: true,
        title: 'GridWithCheckboxSelection',
        iconCls: 'icon-grid',
        renderTo: document.body
    });
   
    //grid3
    var grid3 = new xg.GridPanel({
        store: new Ext.data.Store({
            reader: reader,
            data: xg.dummyData
        }),
        cm: new xg.ColumnModel([
            new xg.RowNumberer(),
            {id: 'company', header: 'Company', width: 40, sortable: true, dataIndex: 'company'},
            {header: 'Price', width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: 'Change', width: 20, sortable: true, dataIndex: 'change'},
            {header: '% Change', width: 20, sortable: true,dataIndex: 'pctChange'},
            {header: 'Last Updated', width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ]),
        viewConfig: {
            forceFit: true
        },
        columnLines: true,    //为grid添加样式：方格
        width: 600,
        //height: 300,
        autoHeight: true,
        title: 'GridWithNumberedRows',
        iconCls: 'icon-grid',
        renderTo: document.body
    });//end of grid3
   
    //grid4
    var sm4 = new xg.CheckboxSelectionModel({
        listeners: {
            selectionchange: function(sm) {    //当行选择发送改变时触发
                if(sm.getCount()) {    //如果选择了行
                    grid4.removeButton.enable();    //显示removeButton
                } else {
                    grid4.removeButton.disable();
                }
            }
        }
    });
    var grid4 = new xg.GridPanel({
        id: 'button-grid',
        store: new Ext.data.Store({
            reader: reader,
            data: xg.dummyData
        }),
        cm: new xg.ColumnModel([
            sm4,
            {id: 'company', header: 'Company', width: 40, sortable: true, dataIndex: 'company'},
            {header: 'Price', width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: 'Change', width: 20, sortable: true, dataIndex: 'change'},
            {header: '% Change', width:20, sortable: true, dataIndex: 'pctChange'},
            {header: 'Last Updated', width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ]),
        sm: sm4,
        viewConfig: {
            forceFit: true
        },
        columnLines: true,
        buttons: [{text: 'Save'}, {text:'Cancel'}],
        buttonAlign: 'center',
        tbar: [{//顶部工具栏
            text: 'AddSomething',
            tooltip: 'Add a new row',    //提示信息
            iconCls: 'add',
            handler: function() {
                alert("这是添加按钮单击事件");
            }
        }, '-', {
            text: 'Options',
            tooltip: '选项',
            iconCls: 'option'
        }, '-', {
            text: 'Remove Something',
            tooltip: 'Remove the selected item',
            iconCls: 'remove',
            ref: '../../examples/removeButton',
            disabled: true    //开始时不可见
        }],
        width: 600,
        //height: 300,
        autoHeight: true,
        frame: true,
        title: 'Support for standard Panel features such as framing,buttons and toolbars',
        iconCls: 'icon-grid',
        renderTo: document.body
    });//end of grid4
});


//数据
Ext.grid.dummyData = [    //说明：至于描述列的数据，在后面添加。
    ['大唐人制造业1',99.98,0.11,0.23,'9/1 12:00am', '制造业'],
    ['大唐人制造业2',99.98,-0.11,-0.23,'9/1 12:00am', '制造业'],
    ['大唐人金融1',99.98,0.11,0.23,'9/1 12:00am', '金融'],
    ['大唐人金融2',99.98,-0.11,-0.23,'9/1 12:00am', '金融']
];

for(var i = 0;i < Ext.grid.dummyData.length; i++) {
    Ext.grid.dummyData[i].push(String.format("第{0}条描述信息!"))
}