ext3.0 增刪改查集中到一個頁面
ext3.0 ，很新穎，很可能代表著未來B/S架構頁面框架的方向。
在用ext的時候，發現幾個小問題:
1.包的路徑不明確。嵌入的頁面沒有放到web-root目下的請求前要加../但是通過window.showModuleDialoge彈出的頁面則不需要加
2.在建樹的時候總會出現樹節點前面的空白區域出現一個個類似找不到圖片的標誌，其實是Ext.BLANK_IMAGE_URL = '../pagesExt/resources/images/default/s.gif';圖片路徑沒有寫對（../不是多了就是沒有）。
下面是我實現的一個表的增刪改查集中到一個頁面的頁面程式碼貼出來和大家討論討論：
前面的資料來源定義程式碼
//建立工具欄元件
var toolbar = new Ext.Toolbar([
{text : 'aaaaa',iconCls:'add',handler:showAddApp},//點選觸發的函式
{text : 'bbbbb',iconCls:'option',handler:showModifyApp},
{text : 'cccccc',iconCls:'remove',handler:showDeleteApp},
{text : 'dddddd',iconCls:'query',handler:showQueryApp}
]);
//建立查詢panel
var queryPanel = new Ext.Panel({
activeTab: 0,
width:800,
//baseCls:'',//作用在面板元素上的CSS樣式類 （預設為 'x-panel'）。
autoWidth:true,
hideBorders:true,//隱藏每個元件的邊框
height:40,
autoHeight : true,//自動適應高度
plain:true,
collapsible:true, //面板是可收縮的
defaults:{autoScroll: true},//應用在全體items項上的
items:[{
html: "<div id='query' style='visibility:hidden;' ></div>"
}]
});
//建立查詢工具欄
var tabs2 = new Ext.Panel({
applyTo:'panel-div',
activeTab: 0,
width:800,
autoWidth:true,
tbar : toolbar,
hideBorders:true,//隱藏每個元件的邊框
//hideLabel : true,//只能在FormLayout佈局管理器控制的容器下渲染才有用
height:40,
autoHeight : true,//自動適應高度
plain:true,
defaults:{autoScroll: true},
items:[queryPanel,{
html: "<div id='grid-div' style='width:100%; height:100%;'/>"
}]
});
//新增業務應用系統要觸發的函式
function showAddApp(){//新增
appForm.form.reset();
appForm.isAdd = true;
win.setTitle("新增 ");
win.show();
}
function showModifyApp(){//修改
var appList = getAppCheckBoxList();
var num = appList.length;
if(num > 1){
Ext.MessageBox.alert("提示","每次只能修改一條資訊。");
}else if(num == 1){
appForm.form.reset();
appForm.isAdd = false;
win.setTitle("詳細");
win.show();
var appId = appList[0];
loadForm(appId);
}
}
function showDeleteApp(){//刪除
var appList = getAppCheckBoxList();
var num = appList.length;
if(num == 0){
return;
}
Ext.MessageBox.confirm("提示","<nobr>您確定要刪除嗎?</nobr>",function(btnId){
if(btnId == 'yes'){
deleteApps(appList);
}
});
}
//查詢工具欄觸發的函式
queryPanel.collapse(true);//隱藏查詢面板
function showQueryApp(){//查詢
var queryDiv=document.getElementById('query');
if(queryDiv.style.visibility=='hidden'){
queryPanel.expand(true);// 展開面板body
queryDiv.style.visibility='visible';
queryDiv.style.width = '100%';
queryDiv.style.height='20%';
}else{
queryPanel.collapse(true);//閉合面板body隱藏其內容
queryForm.form.reset();
appStore.baseParams={
start:0,
limit:5
};
queryDiv.style.visibility='hidden';
queryDiv.style.width = '0';
queryDiv.style.height = '0';
}
}
//建立Grid表格元件
//分頁元件
var pagination=new Ext.PagingToolbar({
store: appStore,
pageSize: 5,
displayInfo: true,
beforePageText:'第',
afterPageText:'頁 共{0}頁',
firstText:'第一頁',
prevText :'前一頁',
nextText : '下一頁',
lastText : '最後一頁',
refreshText : '重新整理',
displayMsg: '資料展示條數: {0} 到 {1} 共 {2}條',
emptyMsg: "沒有資料"
});
var cb = new Ext.grid.CheckboxSelectionModel()
var appGrid = new Ext.grid.GridPanel({
applyTo : 'grid-div',
frame:true,
height:400,
autoHeight:true,
//tbar : tabs2,
store: appStore,
stripeRows : true,
autoScroll : true,
loadMask: true,
viewConfig : {
autoFill : true
},
sm : cb,
columns: [//配置表格列
cb,
//APPID APPNAME APPDESC PRIORITY APPORDER TASKTYPE TASKURL EXPIERDAYS EXPIERHOURS APPCODE
{header: " 編號", width: 120, dataIndex: 'appId', sortable: true},
{header: " 名稱", width: 160, dataIndex: 'appName', sortable: true},
{header: " 描述", width: 160, dataIndex: 'appDesc', sortable: true},
{header: " 優先順序", width: 100, dataIndex: 'priority', sortable: true},
{header: " 排序", width: 80, dataIndex: 'appOrder', sortable: true},
{header: " 獲取方式", width: 140, dataIndex: 'taskType', sortable: true},
{header: " ", width: 80, dataIndex: 'taskUrl', sortable: true},
{header: "超時 ", width: 80, dataIndex: 'expierDays', sortable: true},
{header: "超時時間", width: 80, dataIndex: 'expierHours', sortable: true},
{header: " 編碼", width: 80, dataIndex: 'appCode', sortable: true}
],
bbar:pagination
});
//建立QueryFORM
var queryForm = new Ext.FormPanel({
applyTo :'query',
frame:true,
layout: 'table',
//extraCls: 'x-abs-layout-item,.x-form-select-one',itemCSS樣式
layoutConfig: new Ext.layout.TableLayout({ columns: 8}),
border:false,
items : [
{xtype: 'tbtext', text: "<p style='font-size:8pt;'> 編號:</p>"},
{
xtype:'textfield',
width : 100,
name : 'appId'
},
{xtype: 'tbtext', text: "<p style='font-size:8pt;'> 名稱:</p>"},
{
xtype:'textfield',
width : 100,
name : 'appName'
},
{xtype: 'tbtext', text: "<p style='font-size:8pt;'> 先級:</p>"},
{
xtype:'spinnerfield',
width : 100,
minValue: 0,
maxValue: 99,
allowDecimals: true,
decimalPrecision: 1,
name : 'priority'
},
{xtype: 'tbtext', text: "<p style='font-size:8pt;'> 排序:</p>"},
{
xtype:'spinnerfield',
width : 100,
minValue: 0,
maxValue: 99,
allowDecimals: true,
decimalPrecision: 1,
name : 'appOrder'
},
{xtype: 'tbtext', text: "<p style='font-size:8pt;'> 獲取方式:</p>"},
{
//代辦獲取方式預設值是0
xtype:'combo',
width : 100,
store : typeStore,//設定資料來源
hiddenName : 'taskType',
allQuery:'all',//查詢全部資訊的查詢字串
triggerAction: 'all',//單擊觸發按鈕顯示全部資料
editable : false,//禁止編輯
loadingText : '正在載入代辦獲取方式資訊',//載入資料時顯示的提示資訊
displayField:'name',//定義要顯示的欄位
valueField : 'TaskTypeId',
mode: 'remote',//遠端模式
name : 'taskType'
},
{xtype: 'tbtext', text: "<p style='font-size:8pt;'> 介面:</p>"},
{
xtype : 'textfield',
width : 100,
name : 'taskUrl'
},
{xtype: 'tbtext', text: "<p style='font-size:8pt;'> 編碼:</p>"},
{
xtype : 'textfield',
width : 100,
name : 'appCode'
},{
xtype:'button',
text : '查 詢',
handler : querySubmit //點選提交按鈕觸發的函式
}
]
});
//查詢面板內的button觸發的函式
function querySubmit(){
var fields = queryForm.items;
var obj = {};
for(var i = 0 ; i < fields.length ; i++){
var item = fields.itemAt(i);
if(item.getXType() != 'tbtext' && item.getXType() != 'button'){
var value = item.getValue();
if(item.getXType() == 'combo'){
var index = item.store.find('name',value);
if(index != -1){
var selItem = item.store.getAt(index);
value = selItem.get('id');
}
}
obj[item.name] = value;
}
}
var appName=obj['appName'];
var appId=obj['appId'];
var priority=obj['priority'];
var taskType=obj['taskType'];
var appOrder=obj['appOrder'];
var taskUrl=obj['taskUrl'];
var taskCode=obj['taskCode'];
appStore.baseParams={
start:0,
limit:5,
appName:appName,
appId:appId,
priority:priority,
taskType:taskType,
appOrder:appOrder,
taskUrl:taskUrl,
taskCode:taskCode
};
appStore.load();
appStore.commitChanges();
}
//
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';//統一指定錯誤資訊提示方式
var appForm = new Ext.FormPanel({
labelSeparator : "：",
frame:true,
border:false,
items : [
{
xtype:'textfield',
width : 200,
allowBlank : false,//不允許為空
blankText : ' 名稱不能為空',
name : 'appName',
fieldLabel:' 名稱'
},{
xtype:'textarea',
width : 200,
name : 'appDesc',
fieldLabel:' 描述'
},{
xtype:'spinnerfield',
width : 200,
minValue: 0,
maxValue: 99,
allowDecimals: true,
decimalPrecision: 1,
value: '0',
name : 'priority',
fieldLabel : ' 優先順序'
},{
xtype:'spinnerfield',
width : 200,
minValue: 0,
maxValue: 99,
allowDecimals: true,
decimalPrecision: 1,
value : '0',
name : 'appOrder',
fieldLabel:' 排序'
},{
//
xtype:'combo',
width : 200,
allowBlank : false,
blankText : '必須選擇 方式',
store : typeStore,//設定資料來源
hiddenName : 'taskType',
allQuery:'all',//查詢全部資訊的查詢字串
triggerAction: 'all',//單擊觸發按鈕顯示全部資料
editable : false,//禁止編輯
loadingText : '正在載入代辦獲取方式資訊',//載入資料時顯示的提示資訊,僅當mode為remote時可用
displayField:'name',//定義要顯示的欄位
valueField : 'TaskTypeId',
mode: 'local',//遠端模式
emptyText:'請選擇代辦獲取方式',
//value:'0',
name:'taskType',
fieldLabel:' 方式'
},{
xtype : 'textfield',
width : 200,
name : 'taskUrl',
fieldLabel:' 介面'
},{
xtype : 'spinnerfield',
width : 200,
minValue: 0,
maxValue: 99,
allowDecimals: true,
decimalPrecision: 1,
value:'0',
name : 'expierDays',
fieldLabel:' 天數'
},{
xtype: 'spinnerfield',
width : 200,
minValue: 0,
maxValue: 24,
allowDecimals: true,
decimalPrecision: 1,
value:'0',
name : 'expierHours',
fieldLabel:' 時間'
},{
xtype : 'textfield',
width : 200,
name : 'appCode',
fieldLabel:' 編碼'
},{
xtype:'hidden',
name : 'appId'
}
],
buttons:[
{
text : '提交',
handler : submitForm
},
{
text : '關閉',
handler : function(){
win.hide();
}
}
]
});
//載入表單資料
function loadForm(appId){
appForm.form.load({
waitMsg : '正在載入資料,請稍後',//提示資訊
waitTitle : '提示',//標題
url : 'app.do?method=appPreEdit',//請求的url地址
params : {appId:appId},
method:'GET',//請求方式
success:function(form,action){//載入成功的處理函式
},
failure:function(form,action){//載入失敗的處理函式
Ext.MessageBox.alert('提示','資料載入失敗');
}
});
}
//刪除
function deleteApps(appList){
var appids = appList.join('-');
var msgTip = Ext.MessageBox.show({
title:'提示',
width : 250,
msg:'正在刪除 資訊,請稍後......'
});
Ext.Ajax.request({
url : 'app.do?method=appDel',
params : {appId : appids},
method : 'POST',
success : function(response,options){
msgTip.hide();
var result = Ext.util.JSON.decode(response.responseText);
if(result.success){
//伺服器端資料成功刪除後，同步刪除客戶端列表中的資料
for(var i = 0 ; i < appList.length ; i++){
var index = appStore.find('appId',appList[i]);
if(index != -1){
var rec = appStore.getAt(index)
appStore.remove(rec);
}
}
Ext.MessageBox.alert('提示','刪除 成功.');
}else{
Ext.MessageBox.alert('提示','刪除 失敗！');
}
},
failure : function(response,options){
msgTip.hide();
Ext.MessageBox.alert('提示','刪除 請求失敗！');
}
});
}
//彈出視窗建立
var win = new Ext.Window({
layout:'fit',
width:380,
closeAction:'hide',
height:380,
resizable : false,
shadow : true,
modal :true,
closable:true,
bodyStyle:'padding:5 5 5 5',
animCollapse:true,
items:[appForm]
});
//表單提交處理函式
function submitForm(){
if(appForm.isAdd==true){
appForm.form.submit({
clientValidation:true,//進行客戶端驗證
waitTitle : '提示',//標題
waitMsg : '正在提交資料,請稍後',//提示資訊
url : 'app.do?method=appAdd',//請求的url地址
method:'POST',//請求方式
success:function(form,action){//載入成功的處理函式
win.hide();
updateAppList(action.result.appId);
Ext.MessageBox.alert('提示','新增 成功');
},
failure:function(form,action){//載入失敗的處理函式
Ext.MessageBox.alert('提示','新增 失敗');
}
});
}else{
appForm.form.submit({
clientValidation : true,
waitMsg : '正在提交資料,請稍後',
waitTitle : '提示',
url : 'app.do?method=appEdit',
method : 'POST',
success : function(form,action){
win.hide();
updateAppList(action.result.appId);
Ext.MessageBox.alert('提示','修改 成功');
},
failure : function(form,action){
Ext.MessageBox.alert('提示','修改 失敗');
}
});
}
}
//明細資料修改後，同步更新列表資訊
function updateAppList(appId){
var fields = getFormFieldsObj(appId);
var index = appStore.find('appId',appId);
if(index != -1){
var item = appStore.getAt(index);
for(var fieldName in fields){
item.set(fieldName,fields[fieldName]);
}
appStore.commitChanges();
}else{
fields['appId']=appId;
var rec = new Ext.data.Record(fields);
appStore.add(rec);
}
}
//取得表單資料
function getFormFieldsObj(appId){
var fields = appForm.items;
var obj = {};
for(var i = 0 ; i < fields.length ; i++){
var item = fields.itemAt(i);
var value = item.getValue();
if(item.getXType() == 'combo'){
var index = item.store.find('TaskTypeId',value);
if(index != -1){
var selItem = item.store.getAt(index);
value = selItem.get('name');
}
}
obj[item.name] = value;
}
if(Ext.isEmpty(obj['id'])){
obj['id'] = appId;
}
return obj;
}
//獲取列表中已選擇的資料
function getAppCheckBoxList(){
var recs = appGrid.getSelectionModel().getSelections();
var list = [];
if(recs.length == 0){
Ext.MessageBox.alert('提示','<nobr>請選擇要進行操作的資料!</nobr>');
}else{
for(var i = 0 ; i < recs.length ; i++){
var rec = recs[i];
list.push(rec.get('appId'))
}
}
return list;
}