extjs4 之 Grid 列编辑
2015-06-17 17:26
543 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="/ExtUI/ExtJs4.2.1/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="/ExtUI/mecss/UIicon.css" rel="stylesheet" type="text/css" />
<script src="/ExtUI/ExtJs4.2.1/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
var RowEditing = Ext.create('Ext.grid.plugin.RowEditing', { // 行编辑模式
clicksToMoveEditor : 2, //双击编辑 整行修改
autoCancel : false,
saveBtnText:'确定',
cancelBtnText:'取消',
errorsText:'错误',
dirtyText:'你要确认或取消更改'
});
var catalogEditProductStore = Ext.create('Ext.data.Store', {
fields: ["prcaId","prodId","prcaImg","prodNo","prcaOrderBy", "prodNameZh", "prcaTitle", "prcaPrice", "prcaSalesPrice", "prcaDeductPoint", "prcaSalePoint",
"prcaStorage","prcaIndateStart","prcaIndateEnd","prcaFreight","prcaRedirectUrl","prcaProdTotal","prcaIntegral"],
pageSize: 10, //页容量5条数据
//是否在服务端排序 （true的话，在客户端就不能排序）
remoteSort: false,
remoteFilter: true,
proxy: {
type: 'ajax',
url: '/Tools/106EditProduct.ashx?method=getCatalogProductByID&id=1797&cataId=888',
reader: {
type: 'json', //返回数据类型为json格式
root: 'rows', //数据（json格式）
totalProperty: 'total' //数据总条数
}
},
sorters: [{
//排序字段。
property: 'prodNo',
//排序类型，默认为 ASC
direction: 'desc'
}],
autoLoad: true //即时加载数据
});
//该型录下的选中编辑的商品
var catalogEditProduct = Ext.create("Ext.grid.Panel", {
store: catalogEditProductStore,
multiSelect: true, //支持多选
height:400,
width:800,
selModel: { selType: 'checkboxmodel' },
columns: [
{ text: '型录商品ID', dataIndex: 'prcaId', align: 'left', width: 50 },
{ text: '商品ID', dataIndex: 'prodId', align: 'left', width: 50 },
{ text: '商品编号', dataIndex: 'prodNo', align: 'left', width: 80 },
{
header: "名称",
width: 200,
dataIndex: 'prodNameZh',
align: 'left',
renderer: function (value, metaData, record) {//自定义列值组合
var path = record.get("prcaImg");
var txt = value;
if (path != "" && path != null) {
txt = '<span style="color:blue;display:table;width:100%;" qtip=\'<img width="280" src="upload/'
+ path.charAt(0) + "/" + path + '">\'>' + txt + '</span>';
}
return txt;
},
sortable: true
},
{ text: '排序', dataIndex: 'prcaOrderBy', minWidth: 20,editor: { xtype: 'numberfield' } },
{ text: '商品标题', dataIndex: 'prcaTitle',align: 'left', minWidth: 300,editor: { xtype: 'textfield' } },
{ text: '市场价', dataIndex: 'prcaPrice', minWidth: 20,editor: { xtype: 'numberfield' } },
{ text: '售价', dataIndex: 'prcaSalesPrice', minWidth: 40,editor: { xtype: 'numberfield' } },
{ text: '可获金币', dataIndex: 'prcaDeductPoint', minWidth: 30,editor: { xtype: 'numberfield' } },
{ text: '购买使用金币', dataIndex: 'prcaSalePoint', minWidth: 20,editor: { xtype: 'numberfield' } },
{ text: '库存', dataIndex: 'prcaStorage', minWidth: 40,editor: { xtype: 'numberfield' } },
{ text: '起始日期', dataIndex: 'prcaIndateStart', minWidth: 40,editor: { xtype: 'datefield'} },
{ text: '结束日期', dataIndex: 'prcaIndateEnd', minWidth: 40,editor: { xtype: 'datefield'} },
{ text: '含运费', dataIndex: 'prcaFreight', minWidth: 40,editor: { xtype: 'numberfield' } },
{ text: '跳转地址', dataIndex: 'prcaRedirectUrl', minWidth: 40,editor: { xtype: 'textfield' } },
{ text: '总件数(团购专用)', dataIndex: 'prcaProdTotal', minWidth: 40,editor: { xtype: 'numberfield' } },
{ text: '已订购人数(团购专用)', dataIndex: 'prcaIntegral', minWidth: 40,editor: { xtype: 'numberfield' } },
],
bbar: [{
xtype: 'pagingtoolbar',
store: catalogEditProductStore,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg: "没有数据",
beforePageText: "当前页",
afterPageText: "共{0}页",
displayInfo: true
// listeners: {
// beforechange: function (ts, page, eOpts) {//分页 加载查询数据
// Ext.apply(catalogEditProductStore.proxy.extraParams,CatalogTtree.getSelectionModel().getSelection()[0].data);
// }
// }
}],
tbar: [
{ text: '保存', iconCls: 'a_edit2' ,handler:showSelectedOptions}, "-",
{ text: '删除', iconCls: 'a_delete',handler:showSelectedOptions }, "-",
{ text: '上传主图', iconCls: 'a_upload',handler:showSelectedOptions }, "-",
{ text: '刷新', iconCls: 'a_refresh',handler:showSelectedOptions }, "-",
{text:'添加提报商品',iconCls:'a_add',handler:showSelectedOptions},"-"],
plugins : [RowEditing], //绑定编辑对象
});
catalogEditProduct.getView().on("render",function(view){
view.tip=Ext.create('Ext.tip.ToolTip',{
target:view.el,
delegate:view.itemSelector,
trackMouse:true,
renderTo:Ext.getBody(),
listeners:{
beforeshow:function(tip){
var record=view.getRecord(tip.triggerElement);
var ucc=record.get("prcaImg").substring(0,1);
var html="<div ><img width='300px' src='/upload/"+ucc+"/"+record.get("prcaImg")+"'></div>";
tip.update(html);
}
}
});
});
var centerPanel = Ext.create("Ext.panel.Panel", {
region: 'center',
defaults: {
autoScroll: true,
// autoHeight: true
},
items: [catalogEditProduct]
});
new Ext.Viewport({
layout: "border",
rederTo: Ext.getBody(),
defaults: {
frame: true
},
items: [centerPanel]
});
function showSelectedOptions() {
var rows = catalogEditProduct.getView().getSelectionModel().getSelection();
var msg = "";
for (var i = 0; i < rows.length; i++) {
msg = msg + rows[i].get('prcaId') + ',';
}
Ext.MessageBox.alert("标题", msg);
}
});
</script>
</head>
<body>
</body>
</html>
注释：
1、标记变色
{
header: "名称",
width: 200,
dataIndex: 'prodNameZh',
align: 'left',
renderer: function (value, metaData, record) {//自定义列值组合
var path = record.get("prcaImg");
var txt = value;
if (path != "" && path != null) {
txt = '<span style="color:blue;display:table;width:100%;" qtip=\'<img width="280" src="upload/'
+ path.charAt(0) + "/" + path + '">\'>' + txt + '</span>';
}
return txt;
},
sortable: true
},
2、Grid行tip提示
catalogEditProduct.getView().on("render",function(view){
view.tip=Ext.create('Ext.tip.ToolTip',{
target:view.el,
delegate:view.itemSelector,
trackMouse:true,
renderTo:Ext.getBody(),
listeners:{
beforeshow:function(tip){
var record=view.getRecord(tip.triggerElement);
var ucc=record.get("prcaImg").substring(0,1);
var html="<div ><img width='300px' src='/upload/"+ucc+"/"+record.get("prcaImg")+"'></div>";
tip.update(html);
}
}
});
});
3、Grid行编辑
var RowEditing = Ext.create('Ext.grid.plugin.RowEditing', { // 行编辑模式
clicksToMoveEditor : 2, //双击编辑 整行修改
autoCancel : false,
saveBtnText:'确定',
cancelBtnText:'取消',
errorsText:'错误',
dirtyText:'你要确认或取消更改'
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="/ExtUI/ExtJs4.2.1/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="/ExtUI/mecss/UIicon.css" rel="stylesheet" type="text/css" />
<script src="/ExtUI/ExtJs4.2.1/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
var RowEditing = Ext.create('Ext.grid.plugin.RowEditing', { // 行编辑模式
clicksToMoveEditor : 2, //双击编辑 整行修改
autoCancel : false,
saveBtnText:'确定',
cancelBtnText:'取消',
errorsText:'错误',
dirtyText:'你要确认或取消更改'
});
var catalogEditProductStore = Ext.create('Ext.data.Store', {
fields: ["prcaId","prodId","prcaImg","prodNo","prcaOrderBy", "prodNameZh", "prcaTitle", "prcaPrice", "prcaSalesPrice", "prcaDeductPoint", "prcaSalePoint",
"prcaStorage","prcaIndateStart","prcaIndateEnd","prcaFreight","prcaRedirectUrl","prcaProdTotal","prcaIntegral"],
pageSize: 10, //页容量5条数据
//是否在服务端排序 （true的话，在客户端就不能排序）
remoteSort: false,
remoteFilter: true,
proxy: {
type: 'ajax',
url: '/Tools/106EditProduct.ashx?method=getCatalogProductByID&id=1797&cataId=888',
reader: {
type: 'json', //返回数据类型为json格式
root: 'rows', //数据（json格式）
totalProperty: 'total' //数据总条数
}
},
sorters: [{
//排序字段。
property: 'prodNo',
//排序类型，默认为 ASC
direction: 'desc'
}],
autoLoad: true //即时加载数据
});
//该型录下的选中编辑的商品
var catalogEditProduct = Ext.create("Ext.grid.Panel", {
store: catalogEditProductStore,
multiSelect: true, //支持多选
height:400,
width:800,
selModel: { selType: 'checkboxmodel' },
columns: [
{ text: '型录商品ID', dataIndex: 'prcaId', align: 'left', width: 50 },
{ text: '商品ID', dataIndex: 'prodId', align: 'left', width: 50 },
{ text: '商品编号', dataIndex: 'prodNo', align: 'left', width: 80 },
{
header: "名称",
width: 200,
dataIndex: 'prodNameZh',
align: 'left',
renderer: function (value, metaData, record) {//自定义列值组合
var path = record.get("prcaImg");
var txt = value;
if (path != "" && path != null) {
txt = '<span style="color:blue;display:table;width:100%;" qtip=\'<img width="280" src="upload/'
+ path.charAt(0) + "/" + path + '">\'>' + txt + '</span>';
}
return txt;
},
sortable: true
},
{ text: '排序', dataIndex: 'prcaOrderBy', minWidth: 20,editor: { xtype: 'numberfield' } },
{ text: '商品标题', dataIndex: 'prcaTitle',align: 'left', minWidth: 300,editor: { xtype: 'textfield' } },
{ text: '市场价', dataIndex: 'prcaPrice', minWidth: 20,editor: { xtype: 'numberfield' } },
{ text: '售价', dataIndex: 'prcaSalesPrice', minWidth: 40,editor: { xtype: 'numberfield' } },
{ text: '可获金币', dataIndex: 'prcaDeductPoint', minWidth: 30,editor: { xtype: 'numberfield' } },
{ text: '购买使用金币', dataIndex: 'prcaSalePoint', minWidth: 20,editor: { xtype: 'numberfield' } },
{ text: '库存', dataIndex: 'prcaStorage', minWidth: 40,editor: { xtype: 'numberfield' } },
{ text: '起始日期', dataIndex: 'prcaIndateStart', minWidth: 40,editor: { xtype: 'datefield'} },
{ text: '结束日期', dataIndex: 'prcaIndateEnd', minWidth: 40,editor: { xtype: 'datefield'} },
{ text: '含运费', dataIndex: 'prcaFreight', minWidth: 40,editor: { xtype: 'numberfield' } },
{ text: '跳转地址', dataIndex: 'prcaRedirectUrl', minWidth: 40,editor: { xtype: 'textfield' } },
{ text: '总件数(团购专用)', dataIndex: 'prcaProdTotal', minWidth: 40,editor: { xtype: 'numberfield' } },
{ text: '已订购人数(团购专用)', dataIndex: 'prcaIntegral', minWidth: 40,editor: { xtype: 'numberfield' } },
],
bbar: [{
xtype: 'pagingtoolbar',
store: catalogEditProductStore,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg: "没有数据",
beforePageText: "当前页",
afterPageText: "共{0}页",
displayInfo: true
// listeners: {
// beforechange: function (ts, page, eOpts) {//分页 加载查询数据
// Ext.apply(catalogEditProductStore.proxy.extraParams,CatalogTtree.getSelectionModel().getSelection()[0].data);
// }
// }
}],
tbar: [
{ text: '保存', iconCls: 'a_edit2' ,handler:showSelectedOptions}, "-",
{ text: '删除', iconCls: 'a_delete',handler:showSelectedOptions }, "-",
{ text: '上传主图', iconCls: 'a_upload',handler:showSelectedOptions }, "-",
{ text: '刷新', iconCls: 'a_refresh',handler:showSelectedOptions }, "-",
{text:'添加提报商品',iconCls:'a_add',handler:showSelectedOptions},"-"],
plugins : [RowEditing], //绑定编辑对象
});
catalogEditProduct.getView().on("render",function(view){
view.tip=Ext.create('Ext.tip.ToolTip',{
target:view.el,
delegate:view.itemSelector,
trackMouse:true,
renderTo:Ext.getBody(),
listeners:{
beforeshow:function(tip){
var record=view.getRecord(tip.triggerElement);
var ucc=record.get("prcaImg").substring(0,1);
var html="<div ><img width='300px' src='/upload/"+ucc+"/"+record.get("prcaImg")+"'></div>";
tip.update(html);
}
}
});
});
var centerPanel = Ext.create("Ext.panel.Panel", {
region: 'center',
defaults: {
autoScroll: true,
// autoHeight: true
},
items: [catalogEditProduct]
});
new Ext.Viewport({
layout: "border",
rederTo: Ext.getBody(),
defaults: {
frame: true
},
items: [centerPanel]
});
function showSelectedOptions() {
var rows = catalogEditProduct.getView().getSelectionModel().getSelection();
var msg = "";
for (var i = 0; i < rows.length; i++) {
msg = msg + rows[i].get('prcaId') + ',';
}
Ext.MessageBox.alert("标题", msg);
}
});
</script>
</head>
<body>
</body>
</html>
注释：
1、标记变色
{
header: "名称",
width: 200,
dataIndex: 'prodNameZh',
align: 'left',
renderer: function (value, metaData, record) {//自定义列值组合
var path = record.get("prcaImg");
var txt = value;
if (path != "" && path != null) {
txt = '<span style="color:blue;display:table;width:100%;" qtip=\'<img width="280" src="upload/'
+ path.charAt(0) + "/" + path + '">\'>' + txt + '</span>';
}
return txt;
},
sortable: true
},
2、Grid行tip提示
catalogEditProduct.getView().on("render",function(view){
view.tip=Ext.create('Ext.tip.ToolTip',{
target:view.el,
delegate:view.itemSelector,
trackMouse:true,
renderTo:Ext.getBody(),
listeners:{
beforeshow:function(tip){
var record=view.getRecord(tip.triggerElement);
var ucc=record.get("prcaImg").substring(0,1);
var html="<div ><img width='300px' src='/upload/"+ucc+"/"+record.get("prcaImg")+"'></div>";
tip.update(html);
}
}
});
});
3、Grid行编辑
var RowEditing = Ext.create('Ext.grid.plugin.RowEditing', { // 行编辑模式
clicksToMoveEditor : 2, //双击编辑 整行修改
autoCancel : false,
saveBtnText:'确定',
cancelBtnText:'取消',
errorsText:'错误',
dirtyText:'你要确认或取消更改'
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- extjs grid取到数据而不显示的解决
- ExtJS下grid的一些属性说明
- Extjs在exlipse中设置自动提示的方法
- 常用Extjs工具:Extjs.util.Format使用方法
- extjs DataReader、JsonReader、XmlReader的构造方法
- 解决Extjs4中form表单提交后无法进入success函数问题
- 学习ExtJS（一） 之基础前提
- extjs 为某个事件设置拦截器
- ExtJs 学习笔记基础篇 Ext组件的使用第1/2页
- Extjs列表详细信息窗口新建后自动加载解决方法
- Extjs grid添加一个图片状态或者按钮的方法
- Extjs学习笔记之四 工具栏和菜单
- Extjs4 GridPanel的主要配置参数详细介绍
- extjs form textfield的隐藏方法
- ExtJS 2.0实用简明教程之应用ExtJS
- ExtJS Store的数据访问与更新问题
- 不用写JS也能使用EXTJS视频演示
- 使用OOP的方式扩展ExtJS UI组建 - 更新版
- 使用OOP的方式扩展ExtJS UI组建 - 更新版
- 【万里征程——Windows App开发】如何使用粘贴板