Home Web Front-end JS Tutorial ext code generator_YUI.Ext related

ext code generator_YUI.Ext related

May 16, 2016 pm 06:48 PM
ext Code generator

This file is: ext_editgrid_products.js, used to display, edit, and delete data in the products table.

Copy code The code is as follows:

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
});
}

});

}
}]
});

}
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

An in-depth discussion of the physical storage structure of the Linux ext2 file system An in-depth discussion of the physical storage structure of the Linux ext2 file system Mar 14, 2024 pm 09:06 PM

The Linuxext2 file system is a file system used on most Linux operating systems. It uses an efficient disk storage structure to manage the storage of files and directories. Before we delve into the physical storage structure of the Linuxext2 file system, we first need to understand some basic concepts. In the ext2 file system, data is stored in data blocks (blocks), which are the smallest allocable units in the file system. Each data block has a fixed size, usually 1KB, 2KB or 4

How to use automatic code generation tools in PHP development How to use automatic code generation tools in PHP development Jun 27, 2023 pm 02:30 PM

With the rapid development of Web development, PHP has become one of the main programming languages ​​​​for Web development. Many web developers use PHP to write their applications because it has advantages such as easy to learn, easy to write, cross-platform, etc. However, for large PHP projects, writing all the code by hand is very time-consuming and laborious. After all, we want to complete projects in a more efficient way and quickly develop applications that meet our customers' requirements. Therefore, we can use PHP automatic code generation tools to speed up the development process and help

ThinkPHP6 code generator: quickly generate CRUD code ThinkPHP6 code generator: quickly generate CRUD code Aug 25, 2023 pm 10:24 PM

ThinkPHP6 code generator: quickly generate CRUD code Preface: During the development process, we often encounter the need to create CRUD (CRUD) functions. This repetitive work is time-consuming and error-prone. In order to improve development efficiency and reduce errors, we can use a powerful code generator to automatically generate CRUD code. This article will introduce a code generator based on the ThinkPHP6 framework to help developers quickly generate CRUD code. Overview: The tedious coding work can be solved by code

Analyze the physical organization of the Linux ext2 file system Analyze the physical organization of the Linux ext2 file system Mar 15, 2024 am 09:24 AM

The Linuxext2 file system is one of the commonly used file systems in the Linux operating system and has good performance and stability. This article will analyze the physical organization of the ext2 file system in detail and provide some specific code examples to help readers better understand. 1. Overview of the ext2 file system The ext2 file system is the earliest second-generation extended file system on the Linux system. It has made certain improvements in the performance, reliability and stability of the file system. It mainly consists of super block, group scan

How to use Python regular expressions for code generator development How to use Python regular expressions for code generator development Jun 22, 2023 pm 04:44 PM

Python regular expressions are a powerful tool that can be used for code generator development. A code generator is an automated tool that generates code or other text based on specific rules and conditions. Such tools can save a lot of time and effort as they help programmers automate repetitive tasks. Below we will introduce how to use Python regular expressions for code generator development. Understanding Python regular expressions Python regular expressions are a pattern matching tool that can be used

What is the difference between ext3 and ext4 in Linux system? What is the difference between ext3 and ext4 in Linux system? Feb 19, 2024 am 11:48 AM

A file system is an organization method for files stored on storage devices such as disks. The Linux system can support a variety of currently popular file systems, including: EXT2, EXT3, EXT4, FAT, FAT32, etc. So what are the differences between ext3 and ext4 in Linux systems? The following is a detailed introduction. What is the difference between ext3 and ext4 in Linux systems? 1. Larger file system and larger files ext3: 16TB file system and maximum 2TB file; ext4: 1EB file system and maximum 16TB file. 2. Unlimited number of subdirectories ext3: 32000 subdirectories; ext4: unlimited number of subdirectories.

File system selection and optimization suggestions for building a web server on CentOS File system selection and optimization suggestions for building a web server on CentOS Aug 05, 2023 pm 03:35 PM

Introduction to file system selection and optimization suggestions for building a web server on CentOS: When building a web server, it is extremely important to select an appropriate file system and optimize it. This article will introduce the file systems commonly used when building web servers on CentOS and provide corresponding optimization suggestions. 1. File system selection XFS file system XFS is an advanced, high-performance log file system. It has fast and efficient file system recovery capabilities and excellent I/O operation performance for large-capacity storage. XFS versus large

How to use code generator in PHP programming? How to use code generator in PHP programming? Jun 12, 2023 am 09:14 AM

What is a code generator? With the continuous development of Internet technology, more and more people are engaged in website development. Website development requires the use of various programming languages, among which PHP is one of the most popular. However, writing code in PHP requires a lot of time and effort, so in order to improve coding efficiency, many developers start using code generators. A code generator is an automated tool that automatically generates code that conforms to specifications. This reduces coding time, allowing developers to build complex applications faster

See all articles