extjs-mvc結構實踐(五):實現用戶管理的增刪改查
通過前面幾篇文章的介紹，一個基本的MVC結構應該是具有了。並且上一篇文章中，也已經實現了一個基本的用戶管理列表頁面。接着上一篇，完善用戶管理，實現增刪改。爲了用戶體驗，增長和修改用戶信息的表單，都放在彈窗中進行。避免跳轉頁面。
定義用戶增長窗口:app/luter/view/sys/user/UserAdd.js
Ext.define('luter.view.sys.user.UserAdd', {
extend: 'Ext.window.Window',//擴展window組件
alias: 'widget.useraddview',
requires: [],
constrain: true,//約束窗體彈出，別出瀏覽器可視範圍
modal: true,//模態
maximizable: true,//能夠最大化
iconCls: baseConfig.appicon.add,//圖標
layout: "fit",//自適應佈局
width: 700,
autoHeight: true,//自適應高度
viewModel: {
data: {
title: ''
}
},
bind: {
title: '新增用戶: ' + '{title}'//綁定這個空間的title屬性上
},
initComponent: function () {
var me = this;
//加入一個表單，表單內元素經過loadView方法添加
me.items = [{
xtype: 'form',
width: 700,
autoHeight: true,
fieldDefaults: {
labelAlign: 'right',
labelStyle: 'font-weight:bold;'
},
border: false
}]
//操做按鈕直接加載window上
me.buttons = ['->', {
text: '新增',
cls: 'green-btn',
iconCls: baseConfig.appicon.add,
handler: function () {
var form = this.down('form');
if (form.isValid()) {
form.submit({
url: 'sys/user/add',
method: 'POST',
waitTitle: "提示",
waitMsg: '正在提交數據，請稍後 ……',
success: function (form, action) {//添加成功後提示消息，而且刷新用戶列表數據
me.close();
DealAjaxResponse(action.response);
Ext.data.StoreManager.lookup('UserStore').load();
},
failure: function (form, action) {
DealAjaxResponse(action.response);
}
});
} else {
toast({
msg: '表單填寫錯誤，請確認'
})
}
},
scope: this
}, '-', {
text: '放棄',
cls: 'red-btn',
iconCls: baseConfig.appicon.undo,
handler: function () {
me.close();
},
scope: this
}]
me.callParent(arguments);
},
//form表單的渲染在這裏完成，目的是能夠經過建立操做傳入參數
loadView: function (config) {
var formCmp = this.getComponent(0);
formCmp.add([{
columnWidth: 1,
layout: "form",
items: [{
xtype: "textfield",
fieldLabel: baseConfig.model.user.username,
name: 'username',
maxLength: 250,
maxLengthText: '請輸入{0}個字之內',
emptyText: '登陸用的用戶名',
bind: '{title}',//mvvm數據綁定，輸入的時候同步就顯示在win的title上了
allowBlank: false,
flex: 1
},
{
xtype: "textfield",
fieldLabel: baseConfig.model.user.real_name,
name: 'real_name',
maxLength: 10,
maxLengthText: '請輸入{0}個字之內',
emptyText: '真實姓名',
allowBlank: false,
flex: 1
}
]
}]);
}
});
添加用戶的觸發動做是在用戶列表頁面的添加按鈕，因此，還須要修改一下用戶列表頁面裏對應位置，加入觸發動做，以下：javascript
。。。。。
me.dockedItems = [{
xtype: 'toolbar',
items: [{
text: '添加',
iconCls: baseConfig.appicon.add,
tooltip: '添加',
handler: function () {
//create的時候，js會動態加載進來。
var win = Ext.create('luter.view.sys.user.UserAdd', {
animateTarget: this//以這個按鈕爲錨點動畫打開win
});
win.loadView();//給form加入元素，能夠在這裏傳入一些參數給將要打開的添加頁面
win.show();//顯示這個窗體
}
}]
}]
。。。。。。
定義用戶信息修改窗口:app/luter/view/sys/user/UserEdit.js
Ext.define('luter.view.sys.user.UserEdit', {
extend: 'Ext.window.Window',//擴展window組件
alias: 'widget.usereditview',
requires: [],
constrain: true,//約束窗體彈出，別出瀏覽器可視範圍
modal: true,//模態
maximizable: true,//能夠最大化
iconCls: baseConfig.appicon.update,//圖標
layout: "fit",//自適應佈局
width: 700,
autoHeight: true,//自適應高度
initComponent: function () {
var me = this;
//加入一個表單，表單內元素經過loadView方法添加
me.items = [{
xtype: 'form',
width: 700,
autoHeight: true,
fieldDefaults: {
labelAlign: 'right',
labelStyle: 'font-weight:bold;'
},
border: false
}]
//操做按鈕直接加載window上
me.buttons = ['->', {
text: '新增',
cls: 'green-btn',
iconCls: baseConfig.appicon.add,
handler: function () {
var form = this.down('form');
if (form.isValid()) {
form.submit({
url: 'sys/user/update',
method: 'POST',
waitTitle: "提示",
waitMsg: '正在提交數據，請稍後 ……',
success: function (form, action) {//添加成功後提示消息，而且刷新用戶列表數據
me.close();
DealAjaxResponse(action.response);
Ext.data.StoreManager.lookup('UserStore').load();
},
failure: function (form, action) {
DealAjaxResponse(action.response);
}
});
} else {
toast({
msg: '表單填寫錯誤，請確認'
})
}
},
scope: this
}, '-', {
text: '放棄',
cls: 'red-btn',
iconCls: baseConfig.appicon.undo,
handler: function () {
me.close();
},
scope: this
}]
me.callParent(arguments);
},
loadView: function (config) {
var formCmp = this.getComponent(0);
formCmp.add([{
columnWidth: 1,
layout: "form",
items: [{
xtype: "hidden",//這裏放一個隱藏控件，由於是修改記錄，因此必須提交ID
name: 'id'
}, {
xtype: "textfield",
fieldLabel: baseConfig.model.user.username,
name: 'username',
maxLength: 250,
maxLengthText: '請輸入{0}個字之內',
emptyText: '登陸用的用戶名',
allowBlank: false,
flex: 1
},
{
xtype: "textfield",
fieldLabel: baseConfig.model.user.real_name,
name: 'real_name',
maxLength: 10,
maxLengthText: '請輸入{0}個字之內',
emptyText: '真實姓名',
allowBlank: false,
flex: 1
}
]
}]);
}
});
咱們但願在雙擊用戶列表中的某一條記錄(某個用戶)的時候，彈出用戶修改對話框，因此，修改用戶列表頁面代碼，添加列表行雙擊事件的監聽，以下：css
。。。。。。
me.listeners = {
'itemdblclick': function (table, record, html, row, event, opt) {
if (record) {
var id = record.get('id');
var view = Ext.create('luter.view.sys.user.UserEdit', {title: '編輯數據', animateTarget: this});
view.loadView();
//爲了保證數據完整性，拿到這條數據的ID後，須要從後臺獲取當前這條數據，而後再修改
//對於後臺而言，最好對數據設置@version功能，確保數據一致性。
loadFormDataFromDb(view, 'app/testdata/user.json');
} else {
showFailMesg({
msg: '加載信息失敗，請確認。'
})
}
}
}
。。。。。。
添加記錄刪除操做
在用戶列表中，設置action列,實現刪除操做，以下:html
.......
me.columns = [{
xtype: 'rownumberer',
text: '序號',
width: 60
}, {
header: "操做",
xtype: "actioncolumn",
width: 60,
sortable: false,
items: [{
text: "刪除",
iconCls: 'icon-delete',
tooltip: "刪除這條記錄",
handler: function (grid, rowIndex, colIndex) {
var record = grid.getStore().getAt(rowIndex);
if (!record) {
toast({
msg: '請選中一條要刪除的記錄'
})
} else {
showConfirmMesg({
message: '肯定刪除這條記錄?',
fn: function (btn) {
if (btn === 'yes') {
showToastMessage('啥意思?');//測試一下而已，實際狀況是執行ajax刪除，以下。
// Ext.Ajax.request({
// url: 'sys/user/delete',
// method: 'POST',
// params: {
// id: record.get('id')
// },
// success: function (response, options) {
// DealAjaxResponse(response);
// Ext.data.StoreManager.lookup('UserStore').load();
// },
// failure: function (response, options) {
// DealAjaxResponse(response);
// }
// });
} else {
Ext.toast({
title:'看...',
width:200,
html: '不刪了.....'
});
return false;
}
}
})
}
}
}]
}, {
header: baseConfig.model.user.id,
dataIndex: 'id',
hidden: false,
flex: 1
},
{
header: baseConfig.model.user.username,
dataIndex: 'username',
flex: 1
},
{
header: baseConfig.model.user.real_name,
dataIndex: 'real_name',
flex: 1
}
]
.......
extjs樣式覆蓋app/resource/css/admin.css
主要覆蓋了左側導航菜單treelist和中間tabpanel的部分風格樣式，
記得在app.html中extjs樣式以後引入覆蓋樣式java
.x-treelist-navigation {
background-color: #32404e;
background-position: 44px 0%;
padding: 0 0 0 0
}
.x-big .x-treelist-navigation {
background-position: 0%
}
.x-treelist-navigation .x-treelist-toolstrip {
background-color: #32404e
}
.x-treelist-navigation .x-treelist-item-selected.x-treelist-item-tool {
background-color: #475360
}
.x-treelist-navigation .x-treelist-item-selected.x-treelist-item-tool:after {
height: 50px;
position: absolute;
top: 0;
left: 0;
content: " ";
width: 5px;
background-color: #35baf6
}
.x-treelist-navigation .x-treelist-item-selected > .x-treelist-row {
background-color: #475360
}
.x-treelist-navigation .x-treelist-item-tool {
padding-left: 10px;
padding-right: 10px
}
.x-treelist-navigation .x-treelist-item-tool-floated:after {
height: 50px;
position: absolute;
top: 0;
left: 0;
content: " ";
width: 5px;
background-color: #35baf6
}
.x-treelist-navigation .x-treelist-item-icon:before, .x-treelist-navigation .x-treelist-item-tool:before, .x-treelist-navigation .x-treelist-item-expander {
line-height: 50px
}
.x-treelist-navigation .x-treelist-item-icon, .x-treelist-navigation .x-treelist-item-tool, .x-treelist-navigation .x-treelist-item-expander {
text-align: center;
background-repeat: no-repeat;
background-position: 0 center
}
.x-treelist-navigation .x-treelist-item-icon, .x-treelist-navigation .x-treelist-item-tool {
color: #adb3b8;
font-size: 18px;
width: 44px
}
.x-treelist-navigation .x-treelist-item-tool {
width: 50px
}
.x-treelist-navigation .x-treelist-item-expander {
color: #fff;
font-size: 16px;
width: 24px
}
.x-treelist-navigation .x-treelist-item-text {
color: #adb3b8;
margin-left: 50px;
margin-right: 24px;
font-size: 14px;
font-weight: 900;
line-height: 50px
}
.x-treelist-navigation .x-treelist-row {
padding-left: 10px;
padding-right: 10px
}
.x-treelist-navigation .x-treelist-row-over:before, .x-treelist-navigation .x-treelist-item-selected > .x-treelist-row:before {
content: " ";
position: absolute;
display: block;
left: 0;
top: 0;
width: 5px;
height: 100%
}
.x-treelist-navigation .x-treelist-row-over:before {
background-color: transparent
}
.x-treelist-navigation .x-treelist-item-selected > .x-treelist-row-over:before {
background-color: #57c6f8
}
.x-treelist-navigation .x-treelist-item-selected > .x-treelist-row:before {
background-color: #35baf6
}
.x-treelist-navigation .x-treelist-item-floated .x-treelist-container {
width: auto
}
.x-treelist-navigation .x-treelist-item-floated > .x-treelist-row {
background-color: #32404e
}
.x-treelist-navigation .x-treelist-item-floated > .x-treelist-container {
margin-left: -44px
}
.x-big .x-treelist-navigation .x-treelist-item-floated > .x-treelist-container {
margin-left: 0
}
.x-treelist-navigation .x-treelist-item-floated > * > * > .x-treelist-item-text {
margin-left: 0
}
.x-treelist-navigation .x-treelist-item-floated > * .x-treelist-row {
padding-left: 0
}
.x-treelist-navigation .x-treelist-item-floated .x-treelist-row:before {
width: 0
}
.x-treelist-navigation .x-treelist-item-floated > .x-treelist-row-over {
background-color: #32404e
}
.x-treelist-navigation .x-treelist-item-floated > .x-treelist-row-over > * > .x-treelist-item-text {
color: #adb3b8
}
.x-treelist-navigation .x-treelist-item-expanded {
background-color: #2c3845
}
.x-treelist-navigation.x-treelist-highlight-path .x-treelist-item-over > * > .x-treelist-item-icon {
color: #fff
}
.x-treelist-navigation.x-treelist-highlight-path .x-treelist-item-over > * > .x-treelist-item-text {
color: #d6d9dc
}
.x-treelist-navigation.x-treelist-highlight-path .x-treelist-item-over > * > .x-treelist-item-expander {
color: #fff
}
.x-treelist-navigation .x-treelist-row-over {
background-color: #3c4a57
}
.x-treelist-navigation .x-treelist-row-over > * > .x-treelist-item-icon {
color: #fff
}
.x-treelist-navigation .x-treelist-row-over > * > .x-treelist-item-text {
color: #d6d9dc
}
.x-treelist-navigation .x-treelist-row-over > * > .x-treelist-item-expander {
color: #fff
}
.x-treelist-navigation .x-treelist-expander-first .x-treelist-item-icon {
left: 24px
}
.x-treelist-navigation .x-treelist-expander-first .x-treelist-item-text {
margin-left: 74px;
margin-right: 0
}
.x-treelist-navigation .x-treelist-expander-first .x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
margin-left: 30px
}
.x-treelist-navigation .x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
margin-left: 6px
}
.x-tab-bar-default{
height: 40px;
/*background-color: #0e2349;*/
}
.x-tab-default-top {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
padding: 8px 10px 7px 10px;
border-width: 0;
border-style: solid;
background-color: transparent
}
.x-tab-bar-default-top > .x-tab-bar-body-default{
padding:0
}
.x-nbr .x-tab-default-top {
padding: 0 !important;
border-width: 0 !important;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
border-radius: 0px;
background-color: transparent !important;
box-shadow: none !important
}
.x-tab-default {
border-color: transparent;
cursor: pointer
}
.x-tab-default-top {
margin: 0 4px 0 0
}
.x-tab-default-top.x-tab-rotate-left {
margin: 0 0 0 4px
}
.x-tab-default-top.x-tab-focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none
}
.x-tab-default-top.x-tab-focus.x-tab-over {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none
}
.x-tab-default-top.x-tab-focus.x-tab-active {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: #1d9ce5;
}
.x-tab-button-default {
padding-top: 5px;
height: 20px
}
.x-tab-inner-default {
font: 500 13px/20px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
/*color: #f0f0f0;*/
max-width: 100%
}
.x-tab-bar-plain .x-tab-inner-default {
color: #606060
}
.x-tab-icon-right>.x-tab-inner-default,
.x-tab-icon-left>.x-tab-inner-default {
max-width: calc(100% - 20px)
}
.x-tab-icon-el-default {
min-height: 20px;
background-position: center center;
font-size: 20px;
line-height: 20px;
color: #f0f0f0
}
.x-tab-icon-left>.x-tab-icon-el-default,
.x-tab-icon-right>.x-tab-icon-el-default {
width: 20px
}
.x-tab-icon-top>.x-tab-icon-el-default,
.x-tab-icon-bottom>.x-tab-icon-el-default {
min-width: 20px
}
.x-tab-bar-plain .x-tab-icon-el-default {
color: #606060
}
.x-tab-icon-el-default.x-tab-glyph {
opacity: 0.7
}
.x-tab-text.x-tab-icon-left>.x-tab-icon-el-default {
margin-right: 6px
}
.x-tab-text.x-tab-icon-right>.x-tab-icon-el-default {
margin-left: 6px
}
.x-tab-text.x-tab-icon-top>.x-tab-icon-el-default {
margin-bottom: 6px
}
.x-tab-text.x-tab-icon-bottom>.x-tab-icon-el-default {
margin-top: 6px
}
.x-tab-focus.x-tab-default {
border-color: transparent;
background-color: transparent;
outline: 1px solid #35baf6;
outline-offset: -3px
}
.x-ie .x-tab-focus.x-tab-default,
.x-ie10p .x-tab-focus.x-tab-default,
.x-edge .x-tab-focus.x-tab-default {
outline: none
}
.x-ie .x-tab-focus.x-tab-default:after,
.x-ie10p .x-tab-focus.x-tab-default:after,
.x-edge .x-tab-focus.x-tab-default:after {
position: absolute;
content: ' ';
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
border: 1px solid #35baf6;
pointer-events: none
}
.x-tab-bar-plain .x-tab-focus.x-tab-default .x-tab-inner-default {
color: #606060
}
.x-tab-bar-plain .x-tab-focus.x-tab-default .x-tab-icon-el {
color: #606060
}
.x-tab-over.x-tab-default {
border-color: #000;
background-image: none;
background-color: rgba(0, 0, 0, 0.08)
}
.x-ie8 .x-tab-over.x-tab-default {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#14000000, endColorstr=#14000000)";
zoom: 1
}
.x-ie8 .x-tab-over.x-tab-default.x-tab-rotate-left {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"
}
.x-ie8 .x-tab-over.x-tab-default.x-tab-rotate-right {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
}
.x-tab-bar-plain .x-tab-over.x-tab-default .x-tab-inner-default {
color: #606060
}
.x-tab-bar-plain .x-tab-over.x-tab-default .x-tab-icon-el {
color: #606060
}
.x-tab-focus.x-tab-over.x-tab-default {
border-color: #000;
background-image: none;
background-color: rgba(0, 0, 0, 0.08)
}
.x-ie8 .x-tab-focus.x-tab-over.x-tab-default {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#14000000, endColorstr=#14000000)";
zoom: 1
}
.x-ie8 .x-tab-focus.x-tab-over.x-tab-default.x-tab-rotate-left {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"
}
.x-ie8 .x-tab-focus.x-tab-over.x-tab-default.x-tab-rotate-right {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
}
.x-tab-bar-plain .x-tab-focus.x-tab-over.x-tab-default .x-tab-inner-default {
color: #606060
}
.x-tab-bar-plain .x-tab-focus.x-tab-over.x-tab-default .x-tab-icon-el {
color: #606060
}
.x-tab.x-tab-active.x-tab-default {
border-color: #fff;
background-color: #fff
}
.x-tab.x-tab-active.x-tab-default .x-tab-inner-default {
color: #105bf3
}
.x-tab-bar-plain .x-tab.x-tab-active.x-tab-default .x-tab-inner-default {
color: #404040
}
.x-tab.x-tab-active.x-tab-default .x-tab-icon-el {
color: #105bf3
}
.x-ie8 .x-tab.x-tab-active.x-tab-default .x-tab-icon-el {
color: #6ab5d6
}
.x-tab-bar-plain .x-tab.x-tab-active.x-tab-default .x-tab-icon-el {
color: #404040
}
.x-tab-focus.x-tab-active.x-tab-default {
border-color: #fff;
background-color: #fff
}
.x-tab-bar-plain .x-tab-focus.x-tab-active.x-tab-default .x-tab-inner-default {
color: #404040
}
.x-tab-bar-plain .x-tab-focus.x-tab-active.x-tab-default .x-tab-icon-el {
color: #404040
}
.x-tab.x-tab-disabled.x-tab-default {
border-color: transparent;
background-color: transparent;
cursor: default
}
.x-tab.x-tab-disabled.x-tab-default .x-tab-inner-default {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
opacity: 0.3
}
.x-tab-bar-plain .x-tab.x-tab-disabled.x-tab-default .x-tab-inner-default {
color: #606060
}
.x-tab.x-tab-disabled.x-tab-default .x-tab-icon-el-default {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: 0.5
}
.x-tab.x-tab-disabled.x-tab-default .x-tab-icon-el {
color: #f0f0f0;
opacity: 0.3;
filter: none
}
.x-tab-bar-plain .x-tab.x-tab-disabled.x-tab-default .x-tab-icon-el {
color: #606060
}
.x-nbr .x-tab-default {
background-image: none
}
.x-tab-default .x-tab-close-btn:before {
content: "\f00d"
}
.x-tab-default .x-tab-close-btn {
top: 0;
right: 0;
width: 12px;
height: 12px;
font: 12px/1 FontAwesome;
color: red
}
.x-tab-default.x-tab-active .x-tab-close-btn {
color: red
}
.x-tab-default .x-tab-close-btn-over {
background-position: -12px 0;
color: red
}
至此，應該能看到基本的界面的樣子了:)web
相關文章
- 1. Nodejs+Express+Mysql實現簡單用戶管理增刪改查
- 2. 增刪查改的實現
- 3. 超詳細的JavaWeb用戶的增刪改查實現總結
- 4. Linux用戶管理（增刪改查）
- 5. （七）用戶管理（增刪改查）
- 6. MyBatis實現增刪改查
- 7. spring 實現增刪查改
- 8. 3、增刪改查實現
- 9. Hibernate 實現增刪查改
- 10. JDBCTemplate實現增刪查改
- 更多相關文章...
- • Hibernate實現增刪改查 - Hibernate教程
- • Thymeleaf項目實踐 - Thymeleaf 教程
- • ☆基於Java Instrument的Agent實現
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Nodejs+Express+Mysql實現簡單用戶管理增刪改查
- 2. 增刪查改的實現
- 3. 超詳細的JavaWeb用戶的增刪改查實現總結
- 4. Linux用戶管理（增刪改查）
- 5. （七）用戶管理（增刪改查）
- 6. MyBatis實現增刪改查
- 7. spring 實現增刪查改
- 8. 3、增刪改查實現
- 9. Hibernate 實現增刪查改
- 10. JDBCTemplate實現增刪查改