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 相关文章推荐
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
canvas绘制的直线动画
Jan 23 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
vue实现顶部菜单栏
Nov 08 Javascript
使用Mock.js生成前端测试数据
Dec 13 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解析html的实现代码
2011/08/08 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
Python的一些用法分享
2012/10/07 Python
Atom的python插件和常用插件说明
2018/07/08 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
Django之路由层的实现
2019/09/09 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
自我评价如何写好?
2014/01/05 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
公务员个人年终总结
2015/02/12 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS