Ext Grid 行变色，grid值修改，列变色，删除行。 -

huoyunshen888

浏览: 81930 次
性别:
来自: 西安

最近访客更多访客>>

wangning1125

taiji8497

qq_15167443

BlackGray

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ext Grid 行变色，grid值修改，列变色，删除行。

html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Grid Plugins Example</title>

    <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>

    <style type="text/css">
        body .x-panel {
            margin-bottom:20px;
        }
        .icon-grid {
            background-image:url(../shared/icons/fam/grid.png) !important;
        }
        #button-grid .x-panel-body {
            border:1px solid #99bbe8;
            border-top:0 none;
        }
        .add {
            background-image:url(../shared/icons/fam/add.gif) !important;
        }
        .option {
            background-image:url(../shared/icons/fam/plugin.gif) !important;
        }
        .remove {
            background-image:url(../shared/icons/fam/delete.gif) !important;
        }
        .save {
            background-image:url(../shared/icons/save.gif) !important;
        }
        .x-grid3-row-alt {
          background-image:none;
          background-color:#F4FAFF;
         }
    </style>
</head>
<body>
<div id="grid-div" style="margin-top:100px;" ></div>
</body>
<script>
Ext.onReady(function(){

    Ext.QuickTips.init();
    var xg = Ext.grid;

    // shared reader
    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'}
    ]);

    var sm2 = new xg.CheckboxSelectionModel({   // 全选
        listeners: {
            selectionchange: function(sm) {
                if (sm.getCount()) {
                    grid4.removeButton.enable();
                } 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([
            sm2,
            {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, css : 'background: #FF0000;', 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: sm2,

        viewConfig: {
            forceFit:true
        },
        columnLines: true,

        // inline buttons
        buttons: [{text:'Save',
                  handler:function(){
                      Ext.MessageBox.show({
                        title: '提示' ,
                        msg: '你点击了我！' ,
                        buttons: Ext.MessageBox.OK ,
                        fn: function(){Ext.MessageBox.alert("ssss","fffsss")} ,
                        icon: Ext.MessageBox.INFO
                    });
                }},{text:'Cancel'}],
        buttonAlign:'center',

        // inline toolbars
        tbar:[{
            text:'AddsssSomething',
            tooltip:'Add a new row',
            iconCls:'add',
            ref:'../addButton',
            handler:function(){
                    Ext.MessageBox.alert("测试","添加");
            }
        },'-',{
            text:'Removesss',
            tooltip:'Remove the selected item',
            iconCls:'remove',

            // Place a reference in the GridPanel
            ref: '../removeButton',
            handler:function(){
                    Ext.MessageBox.confirm("删除","您确定要删除吗?",showResult)
            },
            disabled: true
        }, '-', {
            text:'Moidfy',
            tooltip:'Modify the selected item',
            iconCls:'option',
            handler:function(){
                var cell=grid4.getSelectionModel().getSelections();
                if(cell==null||cell.length<1){
                    Ext.MessageBox.alert("温馨提示","请您选择要修改的选项");
                    return false;
                }
                Ext.MessageBox.confirm("修改","您确定要修改吗？",modifyResult)
            }
        }],
        stripeRows: true,   // 实现斑马线，行换色。
        width:600,
        height:300,
        frame:true,
        title:'Support for standard Panel features such as framing, buttons and toolbars',
        iconCls:'icon-grid',
        renderTo: 'grid-div'
    });

    function showResult(btn){
        var cell=grid4.getSelectionModel().getSelections();

        if(btn=="yes"){
            var store=grid4.getStore();
            for(var i=0;i<cell.length;i++){
                store.remove(cell[i])
            }
        }
    }

    function modifyResult(btn){
        var cell=grid4.getSelectionModel().getSelections();
        if(btn=="yes"){
            for(var i=0;i<cell.length;i++){
                cell[i].set('company',i);
                cell[i].commit();
            }
        }
    }
});

// Array data for the grids
Ext.grid.dummyData = [
    ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
    ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
    ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
    ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
    ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
    ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing']
];

</script>
</html>

说明：1，x-grid3-row-alt {
                    background-image:none;
                    background-color:#F4FAFF;
            }

         此代码是设置斑马线行颜色。

         2，css : 'background: #FF0000;'

          此代码是设置列颜色。

        3，var cell=grid4.getSelectionModel().getSelections();
             if(btn=="yes"){
                  for(var i=0;i<cell.length;i++){
                      cell[i].set('company',i);       // 修改company的值
                      cell[i].commit();
                  }
            }

           此代码是实现值修改。

        4， var store=grid4.getStore();     // 删除选中的行
                 for(var i=0;i<cell.length;i++){
                       store.remove(cell[i])
                 }

            此代码是实现删除选中的行。

分享到：