根据官方示例改写
<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>