extjs-EditorGridPanel学习

最新推荐文章于 2025-08-21 18:01:40 发布

原创最新推荐文章于 2025-08-21 18:01:40 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json

extjs 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用 ExtJS 构建具备增删改功能的可编辑 Grid，并实现数据有效性验证及与服务器交互。文章详细展示了如何配置 Store、ColumnModel 和 EditorGridPanel 等组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重要的方法：grid.getStore().getModifiedRecords();获得编辑后的结果

text: "增加",

handler: function() {

var Plant = store.recordType;

var p = new Plant({

common: 'New Plant 1',

light: 'Mostly Shade',

price: 0,

availDate: (new Date()).clearTime(),

indoor: false

});

grid.stopEditing();

store.insert(0, p); //插入第一行

grid.startEditing(0, 0);

Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';  
Ext.QuickTips.init();  
Ext.onReady(function() {  
    //Ext.Msg.alert("sf0", "sdf");  
    //格式化日期  
    function formatDate(value) {  
        return value ? value.dateFormat('Y年m月d日') : '';  
    }  
  
    // 别名  
    var fm = Ext.form;  
  
    //checkbox选择模型  
    var sm = new Ext.grid.CheckboxSelectionModel({ checkOnly: true });  
  
    //构造一个只能包含checkbox的列  
    var checkColumn = new Ext.grid.CheckColumn({  
        header: 'Indoor?', 
        dataIndex: 'indoor',  
        width: 55  
    });  
  
    // 构造ColumnModel  
    var cm = new Ext.grid.ColumnModel({  
        columns: [  
        sm,  
        {  
            id: 'common',  
            header: 'Common Name',  
            dataIndex: 'common',  
            width: 220,  
            // 使用上边定义好的别名  
            editor: new fm.TextField({  
                allowBlank: false  
            })  
        }, {  
            header: 'Light',  
            dataIndex: 'light',  
            width: 130,  
            editor: new fm.ComboBox({  
                typeAhead: true,  
                triggerAction: 'all',  
                transform: 'light',  
                lazyRender: true,  
                listClass: 'x-combo-list-small'  
            })  
        }, {  
            header: 'Price',  
            dataIndex: 'price',  
            width: 70,  
            align: 'right',  
            renderer: 'usMoney',  
            editor: new fm.NumberField({  
                allowBlank: false,  
                allowNegative: false,  
                maxValue: 100000  
            })  
        }, {  
            header: 'Available',  
            dataIndex: 'availDate',  
            width: 95,  
            renderer: formatDate,  
            editor: new fm.DateField({  
                format: 'Y年m月d日',  
                minValue: '01/01/06',  
                disabledDays: [0, 6],  
                disabledDaysText: 'Plants are not available on the weekends'  
            })  
        },
        checkColumn  
    ],  
        defaults: {  
            sortable: true  
        }  
    });  
  
  
    // 构造一个Store对象  
    var store = new Ext.data.Store({  
  
        url: 'plants.xml',  
  
        reader: new Ext.data.XmlReader(  
            {  
              record:'plant' 
            },  
  
            [  
                { 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({  
        //sm: new Ext.grid.RowSelectionModel({ singleSelect: false }),  
        sm: sm,  
        store: store,  
        cm: cm,  
        renderTo: 'grid',  
        width: 600,  
        height: 300,  
        autoExpandColumn: 'common',  
        title: 'Edit Plants?',  
        frame: true,  
        plugins: checkColumn,  
        clicksToEdit: 1,  //默认2次双击才触发编辑框事件
        listeners: {  
            "afterEdit": {  
                fn: afterEdit,  
                scope: this  
            }  
        }, 
    	bbar: new Ext.PagingToolbar({
			pageSize : 5,
			store : store,
			firstText : '第一页',
			nextText : '下一页',
			prevText : '上一页',
			refreshText : '刷新',
			lastText : '最后一页',
			beforePageText : '当前',
			afterPageText : '页/共{0}页',
			displayInfo : true,
			displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
		
			emptyMsg : "没有记录"
			
		}),
        tbar: [{  
            text: "保存",  
            handler: function() { 
        	 var  mod=grid.getStore().getModifiedRecords();
        	 for ( var i = 0; i < mod.length; i++) {
     			alert(mod[i].data.common);
     		}
                var mod = store.modified;  
               // updateData(mod);  
            }  
        },  
            '-',  
            {  
                text: "增加",  
                handler: function() {  
                    var Plant = store.recordType;  
                    var p = new Plant({  
                        common: 'New Plant 1',  
                        light: 'Mostly Shade',  
                        price: 0,  
                        availDate: (new Date()).clearTime(),  
                        indoor: false  
                    });  
                    grid.stopEditing();  
                    store.insert(0, p);  
                    grid.startEditing(0, 0);  
                }  
            },  
            " ",  
            {  
                text: "删除",  
                handler: function() {  
                    var selModel = grid.getSelectionModel();  
                    if (selModel.hasSelection()) {  
                        Ext.Msg.confirm("警告", "确定要删除吗？", function(button) {  
                            if (button == "yes") {  
                                var selections = selModel.getSelections();  
                                Ext.each(selections, function(item) {  
                                    store.remove(item);  
                                   // store.removed.push(item);  
                                });  
                            }  
                           // alert(store.removed.length);  
                        });  
                    }  
                    else {  
                        Ext.Msg.alert("错误", "没有任何行被选中，无法进行删除操作！");  
                    }  
                }  
            }  
                ]  
    });  
  
    // 触发数据的加载  
    store.load();  
  
    //发送数据到服务器端进行更新  
//    function updateData(mod) {  
//        var json = [];  
//        Ext.each(mod, function(item) {  
//            json.push(item.data);  
//        });  
//        if (json.length >= 0) {  
//            Ext.Ajax.request({  
//                url: "EditGrid.aspx",  
//                params: { data: Ext.util.JSON.encode(json) },  
//                method: "POST",  
//                success: function(response) {  
//                    Ext.Msg.alert("信息", "数据更新成功！", function() { store.reload(); });  
//                },  
//                failure: function(response) {  
//                    Ext.Msg.alert("警告", "数据更新失败，请稍后再试！");  
//                }  
//            });  
//        }  
//        else {  
//            Ext.Msg.alert("警告", "没有任何需要更新的数据！");  
//        }  
//    }  
  
    //编辑后触发的事件，可在此进行数据有效性的验证  
    function afterEdit(e) {  
        if (e.field == 'common') {  
            if (e.value == '123') {  
                Ext.Msg.alert("错误", "大笨是人物不是植物", function() { grid.startEditing(e.row, e.column) });  
            }  
        }  
    }  
});