//功能:根據輸入的編碼傳給后臺分析,回傳所需的數據及數據自定義的列格式,列名,查詢分頁等
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
紫蝶∏飛揚↗ 閱讀(1247)
評論(3) 編輯 收藏 所屬分類:
EXTJS