Ext.onReady(function(){
//建立列模型
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true}))},
{header:'名称',dataIndex:'name',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true}))},
{header:'描述',dataIndex:'descn',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true}))}
]);
//数据的Json格式
var data=[
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
//数据的处理中心,主要有两个重点的熟悉:proxy(负责如何获取数据),reader(负责如何解释数据)
var store = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},//对应着列模型的id
{name:'name'},//对应着列模型的name
{name:'descn'}//对应着列模型的descn
])
});
//自定义对象
var Record = new Ext.data.Record.create([
{name:'id',type:'string'},
{name:'name',type:'name'},
{name:'descn',type:'descn'}
]);
store.load();
//GridPanel,这里的EditorGridPanel继承了父类
var grid = new Ext.grid.EditorGridPanel({
renderTo:'myid',
cm:cm,
width:450,
height:130,
store:store,
loadMask:true,
tbar:new Ext.Toolbar(['-',
{text:'添加一行',
handler:function(){
// alert("add");
var initValue={id:'',name:'',descn:''};
var p = new Record(initValue);
grid.stopEditing();
store.insert(0,p);
grid.startEditing(0,0);
p.dirty=true,
p.modified=initValue;
if(store.modified.indexOf(p)==-1){
store.modified.push(p);
}
}
},
'-',
{text:'删除一行',
handler:function(){
// alert("delete");
Ext.Msg.confirm('信息','确定要删除',function(btn){
if(btn=='yes'){
var sm = grid.getSelectionModel();
var cell = sm.getSelectedCell();
var record = store.getAt(cell[0]);
store.remove(record);
}
});
}
},
'-',
{text:'保存',
handler:function(){
var m = store.modified.slice(0);
for(var i=0;i<m.length;i++){
var record = m[i];
var fields=record.fields.keys;
for(var j=0;j<fields.length;j++){
var name = fields[j];
var value = record.data[name];
var collIndex = cm.findColumnIndex(name);//取得列索引
var rowIndex = store.indexOf(record.id);//取得行的索引
var editor =cm.getCellEditor(collIndex).field;
if(!editor.validateValue(value)){
Ext.Msg.alert('提示','请确保输入的数据正确',function(){
grid.startEditing(rowIndex,collIndex);
});
return;
}
}
}
var jsonArray=[];
Ext.each(m,function(item){
jsonArray.push(item.data);
});
//提交
Ext.lib.Ajax.request(
'POST',
'grid.jsp',
{success:function(response){
Ext.Msg.alert('信息',response.responseText,function(){
store.reload();
});
},failure:function(){
Ext.Msg.alert('错误','与后台联系的时候出现问题');
}},
'data='+encodeURIComponent(Ext.encode(jsonArray))//吧EditorGrid的数据封装成json,传到后台
);
}
},
'-'
]),
viewConfig:{ forceFit:true }
});
});
分享到:
相关推荐
ExtJS的GridPanel导出excel文件,方便快捷易懂!
NULL 博文链接:https://aa00aa00.iteye.com/blog/564647
EXTJS.GRIDPANEL中日期格式 设置
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
主要介绍了ExtJs中gridpanel分组后组名排序实例代码,有需要的朋友可以参考一下
Extjs4.1 小例子(适合extjs初学者学习使用).直接导入myeclipse即可
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
Extjs2.02 Gridpanel加载本地数组资源的实例,思路相当清晰。对初学者很有用
一个关于GridPanel的使用例子 介绍了Proxy,JsonReader Store gridPanel等几个对象的简单使用
NULL 博文链接:https://topbox163.iteye.com/blog/1276463
此文件用于项目首页内容,使用了ExtJs中的GridPanel
刚学习了Ext的开发框架,发现这个东西还是挺不错的。 后来公司让改变一个Gridpanel的展现方式,要求实现滚屏的效果。于是我就开始找API相关的功能了。找了很久,也没有找到框架的相应控制方法,然后在网上找了很久...
新手学习,初学extjs时用刚刚好,里边有三个例子,还有一个我自己写的例子(简单粗暴动态菜单),还有一个中文API
NULL 博文链接:https://tonylian.iteye.com/blog/1735525
...
...
ExtJS中的表格功能非常强大,包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列定义...
博文链接:https://zjnbshifox.iteye.com/blog/147574
本文为大家详细介绍下ExtJs如何设置GridPanel表格文本垂直居中,具体实现代码及截图如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...