日期:2014-05-16 浏览次数:20477 次
直接上代码
这是源码下载地址:
http://download.csdn.net/detail/lc448986375/4572357
代码太多,其他的没有粘过来,想看的可以去下载源码
页面代码与上面几篇文章相同,只是导入的js文件不同
editgrid.js
//下面两行代码必须要,不然会报404错误
Ext.Loader.setConfig({enabled:true});
//我的searchGrid和ext4在同一目录下,所以引用时要到根目录去"../"
Ext.Loader.setPath('Ext.ux','../ext4_example_editgrid/ext4/examples/ux');
//预加载
Ext.require(
[
'Ext.grid.*',
'Ext.toolbar.Paging',
'Ext.util.*',
'Ext.data.*',
'Ext.state.*',
'Ext.form.*',
//注意引用
'Ext.ux.form.SearchField',
//Checkbox需要引用
'Ext.selection.CheckboxModel' ,
'Ext.selection.CellModel',
'Ext.ux.CheckColumn'
]
);
Ext.onReady(
function(){
var isEdit = false;
//创建Model
Ext.define(
'User',
{
extend:'Ext.data.Model',
fields:[
{name:'id',mapping:'id'},
{name:'name',mapping:'name'},
{name:'sex',mapping:'sex'},
{name:'age',mapping:'age'},
{name:'birthdate',mapping:'birthdate',type:'date',dataFormat:'Y-m-d'}
]
}
)
//创建本地数据源
var sexStore = Ext.create(
'Ext.data.Store',
{
fields:['id','name'],
data:[
{"id":"1","name":"男"},
{"id":"2","name":"女"}
]
}
);
//创建数据源
var store = Ext.create(
'Ext.data.Store',
{
model:'User',
//设置分页大小
pageSize:5,
proxy: {
type: 'ajax',
url : 'user_get',
reader: {
//数据格式为json
type: 'json',
root: 'users',
//获取数据总数
totalProperty: 'totalCount'
}
},
autoLoad:true
}
);
//创建多选框
var checkBox = Ext.create('Ext.selection.CheckboxModel');
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing',
{
//表示“双击”才可以修改内容(取值只能为“1”或“2”)
clicksToEdit:2
}
);
//创建grid
var grid = Ext.create('Ext.grid.Panel',{
tbar:[
{
xtype:'button',
text:'添加',
handler:'addUser'
},{
xtype:'button',
text:'修改',
handler:updateUser
},{
xtype:'button',
text:'删除',
handler:deleteUser
}
],
store:store,
//添加到grid
selModel:checkBox,
//表示可以选择行
disableSelection: false,
columnLines: true,
loadMask: true,
//添加修改功能
plugins: [cellEditing] ,
columns:[
{
id:'id',
//表头
header:'编号',
width:40,
//内容
dataIndex:'id',
sortable:true,
editor:{
xtype:'textfield',
allowBlank:false
}
},{
id:'name',
header:'姓名',
width:100,
dataIndex:'name',
sortable:false,
editor:{
xtype:'combobox',
allowBlank:false
}
},{
id:'sex',
header:'性别',
width:100,
dataIndex:'sex',
editor:{
xtype:'combobox',
store:sexStore,
displayField:'name',
valueField:'name',
listeners:{
select : function(combo, record,index){