ExtJs_Basic Array Grid Example

来源：互联网发布：linux nat表编辑：程序博客网时间：2024/05/12 02:09

征途：2011_4_3

Basic Array Grid Example的html页面代码为：

《html》
《head》
    《meta http-equiv="Content-Type" content="text/html; charset=utf-8" /》
    《*title》Basic Array Grid Example《/title》

    《!-- ** CSS ** --》
    《!-- base library --》
    《*link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /》
    《*style type=text/css》
        /* style rows on mouseover */
        .x-grid3-row-over .x-grid3-cell-inner {
            font-weight: bold;
        }

        /* style for the "buy" ActionColumn icon */
        .x-action-col-cell img.buy-col {
            height: 16px;
            width: 16px;
            background-image: url(../../examples/shared/icons/fam/accept.png);
        }

        /* style for the "alert" ActionColumn icon */
        .x-action-col-cell img.alert-col {
            height: 16px;
            width: 16px;
            background-image: url(../../examples/shared/icons/fam/error.png);
        }

    《/style》

    《!-- ** Javascript ** --》
    《!-- ExtJS library: base/adapter --》
    《*script type="text/javascript" src="../../adapter/ext/ext-base.js"》《/script》
    《!-- ExtJS library: all widgets --》
    《*script type="text/javascript" src="../../ext-all.js"》《/script》
    《!-- page specific --》
    《*script type="text/javascript" src="BasicArrayGrid.js"》《/script》

《/head》

《body》
    《h1》Stateful Array Grid Example《/h1》《br /》
    《h4》欢迎来到23魔鬼训练营《/h4》
    《div id="grid-example"》《/div》

《/body》
《/html》

js代码为：

/*
* Ext Js Library 3.0.0
* 例子参考开发包3.3.0
* time:2011_4_3
*/
Ext.onReady(function(){
    //初始化提示
    Ext.QuickTips.init();
    //状态
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    /**数据*/
    var myData = [
        ['大唐牛肉无限公司',71.72,0.02,-0.03,'9/1 12:00am'],
        ['大唐人才资源部',29.01,0.42,1.47, '9/1 12:00am'],
        ['大唐开发部',45.45, -0.73,1.63,'9/1 12:00am']
    ];

    /*
     * column renderer function:
     * change列渲染函数。
     */
    function change(val) {
        if (val > 0) {//值大于0
            return '<span style="color:green;">' + val + '</span>';
        } else if (val < 0) {//值小于0
            return '<span style="color:red;">' + val + '</span>';
        }

        return val;//值为0则直接返回
    };

     /*
     * column renderer function:
     * pctChange列渲染函数。
     */
    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;
    };

    /**data store*/
    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);//加载本地数据

    /**创建grid*/
    var grid = new Ext.grid.GridPanel({
        title: 'BasicArrayGrid',
        height: 250,
        width: 650,
        autoExpandColumn: 'company',    //列扩展
        store: store,
        stripeRows: true,
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid',
        columns: [
            {
                id       :'company',
                header   : 'Company',
                width    : 160,
                sortable : true,
                dataIndex: 'company'
            },
            {
                header   : 'Price',
                width    : 75,
                sortable : true,
                renderer : 'usMoney',
                dataIndex: 'price'
            },
            {
                header   : 'Change',
                width    : 75,
                sortable : true,
                renderer : change,
                dataIndex: 'change'
            },
            {
                header   : '% Change',
                width    : 75,
                sortable : true,
                renderer : pctChange,
                dataIndex: 'pctChange'
            },
            {
                header   : 'Last Updated',
                width    : 85,
                sortable : true,
                renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex: 'lastChange'
            },{
                header: '提货',
                dataIndex: 'change',
                width: 30,
                align: 'center',
                renderer: function(value) {
                    return "<div><img src='../img/delete.gif' class='deletebtnimg' style='width: 20px;height: 20px'/></div>";
                }
            },{
                header: '存货',
                dataIndex: 'change',
                width: 30,
                align: 'center',
                renderer: function(value) {
                    if(value > 0 || value == 0)
                    {
                        return "<div><img src='../img/accept.png' class='addbtnimg' style='width: 20px;height: 20px'/></div>";
                    }else if(value < 0)
                    {
                        return "<div><img src='../img/error.png' class='addbtnimg' style='width: 20px;height: 20px'/></div>";
                    }
                }
            }
            /*,
            {
                xtype: 'actioncolumn',    //开发包3.0.0不支持actioncolumn 故不能运行
                width: 50,
                items: [{
                    icon   : '../../examples/shared/icons/fam/delete.gif', // Use a URL in the icon config
                    tooltip: 'Sell stock',
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = store.getAt(rowIndex);
                        alert("Sell " + rec.get('company'));
                    }
                }, {
                    getClass: function(v, meta, rec) {          // Or return a class from a function
                        if (rec.get('change') < 0) {
                            this.items[1].tooltip = 'Do not buy!';
                            return 'alert-col';
                        } else {
                            this.items[1].tooltip = 'Buy stock';
                            return 'buy-col';
                        }
                    },
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = store.getAt(rowIndex);
                        alert("Buy " + rec.get('company'));
                    }
                }]
            }*/
        ]
    });
    //渲染grid到div中
    grid.render('grid-example');

    grid.on({
        cellclick: function(grid,rowIndex,colIndex,e){
            if(e.getTarget().className.indexOf("deletebtnimg") != -1){
                Ext.Msg.confirm("确认框","提货？",function(btn){
                    if(btn.toString().toUpperCase()=="YES")
                    {
                        alert("温馨提醒：恭喜您！货物提取成功！");
                    }
                });
            };

            if(e.getTarget().className.indexOf("addbtnimg") != -1){
                Ext.Msg.confirm("确认框","存货吗？",function(btn){
                        if(btn.toString().toUpperCase()=="YES")
                        {
                            alert("温馨提醒：恭喜您！存货成功！");
                        }
                });
            }

        }
    });

    /**grid监听*/
   /* this.getGrid().on({
            cellclick: function (g, r, c, e) {
                if (e.getTarget().className.indexOf("div类名") != -1) {
                    Msg.confirm("您确定要标记此记录为已完成吗？", function (btn) {
                        if (btn.toString() == "yes") {
                            var record = g.getStore().getAt(r);
                            //提交数据保存。
                            AppAjax.request({
                                url: {
                                    url: String.format(ACom.getUVAction("moduleName", "save"), record.get("id")),
                                    method: ACom.getUVMethod("moduleName", "save")
                                },
                                params: {
                                    "model.sfwc": true    //只提交修改的部分。
                                },
                                scope: this,
                                success: function (data) {
                                    g.refreshGrid();
                                }
                            });
                        }
                    });
                }
            }
    });*/
});