/*!
* Ext JS Library 3.2.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
var newFormWin;
var userform;
// create the Data Store 數據
var store = new Ext.data.JsonStore({
root: 'pageResult',
totalProperty: 'totalRecords',
idProperty: 'userId',
remoteSort: true,
fields: [
'userEmail',
'userAge',
'userAddress',
'country',
'userSex',
'crtDate',
'city',
'province',
'race',
'userPhone',
'userName',
'userId'
],
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: '請求數據路徑'
})
});
//分頁顯示用戶數據
var grid = new Ext.grid.GridPanel({
autoFill : false,
autoHeight : true,
width:700,//寬度
//height:300,//高度
title:'用戶信息表',
store: store,//數據
trackMouseOver:false,
disableSelection:true,
//加載的圖標是否顯示
loadMask: true,
//單行選中
sm: new Ext.grid.CheckboxSelectionModel ({ singleSelect: false }),//復選框
// grid columns列
columns:[
new Ext.grid.CheckboxSelectionModel({singleSelect : false}),//復選框
//new Ext.grid.RowNumberer(),//序號
{
id: 'userName', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "用戶名",
dataIndex: 'userName',
//align: 'center',
sortable: false
},{
header: "年齡",
dataIndex: 'userAge',
//align: 'center',
sortable: false
},{
header: "email",
dataIndex: 'userEmail',
//align: 'center',
sortable: false
},{
header: "電話",
dataIndex: 'userPhone',
//align: 'center',
sortable: false
}],
// customize view config
viewConfig: {
forceFit:true,//True表示為自動展開/縮小列的寬度以適應grid的寬度，這樣就不會出現水平的滾動條。
enableRowBody:true,//True表示為在每一數據行的下方加入一個TR的元素
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
return 'x-grid3-row-expanded';
// return 'x-grid3-row-collapsed';
}
},
// 添加內陷的按鈕
tbar : [ {
id : 'addUserForm',
text : ' 新建 ',
tooltip : '新建一個表單',
iconCls : 'add',
handler : function() {
add_btn();
}
}, '-', {
id : 'editUserForm',
text : '修改',
tooltip : '修改',
iconCls : 'edit',
handler : function() {
edit_btn();
}
}, '-', {
text : '刪除',
tooltip : '刪除被選擇的內容',
iconCls : 'remove',
handler : function() {
handleDelete();
}
}],
// paging bar on the bottom分頁按鈕
bbar: new Ext.PagingToolbar({
pageSize: 10,//每頁條數
store: store,//數據
displayInfo: true,
displayMsg: '從{0}條到{1}條 總共 {2}條',
emptyMsg: "沒有數據"
})
});
// render it顯示的層
grid.render('user-grid');
// trigger the data store load 加載用戶
store.load({params:{start:0, limit:10}});
//添加用戶按鈕
var add_btn = function() {
addFormWin();
};
//添加和修改公用的用戶的form=========開始==========================================================================================================================
var userForm = new Ext.FormPanel( {
// collapsible : true,// 是否可以展開
labelWidth : 75, // label settings here cascade unless overridden
frame : true,
bodyStyle : 'padding:5px 5px 0',
waitMsgTarget : true,
//reader : _jsonFormReader,
defaults : {
width : 230
},
defaultType : 'textfield',
items : [{
fieldLabel : 'id',
name : 'userId',
emptyText: 'id',
hidden: true,
hideLabel:true,
allowBlank : true
}, {
fieldLabel : '用戶名',
name : 'userName',
emptyText: '用戶名',
allowBlank : false
}, {
fieldLabel : '年齡',
name : 'userAge',
emptyText: '年齡',
xtype : 'numberfield',
allowBlank : false
},
new Ext.form.RadioGroup({
fieldLabel : '性別',
name:'userSex',
items:[
{boxLabel: '男', name: 'userSex', inputValue: 1},
{boxLabel: '女', name: 'userSex', inputValue: 2}
]
}), {
fieldLabel : '種族',
name : 'race',
emptyText: '民族',
allowBlank : false
}, {
fieldLabel : '電話',
name : 'userPhone',
emptyText: '聯系電話',
allowBlank : false
}, {
fieldLabel : 'Email',
name : 'userEmail',
vtype:'email',
vtypeText:"不是有效的郵箱地址",
allowBlank : false
}, {
fieldLabel : '國家',
name : 'country',
emptyText: '國家',
allowBlank : false
},{
fieldLabel : '省市',
name : 'province',
emptyText: '省市',
allowBlank : false
}, {
fieldLabel : '城市',
name : 'city',
emptyText: '城市',
allowBlank : false
}, {
fieldLabel : '地址',
name : 'userAddress',
emptyText: '地址',
allowBlank : false
}]
});
//添加和修改公用的用戶的form=========結束==========================================================================================================================
//添加操作開始==========================================================================================================================
// form_win定義一個Window對象，用於新建和修改時的彈出窗口。
//添加用戶的window
var addFormWin = function() {
// create the window on the first click and reuse on subsequent
// clicks 判斷此窗口是否已經打開了，防止重復打開
if (!newFormWin) {
newFormWin = new Ext.Window( {
el : 'topic-win',
layout : 'fit',
width : 400,
height : 400,
closeAction : 'hide',
plain : true,
title : '添加用戶',
items : userForm,
buttons : [ {
text : '保存',
disabled : false,
handler :
addBtnsHandler
}, {
text : '取消',
handler : function() {
userForm.form.reset();//清空表單
newFormWin.hide();
}
}]
});
}
newFormWin.show('addUserForm');//顯示此窗口
}
//添加操作按鈕
function addBtnsHandler() {
if (userForm.form.isValid()) {
userForm.form.submit( {
url : '請求數據路徑',
waitMsg : '正在保存數據，稍后...',
success : function(form, action) {
Ext.Msg.alert('保存成功', '添加用戶信息成功！');
userForm.form.reset();//清空表單
grid.getStore().reload();
newFormWin.hide();
},
failure : function(form, action) {
Ext.Msg.alert('保存失敗', '添加人員信息失敗！');
}
});
}
else {
Ext.Msg.alert('信息', '請填寫完成再提交!');
}
}
//添加操作結束==========================================================================================================================
//修改操作開始==========================================================================================================================
//點擊修改按鈕加載數據
function edit_btn(){
var selectedKeys = grid.selModel.selections.keys;//returns array of selected rows ids only
//判斷是否選中一行數據 沒有選中提示沒有選中，選中加載信息
if(selectedKeys.length != 1){
Ext.MessageBox.alert('提示','請選擇一條記錄！');
} //加載數據
else{
var EditUserWin = new Ext.Window({
title: '修改員工資料', //題頭
layout:'fit',//布局方式
width:400,//寬度
height:400,//高度
plain: true,//渲染
items:userForm,
//按鈕
buttons: [{
text:'保存',
handler:function(){
updateHandler(EditUserWin);
}
},{
text: '取消',
handler: function(){
EditUserWin.hide();
}
}]
});
EditUserWin.show("editUserForm");
loadUser();
}
}
//加載數據
function loadUser(){
var selectedKeys = grid.selModel.selections.keys;//returns array of selected rows ids only
userForm.form.load({
waitMsg : '正在加載數據請稍后',//提示信息
waitTitle : '提示',//標題
url : '請求數據路徑',
params:{USER_ID:selectedKeys},
method:'POST',//請求方式
failure:function(form,action){//加載失敗的處理函數
Ext.Msg.alert('提示','數據加載失敗');
}
});
}
//修改按鈕操作
function updateHandler(w){
if (userForm.form.isValid()) {
userForm.form.submit({
clientValidation:true,//進行客戶端驗證
waitMsg : '正在提交數據請稍后...',//提示信息
waitTitle : '提示',//標題
url : 'http://localhost:8080/mypo/users/UserManagerAction/updateUser.json',//請求的url地址
method:'POST',//請求方式
success:function(form,action){//加載成功的處理函數
w.hide();
userForm.form.reset();//清空表單
grid.getStore().reload();
Ext.Msg.alert('提示','修改信息成功');
},
failure:function(form,action){//加載失敗的處理函數
Ext.Msg.alert('提示','ID不能修改');
Ext.Msg.alert('提示','修改信息失敗');
}
});
}else {
Ext.Msg.alert('信息', '請填寫完成再提交!');
}
}
//修改操作結束==========================================================================================================================
//刪除操作開始==========================================================================================================================
function handleDelete(){
var selectedKeys = grid.selModel.selections.keys; //returns array of selected rows ids only
if(selectedKeys.length > 0) {
Ext.MessageBox.confirm('提示','您確實要刪除選定的記錄嗎？', deleteRecord);
}else{
Ext.MessageBox.alert('提示','請至少選擇一條記錄！');
}//end
}
//刪除記錄
function deleteRecord(btn){
if(btn=='yes'){
//var selectedRows = grid.selModel.selections.items;//returns record objects for selected rows (all info for row) 獲得整行數據
var selectedKeys = grid.selModel.selections.keys;//選中的行的值id
Ext.MessageBox.show({
msg: '正在請求數據, 請稍侯',
progressText: '正在請求數據',
width:300,
wait:true,
waitConfig: {interval:200}
});
Ext.Ajax.request({
url: '請求數據路徑', //url to server side script
method: 'POST',
params:{USER_ID:selectedKeys},//the unique id(s)
failure:function(){
Ext.MessageBox.hide();
Ext.MessageBox.alert("警告","出現異常錯誤！請聯系管理員！");
},
success:function(){
Ext.MessageBox.hide();
Ext.MessageBox.alert("成功","刪除成功！");
store.reload();
}
})// end Ajax request
}
}
//刪除操作結束==========================================================================================================================
});