> 웹 프론트엔드 > JS 튜토리얼 > 확장 코드 생성기_YUI.Ext 관련

확장 코드 생성기_YUI.Ext 관련

WBOY
풀어 주다: 2016-05-16 18:48:29
원래의
860명이 탐색했습니다.

이 파일은 ext_editgrid_products.js이며 제품 테이블의 데이터를 표시, 편집 및 삭제하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

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();
함수 formatDate(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: '产product编号',
dataIndex: 'productId' ,
정렬 가능: true,
너비:70,
편집기: new fm.NumberField({
allowBlank: false,
allowNegative: false
})
},
{
header: '产productname称',
dataIndex: 'productName',
sortable: true,
width:120,
editor: new fm.TextField({
allowBlank: false,
allowNegative: false
})
},
{
header: '金额',
dataIndex: 'money',
sortable: true,
너비:120,
편집기: new fm.NumberField({
allowBlank: false,
allowNegative: false
})
},
{
헤더: '地址',
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 ',
정렬 가능: false,
너비:550,
편집기: new fm.myHtmlEditor({
allowBlank: false,
allowNegative: false
})
},
{
헤더: '端口',
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,
필드: [
{이름: 'productId' },{name: 'productName' },{name: 'money' },{name: 'address' },{name: 'tel' } ,{name: 'remark' },{name: 'port' }
],
proxy: new Ext.data.ScriptTagProxy({
url: productsListPostUrl
})
}) ;
productsstore.setDefaultSort('productId', 'desc');
varfilters = new Ext.grid.GridFilters({
filters: [
{ type: 'string', dataIndex: 'productId' }, { type: 'string', dataIndex: 'productName' } , { 유형: '문자열', dataIndex: 'money' }, { 유형: 'string', dataIndex: 'address' }, { 유형: 'string', dataIndex: 'tel' }, { 유형: 'string', dataIndex: 'remark' }, { 유형: '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,
높이: 620,
renderTo: 컨테이너 ID,
autoExpandColumn: 'productId',
프레임: true,
clicksToEdit: 2,
플러그인: [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: '删除',
툴팁: '删除选中记录',
iconCls: 'remove',
handler: function() {
var selectedRow = productsgrid.getSelectionModel().getSelections();
Ext.MessageBox.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 != "성공")
productsstore.reload();
}
})
}
}
}
}
}],
bbar: pagingBar
});
productsstore.load({ params: { 시작: 0, 제한: 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() {
},
성공: 함수(msg) {
}
});
}
}

本文件为ext_add_products.js ,用来添加或者编辑products表。

复aze代码 代码如下:
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 = 컨테이너 ID;
var productsForm = new Ext.FormPanel({
labelWidth: 100, // 재정의되지 않는 한 여기서 라벨 설정은 계단식으로 적용됩니다.
url: productsAddPostUrl,
frame: true,
bodyStyle: 'padding:5px 5px 0',
autoWidth: true,
기본값: { width: '350' },
defaultType: 'textfield',
renderTo: 컨테이너 ID,
항목: [
{
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,
이름: '주소',
값: 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: '备注',
높이: 400, 너비: 600,
이름: 'remark',
값: null == rowObj ? null : rowObj.get("remark"),
id: 'remark' idstr
}
, {
xtype: 'numberfield',
fieldLabel: '端口',
높이: 20,
이름: '포트',
값: 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: '保存成功',
버튼: Ext.MessageBox.OK,
아이콘: Ext.MessageBox.INFO
})
},
failure: function() {
Ext.MessageBox.show({
제목: '保存结果',
msg: '保存失败',
버튼: Ext.MessageBox.OK,
아이콘: Ext.MessageBox.ERROR
})
}

});

}
}]
});

}

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