当前位置: 首页 > 图文教程 > 网络编程 > Javascript > ext 代码生成器

Javascript
jQuery代码:jQuery控制表单里的回车键
用DIV完美模拟createPopup 弹出窗口(脚本之家修正版),支持Firefox,ie,chrome
jQuery Flash/MP3/Video多媒体插件
9个JavaScript评级/投票插件
JS实现的radio图片选择按钮效果
IE中checkbox在刷新后初始化的问题
JavaScript 学习笔记(十一)
JS 对象介绍
javascript 哈希表(hashtable)的简单实现
jquery 防止表单重复提交代码
js parsefloat parseint 转换函数
javascript parseInt与Number函数的区别
JavaScript 学习笔记(十二) dom
JavaScript 学习笔记(十三)Dom创建表格
javascript 实现自由落体的方块效果
javascript 获取url参数和script标签中获取url参数函数代码
JAVASCRIPT style 中visibility和display之间的区别
javascript 拖放效果实现代码
jquery last-child 列表最后一项的样式
Jquery实战_读书笔记1—选择jQuery

Javascript 中的 ext 代码生成器


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 227 ::
收藏到网摘: n/a

见我的上一篇文章,XCodeBuilder不仅能生成.Net三层代码,还生成处理层代码和Ext脚本,以下是一个grid的示例。 本文件为: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
});
}
});
}
}]
});
}