ExtJs_EditorGridExample

来源：互联网发布：app简约下载网页源码编辑：程序博客网时间：2024/04/26 16:39

HTML设置为：

在body中输入：

<select name="light" id="light" style="display: none;">
        <option value="Shade">Shade</option>
        <option value="Mostly Shady">Mostly Shady</option>
        <option value="Sun or Shade">Sun or Shade</option>
        <option value="Mostly Sunny">Mostly Sunny</option>
        <option value="Sunny">Sunny</option>
    </select>
    <div id="editor-grid"></div>

js代码为：

Ext.onReady(function(){
    //alert("调试成功");

    /*
    * 监听"Available"列：如有值，就格式其值。
    */
    function formatDate(value) {
        return value ? value.dateFormat('Y-m-d') : '';
        //return value ? value.dateFormat('M d,Y') : '';
    }

    //简化代码。(简称)
    var fm = Ext.form;

    //创建grid的列模式ColumnModel
    var cm = new Ext.grid.ColumnModel({
        defaults: {
            sortable: true
        },
        columns: [{
            id : 'common',
            header: 'Common Name',
            dataIndex: 'common',
            width: 220,
            editor: new fm.TextField({ //TextField编辑器
                allowBlank: false
            })
        },{
            header: 'Light',
            dataIndex: 'light',
            width: 130,
            editor: new fm.ComboBox({ //ComboBox编辑器
                typeAhead: true,
                triggerAction: 'all',
                transform: 'light',        //已有的select元素：前边声明的。
                lazyRender: true,
                listClass: 'x-combo-list-small'
            })
        },{
            header: 'Price',
            dataIndex: 'price',
            width: 70,
            align: 'right',
            renderer: 'usMoney',    //渲染的时候带上美元符。
            editor: new fm.NumberField({    //NumberField编辑器
                allowBlank: false,
                allowNegative: false,    //不允许为负数。
                maxValue: 100000
            })
        },{
            header: 'Available',
            dataIndex: 'availDate',
            width: 95,
            renderer: formatDate, //调用前头的formatDate函数。
            editor: new fm.DateField({    //DateField编辑器
                /*format: 'm/d/y', //时间格式
                minValue: '01/01/06',*/
                format: 'Y-m-d', //时间格式
                minValue: '2006-01-01',
                disabledDays: [0,6],    //不能选择周日周六
                disabledDaysText: 'Please are not available on the weekends'
            })
        },{
            header: '是否在户内?',
            dataIndex: 'indoor',
            width: 70,
            editor: new fm.Checkbox()
        }]
    });

    //创建store
    var store = new Ext.data.Store({
        autoDestroy: true, //当grid被销毁的时候store也自动销毁。
        url: 'EditorGridData.xml',    //通过http远程加载数据。不过好像有服务器才得。
        reader: new Ext.data.XmlReader({    //XmlReader解析xml数据格式
            record: 'plant', //xml中<plant>标签节点
            fields: [
                {name: 'common' ,type: 'string'},
                {name: 'botanical',type: 'string'},
                {name: 'light'},
                {name: 'price',type: 'float'},
                {name: 'availDate',mapping: 'availability',type: 'date',dateFormat: 'm/d/Y'},
                {name: 'indoor',type: 'bool'}
            ]
        }),
        sortInfo: {field: 'common',direction: 'ASC'}
    });

    //创建grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'editor-grid',
        width: 600,
        height: 300,
        autoExpandColumn: 'common',
        title: '可编辑表格EditoeGrid',
        frame: true,
        clicksToEdit: 1, //鼠标单击一次触发编辑。
        tbar: [    //顶部工具栏
            {
                text: 'AddPlant添加植物',
                handler: function(){
                    var plantRecord = grid.getStore().recordType;
                    var plant = new plantRecord({
                        common: '新的植物',
                        light: '背阴',
                        price: 3,
                        availDate: (new Date()).clearTime(),    //减去时间
                        indoor: false
                    });
                    grid.stopEditing();
                    store.insert(0,plant);
                    grid.startEditing(0,0);    //定位于第一行第一列单位格编辑。
                }
            }
        ]
    });

    // 加载数据
    store.load({
        callback: function(){
            Ext.Msg.show({ //显示MessageBox
                title: "store load callback",
                msg: '提醒：数据已经加载!',
                modal: false,
                icon: Ext.Msg.INFO,    //提醒图标
                buttons: Ext.Msg.OK    //按钮涉资
            });
        }
    });
});