//功能:根据输入的编码传给后台分析,回传所需的数据及数据自定义的列格式,列名,查询分页等
var columns = new Array(); // 创建一个数组对象.
// ............查询控件...................
// ------面板1...列表选择查询控件1--------
var queryselect = new Ext.form.ComboBox({
fieldLabel : '查询选择', // UI标签名称
name : 'queryselect', // 作为form提交时传送的参数
//allowBlank : false, // 是否允许为空
readOnly : true, // 是否只读
mode : 'local', // 数据模式,local为本地模式
triggerAction : 'all', // 显示所有下列数.必须指定为'all'
anchor : '90%',
// typeAhead : true,
emptyText : "请选择查询模式...",// queryselect.getSize(),
listWidth : 150, // 下拉列表宽,一般不需设置即等同COMBOBOX宽度,这里有未知问题,必须设置.
valueField : 'value', // 传送的值
displayField : 'text',// 列表选择控件里的UI列表显示的文本
store : new Ext.data.SimpleStore({ // 填充的数据
fields : ['value', 'text'],
data : [['mxbbh', '明细表编号'], ['ljmch', '零件名称']]
})
});
// ------面板1...查询控件2--------
var querytext = new Ext.form.TextField({
name : 'queryvalue',
//allowBlank : false,
emptyText : '输入查询内容',
fieldLabel : '查询',
anchor : '100%'
});
// ------查询...面板1--------
var queryform = new Ext.FormPanel({
// width : 300,
// url : './querybean/query.jsp',
labelAlign : 'top', // 与控件一起定义的文本相对于控件的位置.
collapsible : true,
title : '查询',
frame : true,
autoHeight : true,
layout : 'form', // form定义在column里,不然与控件一起定义的文本显示不出来.
items : [queryselect, querytext],
buttons : [{
text : '提交',
handler : function() {
if (queryform.getForm().isValid())
queryform.getForm().submit
// Ext.Ajax.request
({
url : './querybean/query.jsp',
params : {
command : 'query',
start : 0,
limit : 10
},
watiMsg : '查询中...请等待',
success : function(res, v) {
var json = Ext.util.JSON
.decode(v.response.responseText);
// var a1 = [{
// name : 'ljh',
// type : 'string'
// }, {
// name : 'ljmch',
// type : 'string'
// }];
// var storetem = new Ext.data.JsonStore({
// url : './querybean/query.jsp',
// totalProperty : 'total',
// root : 'root',
// fields : a1,
// baseParams : {
// queryselectvalue : queryselect
// .getValue(),
// queryvalue : querytext.getValue()
// }
// // pruneModifiedRecords : true
// });
// querygrid.
// store = storetem;
// a = a1;
// var root=new Array();
// Ext.apply(a, a1);
// Ext.apply(store, storetem);
// querygrid.store.commitChanges();
// querygridtoolpage.bind(querygrid.store);
// store = querygrid.store;
// store.loadData(json);
Ext.apply(columns, json.columns);// 将第二个对象中的所有属性复制到第一个对象中,第三个参数对象为设置默认值.
columns[0] = eval(columns[0]);
for (var i = 1; i < columns.length; i++)
// 执行string中的new表达式转换为对象
columns[i].editor = eval(columns[i].editor);
cm.setConfig(columns);
store.loadData(json);
// queryform.getForm().reset();
// store.reload();
// querytext.getValue().toString();
// store.load(
// { // 加载查询面板数据
// //由于是表单提交,所以字段值自动提交,且不执行STORE的beforeload事件
// params : {
// command:'query',
// queryvalue : querytext.getValue(),
// start : 0,
// limit : 10
// }
// }
// ); // 加载数据源
}
})
}
}, {
text : '重置',
handler : function() {
queryform.getForm().reset();
}
}]
});
// ..............查询表格.....................
// 限制GRID表格最多只能显示10列
var a = [{
name : '0',
type : 'string'
}, {
name : '1',
type : 'string'
}, {
name : '2',
type : 'string'
}, {
name : '3',
type : 'string'
}, {
name : '4',
type : 'string'
}, {
name : '5',
type : 'string'
}, {
name : '6',
type : 'string'
}, {
name : '7',
type : 'string'
}, {
name : '8',
type : 'string'
}, {
name : '9',
type : 'string'
}, {
name : '10',
type : 'string'
}];
// ------------------------------------------------调试
// ---------中间右边查询面板的表格内容------------
var sm = new Ext.grid.CheckboxSelectionModel({
handleMouseDown : Ext.emptyFn
});
var cm = new Ext.grid.ColumnModel([
// sm, {
// header : '零件号',
// dataIndex : 'ljh',
// editor : new Ext.form.TextField()
// }, {
// header : '零件名称',
// dataIndex : 'ljmch',
// editor : new Ext.form.TextField()
// }, {
// header : '零件种类',
// dataIndex : 'ljzhl',
// editor : new Ext.form.TextField()
// }
// ,{header:'明细表编号',dataIndex:'mxph'},{header:'明细表名称',dataIndex:'mxmch'},
// {header:'版本号',dataIndex:'bbh'},{header:'现行通知书号',dataIndex:'tzh'},
// {header:'页数',dataIndex:'ysh'},{header:'备注',dataIndex:'bzh'}
]);
// ------------------------------------------------调试
var store = new Ext.data.JsonStore({
url : './querybean/query.jsp',
totalProperty : 'total',
root : 'root',
fields : a,
pruneModifiedRecords : true
});
store.on('metachange', function(S, meta) {
Ext.Msg.alert('store.metachange', '');
});
// -----------查询面板数据读入事件------------------
store.on('beforeload', function(s, o) {// 在请求一个数据对象之前事件(数据未读入).Ext.data.JsonStore读入数据之前的事件.
var ststore = store;
store.baseParams = {
command : 'query', // 返回JSP处理的查询选择
queryselectvalue : queryselect.getValue(),
queryvalue : querytext.getValue()
};
});
store.on('load', function(storetem, records, options) {
var s, r, o, d1;
// Ext.Msg.alert('store.load', '');
});
// 当数据缓存改变和数据缓存刷新的时候,调用的事件.即:请求到数据但未读入GRID中时的事件,函数参数为(STORE this)
store.on('datachanged', function(s) {
});
var querygridtoolpage = new Ext.PagingToolbar({
store : store,
pageSize : 10,
displayInfo : true,
displayMsg : 'Displaying topics {0} - {1} of {2}',
emptyMsg : "No topics to display"
});
var querygrid = new Ext.grid.EditorGridPanel({
width : 640,
height : 480,
clicksToEdit : 1, // (3)单击次数如1,开始编辑
cm : cm,
sm : sm,
store : store,
frame : true,
loadMask: {msg: '正在加载数据,请等待...'},
tbar : [{
text : '添加',
handler : function() {
var f = Ext.data.Record.create(a);
var d = new f({
// ljh : 'ljh',
// ljmch : 'ljmch'
});
for (var i = 1; i < columns.length - 1; i++)
// columns.length-1 : JSP传来的columns里包含了一个sm.
d.set(a[i].name, '未定义'); // 初始化record值
var d1 = new Array();
querygrid.stopEditing();
store.insert(0, d); // 增加一空白记录
querygrid.startEditing(0, 1);
store.getAt(0).dirty = true
}
}, '-', {
text : '保存',
handler : function() {
var json = []; // 定义增加记录的数组
var alter = [];
for (var i = 0, c = store.getCount(); i < c; i += 1) {
if (store.getAt(i).dirty) {
var e = 0;
for (var j = 0; j < columns.length - 1; j++) { // 循环判断记录是添加还是修改
if (store.getAt(i).isModified(j.toString()))
e++;
}
if (e == columns.length - 2)
json.push(store.getAt(i).data);
else {
alter.push(store.getAt(i).data);
var t = store;
}// var record=store;
// var s=store.getAt(i).getChanges()
// if(store.getAt(i).isModified('1'))
// Ext.Msg.alert('isModified',store.getAt(i).getChanges());
}
};
if (json[0] == null) {
Ext.Msg.alert('information', 'not data modify!');
return;
};
var c = new Array(); // 定义数组
for (var i = 0; i < columns.length - 1; i++) {
c[i] = a[i]
};
Ext.Ajax.request({
method : 'POST',
url : './querybean/query.jsp',
params : { // POST传递参数出去,每个参数以逗号隔开.如:command和data两参数
kind : queryselect.getValue(),
columns : Ext.encode(c), // 数组必须以编码的方式发送
command : "save",
record : Ext.encode(json),
alter : Ext.encode(alter)
},
success : function() {
Ext.Msg.alert('information', 'data load success!');
store.reload();
},
failure : function() {
Ext.Msg.alert('information', 'data load failure!');
}
})
}
}, '-', {
text : '删除',
handler : function() {
var sm = querygrid.getSelectionModel(); // Returns the
// grid's SelectionModel.
var selected = sm.getSelections();
// Returns the selected records.(getSelections() : Array)
var ids = [];
for (var i = 0; i < selected.length; i += 1) {
var member = selected[i].data; // selected是Ext.data.Record类型数组.
if (member[0]) { // Record类型的ID属性标识唯一性.
ids.push(member[0]); // 如果有ID属性,则表示该行数据是被修改过的,所以需要访问数据库进行删除
} else {
// 如果没有ID属性,则表示该行数据是新添加的未保存的数据,所以不需要访问数据库进行删除该行
store.remove(store.getAt(i));
}
};
if (ids.join('') == '')
return;
Ext.Msg.confirm('信息', '确定要删除所选项吗?', function(btn) {
if (btn == 'yes') {
// 发送删除请求
Ext.Ajax.request({
method : 'POST',
%3
posted on 2008-09-22 13:24
紫蝶∏飛揚↗ 阅读(1223)
评论(3) 编辑 收藏 所属分类:
EXTJS