ExtJS 4 grid 批次增删改查 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="ext-4.0.2/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ext-4.0.2/bootstrap.js" type="text/javascript"></script>
    <script src="ext-4.0.2/locale/ext-lang-zh_TW.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        Ext.onReady(function () {
            Ext.QuickTips.init();

            Ext.regModel('User', {
                fields: [
                    { name: 'id', type: 'int' },
                    { name: 'name', type: 'string' },
                    { name: 'age', type: 'int' }
                ],
                idProperty: 'id' //设置主键
            });

            var store = Ext.create('Ext.data.Store', {
                model: 'User',
                autoLoad: true,
                autoSync: false,
                proxy: {
                    type: 'ajax',
                    limitParam: '',
                    pageParam: '',
                    startParam: '',
                    api: {
                        read: 'readerHandler.ashx',
                        create: 'createHandler.ashx',
                        update: 'updateHandler.ashx',
                        destroy: 'deleteHandler.ashx'
                    },
                    reader: {
                        type: 'json',
                        successProperty: 'success',
                        root: 'data',
                        messageProperty: 'message'
                    },
                    writer: {
                        type: 'json',
                        writeAllFields: false,
                        root: 'data'
                    },
                    listeners: {
                        exception: function (proxy, response, operation) {
                            Ext.MessageBox.show({
                                title: 'REMOTE EXCEPTION',
                                msg: operation.getError(),
                                icon: Ext.MessageBox.ERROR,
                                buttons: Ext.Msg.OK
                            });
                        }
                    }
                }
            });

            var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            });

            var grid = Ext.create('Ext.grid.Panel', {
                store: store,
                columns: [{
                    header: 'ID',
                    dataIndex: 'id',
                    width: 70,
                    field: {
                        allowBlank: false
                    }
                }, {
                    header: 'Name',
                    dataIndex: 'name',
                    flex: 1,
                    field: { xtype: 'textfield' }
                }, {
                    header: 'Age',
                    dataIndex: 'age',
                    width: 130,
                    field: { xtype: 'textfield' }
                }, {
                    header: '操作',
                    xtype: 'actioncolumn',
                    items: [{
                        icon: 'image/delete16.png',
                        handler: function (grid, rowIndex, colIndex) {
                            var rec = grid.getStore().getAt(rowIndex);
                            store.remove(rec);
                        }
                    }]
                }],
                renderTo: Ext.getBody(),
                width: 600,
                height: 300,
                title: 'User',
                frame: true,
                tbar: [{
                    text: 'Save',
                    handler: function () {
                        store.sync();
                    }
                }, {
                    text: 'New',
                    handler: function () {
                        store.add(new User());
                    }
                }],
                plugins: [cellEditing]
            });
        });
    </script>
</head>
<body>
</body>
</html>
posted @ 2012-02-29 11:26  lzone6  阅读(2822)  评论(0)    收藏  举报