Extjs EditorGridPanel的使用.(数据从后台读出) asp.net

根据官方示例改写

<script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>
<script src="ext-3.2.0/examples/ux/CheckColumn.js" type="text/javascript"></script>

//引用CheckColumn.js文件是因为实例化checkColumn的需要,否则会报checkColumn对象不存在的错误.
<script type="text/javascript">
    Ext.onReady(function() {
       
        var checkColumn = new Ext.grid.CheckColumn({
            header: 'student?',
            dataIndex: 'student'
        });

        var cm = new Ext.grid.ColumnModel({
            defaults: {
                sortable: true
            },
            columns: [{
                id: 'name',
                header: '个人姓名',
                dataIndex: 'name',
                width: 90,
                editor: new Ext.form.TextField({
                    allowBlank: false
                })
            }, {
                id: 'passwd',
                header: '个人密码',
                dataIndex: 'passwd',
                width: 90,
                editor: new Ext.form.TextField({
                    allowBlank: false
                })
            }, {
                id: 'gender',
                header: '个人性别',
                dataIndex: 'gender',
                width: 90,
                editor: new Ext.form.TextField({
                    allowBlank: false
                })
            }, {
                id: 'roleid',
                header: '权限编号',
                dataIndex: 'roleid',
                width: 90,
                editor: new Ext.form.TextField({
                    allowBlank: false
                })
            }, {
                id: 'stateid',
                header: '状态编号',
                dataIndex: 'stateid',
                width: 90,
                editor: new Ext.form.TextField({
                    allowBlank: false
                })
            }, {
                header: '身份',
                dataIndex: 'shenfen',
                width: 130,
                editor: new Ext.form.ComboBox({
                    typeAhead: true,
                    triggerAction: 'all',
                    transform: 'shenfeninfo',
                    lazyRender: true
                })
            }, {
                header: '余额',
                dataIndex: 'balance',
                width: 130,
                editor: new Ext.form.NumberField({
                    allowBlank: false,
                    allowNegative: false,
                    maxValue: 1000
                })
            }, {
                header: '出生年月',
                dataIndex: 'time',
                width: 95,
                editor: new Ext.form.DateField({
                    format: 'm/d/y',
                    minValue: '01/01/1988',
                    //一个禁用的星期数组
                    disabledDays: [0, 6],
                    //禁用星期上提示的文字
                    disabledDaysText: '这些是不可选择的时间'
                })
            },checkColumn]
        });

        var store = new Ext.data.Store({
            autoDestory: true,
            url: 'userinfoxml.ashx',
            reader: new Ext.data.XmlReader({
                record: 'row',
                fields: [
                  { name: 'name', type: 'string' },
                  { name: 'passwd', type: 'string' },
                  { name: 'gender', type: 'string' },
                  { name: 'roleid', type: 'string' },
                  { name: 'stateid', type: 'string' },
                  { name: 'shenfen' },
                  { name: 'balance' },
                  { name: 'time' },
                  { name: 'student', type: 'bool' }
               ]
            }),
            sortInfo: { field: 'roleid', direction: 'ASC' }
        });

        var grid = new Ext.grid.EditorGridPanel({
            store: store,
            cm: cm,
            renderTo: 'editor-grid',
            width: 900,
            height: 230,
            title: 'my edit grid',
            frame: true,
            plugins:checkColumn
        });

        store.load({
            callback: function() {
                Ext.Msg.show({
                    title: '数据加载回传成功',
                    msg: '数据源已经加载,数据处理成功',
                    modal: false,
                    icon: Ext.Msg.INFO,
                    buttons: Ext.Msg.OK
                });
            }
        });

    })
</script>

 

 

<body> 
    <div>body中的第一个元素不能是纯文本</div>
    <select name="shenfeninfo" id="shenfeninfo" style="display: none;">
     <option value="student">student</option>
     <option value="teacher">teacher</option>
    </select>
    <div id="editor-grid"></div>
</body>