ext 代码生成器


Posted in Javascript onAugust 07, 2009

本文件为:ext_editgrid_products.js,用来显示,编辑,删除products表的数据。

var productsgrid; 
var productsstore; 
var productslimit = 25; //每页显示条数 
var productsListPostUrl = "/management/procrequest/Proc_products.ashx?action=getlist"; 
var productsModifyPostUrl = "/management/procrequest/Proc_products.ashx?action=modify"; 
var productsDeletePostUrl = "/management/procrequest/Proc_products.ashx?action=del"; 
function initproductsGrid(containerid) { 
Ext.menu.RangeMenu.prototype.icons = { 
gt: 'images/greater_then.png', 
lt: 'images/less_then.png', 
eq: 'images/equals.png' 
}; 
Ext.grid.filter.StringFilter.prototype.icon = 'images/find.png'; 
Ext.QuickTips.init(); 
function formatDate(value) { 
return value ? value.dateFormat('M d, Y') : ''; 
}; 
var fm = Ext.form; 
var sm = new Ext.grid.CheckboxSelectionModel(); 
var cm = new Ext.grid.ColumnModel([ 
sm, 
{ 
id:'productId', 
header: '产品编号', 
dataIndex: 'productId', 
sortable: true, 
width:70, 
editor: new fm.NumberField({ 
allowBlank: false, 
allowNegative: false 
}) 
}, 
{ 
header: '产品名称', 
dataIndex: 'productName', 
sortable: true, 
width:120, 
editor: new fm.TextField({ 
allowBlank: false, 
allowNegative: false 
}) 
}, 
{ 
header: '金额', 
dataIndex: 'money', 
sortable: true, 
width:120, 
editor: new fm.NumberField({ 
allowBlank: false, 
allowNegative: false 
}) 
}, 
{ 
header: '地址', 
dataIndex: 'address', 
sortable: true, 
width:120, 
editor: new fm.TextField({ 
allowBlank: false, 
allowNegative: false 
}) 
}, 
{ 
header: '电话', 
dataIndex: 'tel', 
sortable: true, 
width:120, 
editor: new fm.TextField({ 
allowBlank: false, 
allowNegative: false 
}) 
}, 
{ 
header: '备注', 
dataIndex: 'remark', 
sortable: false, 
width:550, 
editor: new fm.myHtmlEditor({ 
allowBlank: false, 
allowNegative: false 
}) 
}, 
{ 
header: '端口', 
dataIndex: 'port', 
sortable: true, 
width:70, 
editor: new fm.NumberField({ 
allowBlank: false, 
allowNegative: false 
}) 
} 
]); 
cm.defaultSortable = true; 
/* 
var Plant = Ext.data.Record.create([ 
]); 
*/ 
productsstore = new Ext.data.JsonStore({ 
root: 'list', 
totalProperty: 'totalCount', 
idProperty: 'productId', 
remoteSort: true, 
fields: [ 
{name: 'productId' },{name: 'productName' },{name: 'money' },{name: 'address' },{name: 'tel' },{name: 'remark' },{name: 'port' } 
], 
proxy: new Ext.data.ScriptTagProxy({ 
url: productsListPostUrl 
}) 
}); 
productsstore.setDefaultSort('productId', 'desc'); 
var filters = new Ext.grid.GridFilters({ 
filters: [ 
{ type: 'string', dataIndex: 'productId' }, { type: 'string', dataIndex: 'productName' }, { type: 'string', dataIndex: 'money' }, { type: 'string', dataIndex: 'address' }, { type: 'string', dataIndex: 'tel' }, { type: 'string', dataIndex: 'remark' }, { type: 'string', dataIndex: 'port' } 
    ] 
}); 
var pagingBar = new Ext.PagingToolbar({ 
pageSize: productslimit, 
store: productsstore, 
displayInfo: true, 
displayMsg: '第 {0} - {1} 条记录,总共 {2} 条记录', 
emptyMsg: "没有记录" 
}); 
productsgrid = new Ext.grid.EditorGridPanel({ 
store: productsstore, 
cm: cm, 
sm: sm, 
bodyStyle: 'width:100%', 
autoWidth: true, 
height: 620, 
renderTo: containerid, 
autoExpandColumn: 'productId', 
frame: true, 
clicksToEdit: 2, 
plugins: [filters], 
loadMask: true, 
enableTabScroll: true, 
tbar: [{ 
text: '添加', 
tooltip: '添加新记录', 
iconCls: 'add', 
handler:function(){ 
openTab("addproducts", "添加products", null, initAddproductsForm); 
} 
}, 
'-', { 
text: '编辑', 
tooltip: '编辑选中记录', 
iconCls: 'option', 
handler: function() { 
var selectedRow = productsgrid.getSelectionModel().getSelections(); 
if (selectedRow) { 
var obj = selectedRow[0]; 
if (!obj) 
return; 
var id = obj.get("productId"); 
openTab("editproducts", "编辑products", null, initAddproductsForm, id, obj); 
} 
} 
}, 
'-', { 
text: '删除', 
tooltip: '删除选中记录', 
iconCls: 'remove', 
handler: function() { 
var selectedRow = productsgrid.getSelectionModel().getSelections(); 
Ext.MessageBox.confirm('Confirm', '你确定要删除你所选定的' + selectedRow.length + "项吗?", function(btn) { 
if (btn == 'yes') { 
if (selectedRow) { 
for (var i = 0; i < selectedRow.length; i++) { 
var obj = selectedRow[i]; 
var id = obj.get("productId"); 
productsstore.remove(obj); 
$.ajax({ 
type: "POST", 
url: productsDeletePostUrl, 
dataType: "json", 
data: "recordid=" + id, 
success: function(msg) { 
if (msg[0] && msg[0].string != "success") 
productsstore.reload(); 
} 
}); 
} 
} 
} 
}); 
} 
}], 
bbar: pagingBar 
}); 
productsstore.load({ params: { start: 0, limit: productslimit} }); 
productsgrid.on("afteredit", afterEdit, productsgrid); 
function afterEdit(obj) { 
var r = obj.record; //获取被修改的行 
var fildname = obj.field; //获取被修改的列 
var id = r.get("productId"); 
var fildval = obj.value; 
$.ajax({ 
type: "POST", 
url: productsModifyPostUrl, 
dataType: "json", 
data: { action: 'modify', fildname: fildname, id: id, fildval: fildval }, 
complete: function() { 
}, 
success: function(msg) { 
} 
}); 
} 
}

