//创建recode结构
var recode =Ext.data.Record.create([
{name:"productProjectId",mapping:0},
{name:"productName",mapping:1},
{name:"searchBtn",mapping:2},
{name:"productNum",mapping:3},
{name:"accountMoney",mapping:4},
{name:"costMoney",mapping:5}
]);
//创建data
var data =[];
//创建reader
var reader =new Ext.data.ArrayReader({},recode);
//创建一个store返回规范的recode对象
var store =new Ext.data.Store(
{
proxy:new Ext.data.MemoryProxy(data),
reader:reader,
pruneModifiedRecords :true
});
//加载数据
store.load();
//定义表格编号
var rowNumber = new Ext.grid.RowNumberer({
sortable: true
})
//创建列
var cm = new Ext.grid.ColumnModel([
//rowNumber,
{
header: 'productProjectId',
dataIndex: 'productProjectId',
hidden: true,
sortable:true,
editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true}))
},
{
header:"商品/项目",
dataIndex:"productName",
sortable:true,
editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true,readOnly:true}))
},
{
header:"操作",
dataIndex: 'searchBtn',
align: 'center',
renderer:function(){
return '<img src=\"'+ ctxPath +'/resource/image/systemIcon/47.png\" style=\"cursor:pointer;\" onclick=\"javascript:settleBtnExp();\" />';
}
},
{
header:"数量",
dataIndex:"productNum",
sortable:true,
editor:new Ext.grid.GridEditor(new Ext.form.NumberField({
allowBlank:true,
maxLength:3
}))
},
{
header:"应收金额",
dataIndex:"accountMoney",
sortable:true,
editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:true,readOnly:true}))
},
{
header:"实收金额",
dataIndex:"costMoney",
sortable:true,
editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:true}))
}
]);
var tbar = new Ext.Toolbar({
items:[{
text: "添加一行",
iconCls:"blist",
handler:function(){
//定义一个recode对象
var initValue={productProjectId:"",productName:"",searchBtn:"",productNum:"",accountMoney:"",costMoney:""};
var p =new recode(initValue); //根据上面创建的recode 创建一个默认值
grid.stopEditing();
store.insert(0,p);//在第一个位置插入
grid.startEditing(0,1);//指定的行/列,进行单元格内容的编辑
p.dirty=true;
p.modified=initValue;
if(store.modified.indexOf(p)==-1){
store.modified.push(p);
}
}
},"-",{
text:"删除",
iconCls:"delCls",
handler:function(){
var sm = grid.getSelectionModel();
var cell = sm.getSelectedCell();
if (Ext.isEmpty(cell)) {
Ext.Msg.alert('提示', '你没有选中行');
return ;
}
var record = store.getAt(cell[0]);
Ext.MessageBox.confirm('确认', '你确认要删除'+record.get('productName')+'这行吗?', function(btn){
if(btn=='yes'){
store.remove(record);
}
});
/* 此种方法用于带单选按钮的gridCheckboxSelectionModel
var ds = grid.getStore();
var selectedRow = grid.getSelectionModel().getSelected();
if(selectedRow){
Ext.MessageBox.confirm('确认', '你确认要删除这行吗?', function(btn){
if(btn=='yes'){
ds.remove(selectedRow);
}
});
}else{
Ext.Msg.alert("提示", "请选择一条需要删除的记录!");
}*/
}
}]
});
// 定义分页条
var bbar = getBarPaging(store, 'dtlBbarExt', false, function (){
//var keyId = Ext.getCmp("settleId").getValue();
store.reload({
params : {
start : 0,
limit : bbar.pageSize
//'memberSettleAccount.settleId': keyId
}
});
});
var grid = new Ext.grid.EditorGridPanel({
columnWidth : 1,
height: 200,
store: store,
cm: cm,
id: 'listGridDtlExp',
clicksToEdit : 1, // 单击、双击进入编辑状态
autoScroll : true,
stripeRows: true, // 斑马线
loadMask: true,
loadMask: {
msg:'正在加载数据.....'
},
tbar: tbar,
//bbar: bbar,
frame: true
})
// 检查新增行的可编辑单元格数据合法性
var m = gridstore.modified.slice(0);
for (var i = 0; i < m.length; i++) {
var record = m[i];
var rowIndex = store.indexOfId(record.id);
var value = record.get(colName);
if (Ext.isEmpty(value)) {
// Ext.Msg.alert('提示', '数据校验不合法');
return false;
}
var colIndex = cm.findColumnIndex(colName);
var editor = cm.getCellEditor(colIndex).field;
if (!editor.validateValue(value)) {
// Ext.Msg.alert('提示', '数据校验不合法');
return false;
}
}
分享到:
相关推荐
ext 数据对象的定义 EditorGridPanel的使用 ext读取xml ext对各种数据格式的支持
此文档是可编辑表格Ext.grid.EditorGridPanel的说明以及示例的源代码,放到eclipse里面即可运行,显示出效果!
ext可编辑表格Ext.onReady(function() { Ext.QuickTips.init(); //格式化日期 function formatDate(value) { return value ? value.dateFormat('Y年m月d日') : ''; } // 别名 var fm = Ext.form; //...
extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过css修改自己想要的样式 extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax...
Ext2.2-用XML做数据源,可编辑Grid的例子.rar
ext中grid对象的简易例子,有可编辑的,数据有json,有数组,有从jsp获得的
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...
Ext在最开始的时候,是作为YUI的一个扩展存在的,所以那个时候它的名称是YUI.Ext,后来,Ext作为一个独立的项目进行... 真正的可编辑的表格Edit Grid,支持XML和Json数据类型,直接可以迁入grid,有完整地说明文档。
Ex4.0共2个压缩包特性,《ext js权威指南》 ...10.3.4 数据汇总功能:ext.grid.featrue.abstractsummary与ext.grid.featrue. summary / 539 10.3.5 分组功能:ext.grid.featrue.grouping / 543 10.3.6 分组汇总...
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid了,编程思想是基于面对对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的...
helloworld/可编辑的Grid/field/submit/MessageBox/removeRow/tablePanel/tree等十几个Demo 直接运行
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
Ajax技术,可实时编辑表格中的数据 快速导入,导出数据 自动生成表单,并可以自定义表单 内置表单验证功能 代码模块化设计 很容易的集成Fckeditor 容易扩展,当框架无法满足您复杂的业务需求时,您可以轻松的扩展...
Ext在最开始的时候,是作为YUI的一个扩展存在的,所以那个时候它的名称是YUI.Ext,后来,Ext作为一个独立的项目进行... 真正的可编辑的表格Edit Grid,支持XML和Json数据类型,直接可以迁入grid,有完整地说明文档。
自己做的在可编辑表格中的增删改查操作。。。。。。