本文件为ext_add_products.js,用来添加或者编辑products表。
var productsAddPostUrl = "/management/procrequest/Proc_products.ashx?action=add"; 
var productsUpdatePostUrl = "/management/procrequest/Proc_products.ashx?action=update"; 
function initAddproductsForm(containerid, idstr, rowObj) { 
if (!idstr) 
idstr = containerid; 
var productsForm = new Ext.FormPanel({ 
labelWidth: 100, // label settings here cascade unless overridden 
url: productsAddPostUrl, 
frame: true, 
bodyStyle: 'padding:5px 5px 0', 
autoWidth: true, 
defaults: { width: '350' }, 
defaultType: 'textfield', 
renderTo: containerid, 
items: [ 
{ 
xtype: 'hidden', 
name: 'productId', 
id: 'productId' + idstr, 
value: null == rowObj ? null : rowObj.get("productId"), 
readOnly: true 
} , { 
xtype: 'textfield', 
fieldLabel: '商品名称', 
height: 20, 
name: 'productName', 
allowBlank: false, 
value: null == rowObj ? null : rowObj.get("productName"), 
id: 'productName' + idstr 
} 
, { 
xtype: 'numberfield', 
fieldLabel: '价格', 
height: 20, 
name: 'money', 
allowBlank: false, 
value: null == rowObj ? null : rowObj.get("money"), 
id: 'money' + idstr 
} 
, { 
xtype: 'textfield', 
fieldLabel: '地址', 
height: 20, 
name: 'address', 
value: null == rowObj ? null : rowObj.get("address"), 
id: 'address' + idstr 
} 
, { 
xtype: 'textfield', 
fieldLabel: '电话', 
height: 20, 
name: 'tel', 
value: null == rowObj ? null : rowObj.get("tel"), 
id: 'tel' + idstr 
} 
, { 
xtype: 'myhtmleditor', 
fieldLabel: '备注', 
height: 400, width: 600, 
name: 'remark', 
value: null == rowObj ? null : rowObj.get("remark"), 
id: 'remark' + idstr 
} 
, { 
xtype: 'numberfield', 
fieldLabel: '端口', 
height: 20, 
name: 'port', 
value: null == rowObj ? null : rowObj.get("port"), 
id: 'port' + idstr 
} 
], 
buttons: [{ 
text: '保存', 
handler: function() { 
if (!productsForm.form.isValid()) 
return; 
productsForm.form.submit({ 
meghod: 'post', 
url: !isNaN(idstr) && parseInt(idstr) > 0 ? productsUpdatePostUrl : productsAddPostUrl, 
waitMsg: '正在保存,请稍候...', 
success: function() { 
Ext.MessageBox.show({ 
title: '保存结果', 
msg: '保存成功', 
buttons: Ext.MessageBox.OK, 
icon: Ext.MessageBox.INFO 
}); 
}, 
failure: function() { 
Ext.MessageBox.show({ 
title: '保存结果', 
msg: '保存失败', 
buttons: Ext.MessageBox.OK, 
icon: Ext.MessageBox.ERROR 
}); 
} 
}); 
} 
}] 
}); 
}
Javascript 相关文章推荐
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
jQuery $.each的用法说明
Mar 22 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
简单实现js轮播图效果
Jul 14 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
JavaScript 的方法重载效果
Aug 07 #Javascript
JQuery 小练习(实例代码)
Aug 07 #Javascript
js正确获取元素样式详解
Aug 07 #Javascript
JavaScript 乱码问题
Aug 06 #Javascript
jquery ui dialog里调用datepicker的问题
Aug 06 #Javascript
jquery select(列表)的操作(取值/赋值)
Aug 06 #Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 #Javascript
You might like
PHP和XSS跨站攻击的防范
2007/04/17 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
vue-axios使用详解
2017/05/10 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
Python 从相对路径下import的方法
2018/12/04 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
python 调试冷知识(小结)
2019/11/11 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
python 获取计算机的网卡信息
2021/02/18 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
一篇.NET面试题
2014/09/29 面试题
我的求职计划书
2014/01/10 职场文书
西式婚礼主持词
2014/03/13 职场文书
升职自荐信怎么写
2015/03/05 职场文书
思想道德自我评价2015
2015/03/09 职场文书