资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/extjs-mvc结构实践(五):实现用户管理的增删改查

extjs-mvc结构实践(五):实现用户管理的增删改查

wendux / 1497人阅读

摘要：而且上一篇文章中，也已经实现了一个基本的用户管理列表页面。接着上一篇，完善用户管理，实现增删改。为了用户体验，增加和修改用户信息的表单，都放在弹窗中进行。

</>复制代码 
  1. 经过前面几篇文章的介绍，一个基本的MVC结构应该是具备了。而且上一篇文章中，也已经实现了一个基本的用户管理列表页面。接着上一篇，完善用户管理，实现增删改。为了用户体验，增加和修改用户信息的表单，都放在弹窗中进行。避免跳转页面。
定义用户增加窗口:app/luter/view/sys/user/UserAdd.js 
</>复制代码 
  1. Ext.define("luter.view.sys.user.UserAdd", {
  2.     extend: "Ext.window.Window",//扩展window组件
  3.     alias: "widget.useraddview",
  4.     requires: [],
  5.     constrain: true,//约束窗体弹出，别出浏览器可视范围
  6.     modal: true,//模态
  7.     maximizable: true,//可以最大化
  8.     iconCls: baseConfig.appicon.add,//图标
  9.     layout: "fit",//自适应布局
  10.     width: 700,
  11.     autoHeight: true,//自适应高度
  12.     viewModel: {
  13.         data: {
  14.             title: ""
  15.         }
  16.     },
  17.     bind: {
  18.         title: "新增用户:  " + "{title}"//绑定这个空间的title属性上
  19.     },
  20.     initComponent: function () {
  21.         var me = this;
  22.         //加入一个表单，表单内元素通过loadView方法添加
  23.         me.items = [{
  24.             xtype: "form",
  25.             width: 700,
  26.             autoHeight: true,
  27.             fieldDefaults: {
  28.                 labelAlign: "right",
  29.                 labelStyle: "font-weight:bold;"
  30.             },
  31.             border: false
  32.         }]
  33.         //操作按钮直接加载window上
  34.         me.buttons = ["->", {
  35.             text: "新增",
  36.             cls: "green-btn",
  37.             iconCls: baseConfig.appicon.add,
  38.             handler: function () {
  39.                 var form = this.down("form");
  40.                 if (form.isValid()) {
  41.                     form.submit({
  42.                         url: "sys/user/add",
  43.                         method: "POST",
  44.                         waitTitle: "提示",
  45.                         waitMsg: "正在提交数据，请稍后 ……",
  46.                         success: function (form, action) {//添加成功后提示消息，并且刷新用户列表数据
  47.                             me.close();
  48.                             DealAjaxResponse(action.response);
  49.                             Ext.data.StoreManager.lookup("UserStore").load();
  50.                         },
  51.                         failure: function (form, action) {
  52.                             DealAjaxResponse(action.response);
  53.                         }
  54.                     });
  55.                 } else {
  56.                     toast({
  57.                         msg: "表单填写错误，请确认"
  58.                     })
  59.                 }
  60.             },
  61.             scope: this
  62.         }, "-", {
  63.             text: "放弃",
  64.             cls: "red-btn",
  65.             iconCls: baseConfig.appicon.undo,
  66.             handler: function () {
  67.                 me.close();
  68.             },
  69.             scope: this
  70.         }]
  71.         me.callParent(arguments);
  72.     },
  73.     //form表单的渲染在这里完成，目的是可以通过创建操作传入参数
  74.     loadView: function (config) {
  75.         var formCmp = this.getComponent(0);
  76.         formCmp.add([{
  77.             columnWidth: 1,
  78.             layout: "form",
  79.             items: [{
  80.                 xtype: "textfield",
  81.                 fieldLabel: baseConfig.model.user.username,
  82.                 name: "username",
  83.                 maxLength: 250,
  84.                 maxLengthText: "请输入{0}个字以内",
  85.                 emptyText: "登录用的用户名",
  86.                 bind: "{title}",//mvvm数据绑定，输入的时候同步就显示在win的title上了
  87.                 allowBlank: false,
  88.                 flex: 1
  89.             },
  90.                 {
  91.                     xtype: "textfield",
  92.                     fieldLabel: baseConfig.model.user.real_name,
  93.                     name: "real_name",
  94.                     maxLength: 10,
  95.                     maxLengthText: "请输入{0}个字以内",
  96.                     emptyText: "真实姓名",
  97.                     allowBlank: false,
  98.                     flex: 1
  99.                 }
  100.             ]
  101.         }]);
  102.     }
  103. });

添加用户的触发动作是在用户列表页面的添加按钮，所以，还需要修改一下用户列表页面里对应位置，加入触发动作，如下：

</>复制代码 
  1. 。。。。。
  2.  me.dockedItems = [{
  3.             xtype: "toolbar",
  4.             items: [{
  5.                 text: "添加",
  6.                 iconCls: baseConfig.appicon.add,
  7.                 tooltip: "添加",
  8.                 handler: function () {
  9.                     //create的时候，js会动态加载进来。
  10.                     var win = Ext.create("luter.view.sys.user.UserAdd", {
  11.                         animateTarget: this//以这个按钮为锚点动画打开win
  12.                     });
  13.                     win.loadView();//给form加入元素，可以在这里传入一些参数给将要打开的添加页面
  14.                     win.show();//显示这个窗体
  15.                 }
  16.             }]
  17.         }]
  18. 。。。。。。
定义用户信息修改窗口:app/luter/view/sys/user/UserEdit.js 
</>复制代码 
  1. Ext.define("luter.view.sys.user.UserEdit", {
  2.     extend: "Ext.window.Window",//扩展window组件
  3.     alias: "widget.usereditview",
  4.     requires: [],
  5.     constrain: true,//约束窗体弹出，别出浏览器可视范围
  6.     modal: true,//模态
  7.     maximizable: true,//可以最大化
  8.     iconCls: baseConfig.appicon.update,//图标
  9.     layout: "fit",//自适应布局
  10.     width: 700,
  11.     autoHeight: true,//自适应高度
  12.     initComponent: function () {
  13.         var me = this;
  14.         //加入一个表单，表单内元素通过loadView方法添加
  15.         me.items = [{
  16.             xtype: "form",
  17.             width: 700,
  18.             autoHeight: true,
  19.             fieldDefaults: {
  20.                 labelAlign: "right",
  21.                 labelStyle: "font-weight:bold;"
  22.             },
  23.             border: false
  24.         }]
  25.         //操作按钮直接加载window上
  26.         me.buttons = ["->", {
  27.             text: "新增",
  28.             cls: "green-btn",
  29.             iconCls: baseConfig.appicon.add,
  30.             handler: function () {
  31.                 var form = this.down("form");
  32.                 if (form.isValid()) {
  33.                     form.submit({
  34.                         url: "sys/user/update",
  35.                         method: "POST",
  36.                         waitTitle: "提示",
  37.                         waitMsg: "正在提交数据，请稍后 ……",
  38.                         success: function (form, action) {//添加成功后提示消息，并且刷新用户列表数据
  39.                             me.close();
  40.                             DealAjaxResponse(action.response);
  41.                             Ext.data.StoreManager.lookup("UserStore").load();
  42.                         },
  43.                         failure: function (form, action) {
  44.                             DealAjaxResponse(action.response);
  45.                         }
  46.                     });
  47.                 } else {
  48.                     toast({
  49.                         msg: "表单填写错误，请确认"
  50.                     })
  51.                 }
  52.             },
  53.             scope: this
  54.         }, "-", {
  55.             text: "放弃",
  56.             cls: "red-btn",
  57.             iconCls: baseConfig.appicon.undo,
  58.             handler: function () {
  59.                 me.close();
  60.             },
  61.             scope: this
  62.         }]
  63.         me.callParent(arguments);
  64.     },
  65.     loadView: function (config) {
  66.         var formCmp = this.getComponent(0);
  67.         formCmp.add([{
  68.             columnWidth: 1,
  69.             layout: "form",
  70.             items: [{
  71.                 xtype: "hidden",//这里放一个隐藏控件，因为是修改记录，所以必须提交ID
  72.                 name: "id"
  73.             }, {
  74.                 xtype: "textfield",
  75.                 fieldLabel: baseConfig.model.user.username,
  76.                 name: "username",
  77.                 maxLength: 250,
  78.                 maxLengthText: "请输入{0}个字以内",
  79.                 emptyText: "登录用的用户名",
  80.                 allowBlank: false,
  81.                 flex: 1
  82.             },
  83.                 {
  84.                     xtype: "textfield",
  85.                     fieldLabel: baseConfig.model.user.real_name,
  86.                     name: "real_name",
  87.                     maxLength: 10,
  88.                     maxLengthText: "请输入{0}个字以内",
  89.                     emptyText: "真实姓名",
  90.                     allowBlank: false,
  91.                     flex: 1
  92.                 }
  93.             ]
  94.         }]);
  95.     }
  96. });

我们希望在双击用户列表中的某一条记录(某个用户)的时候，弹出用户修改对话框，所以，修改用户列表页面代码，添加列表行双击事件的监听，如下：

</>复制代码 
  1. 。。。。。。
  2. me.listeners = {
  3.             "itemdblclick": function (table, record, html, row, event, opt) {
  4.                 if (record) {
  5.                     var id = record.get("id");
  6.                     var view = Ext.create("luter.view.sys.user.UserEdit", {title: "编辑数据", animateTarget: this});
  7.                     view.loadView();
  8.                     //为了保证数据完整性，拿到这条数据的ID后，需要从后台获取当前这条数据，然后再修改
  9.                     //对于后台而言，最好对数据设置@version功能，确保数据一致性。
  10.                     loadFormDataFromDb(view, "app/testdata/user.json");
  11.                 } else {
  12.                     showFailMesg({
  13.                         msg: "加载信息失败，请确认。"
  14.                     })
  15.                 }
  16.             }
  17.         }
  18. 。。。。。。
添加记录删除操作

在用户列表中，设置action列,实现删除操作，如下:

</>复制代码 
  1. .......
  2.  me.columns = [{
  3.             xtype: "rownumberer",
  4.             text: "序号",
  5.             width: 60
  6.         }, {
  7.             header: "操作",
  8.             xtype: "actioncolumn",
  9.             width: 60,
  10.             sortable: false,
  11.             items: [{
  12.                 text: "删除",
  13.                 iconCls: "icon-delete",
  14.                 tooltip: "删除这条记录",
  15.                 handler: function (grid, rowIndex, colIndex) {
  16.                     var record = grid.getStore().getAt(rowIndex);
  17.                     if (!record) {
  18.                         toast({
  19.                             msg: "请选中一条要删除的记录"
  20.                         })
  21.                     } else {
  22.                         showConfirmMesg({
  23.                             message: "确定删除这条记录?",
  24.                             fn: function (btn) {
  25.                                 if (btn === "yes") {
  26.                                     showToastMessage("啥意思?");//测试一下而已，实际情况是执行ajax删除，如下。
  27.                                     // Ext.Ajax.request({
  28.                                     //     url: "sys/user/delete",
  29.                                     //     method: "POST",
  30.                                     //     params: {
  31.                                     //         id: record.get("id")
  32.                                     //     },
  33.                                     //     success: function (response, options) {
  34.                                     //         DealAjaxResponse(response);
  35.                                     //         Ext.data.StoreManager.lookup("UserStore").load();
  36.                                     //     },
  37.                                     //     failure: function (response, options) {
  38.                                     //         DealAjaxResponse(response);
  39.                                     //     }
  40.                                     // });
  41.                                 } else {
  42.                                     Ext.toast({
  43.                                         title:"看...",
  44.                                         width:200,
  45.                                         html: "不删了....."
  46.                                     });
  47.                                     return false;
  48.                                 }
  49.                             }
  50.                         })
  51.                     }
  52.                 }
  53.             }]
  54.         }, {
  55.             header: baseConfig.model.user.id,
  56.             dataIndex: "id",
  57.             hidden: false,
  58.             flex: 1
  59.         },
  60.             {
  61.                 header: baseConfig.model.user.username,
  62.                 dataIndex: "username",
  63.                 flex: 1
  64.             },
  65.             {
  66.                 header: baseConfig.model.user.real_name,
  67.                 dataIndex: "real_name",
  68.                 flex: 1
  69.             }
  70.         ]
  71. .......
extjs样式覆盖app/resource/css/admin.css

主要覆盖了左侧导航菜单treelist和中间tabpanel的部分风格样式，
记得在app.html中extjs样式之后引入覆盖样式

</>复制代码 
  1. .x-treelist-navigation {
  2.     background-color: #32404e;
  3.     background-position: 44px 0%;
  4.     padding: 0 0 0 0
  5. }
  6. .x-big .x-treelist-navigation {
  7.     background-position: 0%
  8. }
  9. .x-treelist-navigation .x-treelist-toolstrip {
  10.     background-color: #32404e
  11. }
  12. .x-treelist-navigation .x-treelist-item-selected.x-treelist-item-tool {
  13.     background-color: #475360
  14. }
  15. .x-treelist-navigation .x-treelist-item-selected.x-treelist-item-tool:after {
  16.     height: 50px;
  17.     position: absolute;
  18.     top: 0;
  19.     left: 0;
  20.     content: " ";
  21.     width: 5px;
  22.     background-color: #35baf6
  23. }
  24. .x-treelist-navigation .x-treelist-item-selected > .x-treelist-row {
  25.     background-color: #475360
  26. }
  27. .x-treelist-navigation .x-treelist-item-tool {
  28.     padding-left: 10px;
  29.     padding-right: 10px
  30. }
  31. .x-treelist-navigation .x-treelist-item-tool-floated:after {
  32.     height: 50px;
  33.     position: absolute;
  34.     top: 0;
  35.     left: 0;
  36.     content: " ";
  37.     width: 5px;
  38.     background-color: #35baf6
  39. }
  40. .x-treelist-navigation .x-treelist-item-icon:before, .x-treelist-navigation .x-treelist-item-tool:before, .x-treelist-navigation .x-treelist-item-expander {
  41.     line-height: 50px
  42. }
  43. .x-treelist-navigation .x-treelist-item-icon, .x-treelist-navigation .x-treelist-item-tool, .x-treelist-navigation .x-treelist-item-expander {
  44.     text-align: center;
  45.     background-repeat: no-repeat;
  46.     background-position: 0 center
  47. }
  48. .x-treelist-navigation .x-treelist-item-icon, .x-treelist-navigation .x-treelist-item-tool {
  49.     color: #adb3b8;
  50.     font-size: 18px;
  51.     width: 44px
  52. }
  53. .x-treelist-navigation .x-treelist-item-tool {
  54.     width: 50px
  55. }
  56. .x-treelist-navigation .x-treelist-item-expander {
  57.     color: #fff;
  58.     font-size: 16px;
  59.     width: 24px
  60. }
  61. .x-treelist-navigation .x-treelist-item-text {
  62.     color: #adb3b8;
  63.     margin-left: 50px;
  64.     margin-right: 24px;
  65.     font-size: 14px;
  66.     font-weight: 900;
  67.     line-height: 50px
  68. }
  69. .x-treelist-navigation .x-treelist-row {
  70.     padding-left: 10px;
  71.     padding-right: 10px
  72. }
  73. .x-treelist-navigation .x-treelist-row-over:before, .x-treelist-navigation .x-treelist-item-selected > .x-treelist-row:before {
  74.     content: " ";
  75.     position: absolute;
  76.     display: block;
  77.     left: 0;
  78.     top: 0;
  79.     width: 5px;
  80.     height: 100%
  81. }
  82. .x-treelist-navigation .x-treelist-row-over:before {
  83.     background-color: transparent
  84. }
  85. .x-treelist-navigation .x-treelist-item-selected > .x-treelist-row-over:before {
  86.     background-color: #57c6f8
  87. }
  88. .x-treelist-navigation .x-treelist-item-selected > .x-treelist-row:before {
  89.     background-color: #35baf6
  90. }
  91. .x-treelist-navigation .x-treelist-item-floated .x-treelist-container {
  92.     width: auto
  93. }
  94. .x-treelist-navigation .x-treelist-item-floated > .x-treelist-row {
  95.     background-color: #32404e
  96. }
  97. .x-treelist-navigation .x-treelist-item-floated > .x-treelist-container {
  98.     margin-left: -44px
  99. }
  100. .x-big .x-treelist-navigation .x-treelist-item-floated > .x-treelist-container {
  101.     margin-left: 0
  102. }
  103. .x-treelist-navigation .x-treelist-item-floated > * > * > .x-treelist-item-text {
  104.     margin-left: 0
  105. }
  106. .x-treelist-navigation .x-treelist-item-floated > * .x-treelist-row {
  107.     padding-left: 0
  108. }
  109. .x-treelist-navigation .x-treelist-item-floated .x-treelist-row:before {
  110.     width: 0
  111. }
  112. .x-treelist-navigation .x-treelist-item-floated > .x-treelist-row-over {
  113.     background-color: #32404e
  114. }
  115. .x-treelist-navigation .x-treelist-item-floated > .x-treelist-row-over > * > .x-treelist-item-text {
  116.     color: #adb3b8
  117. }
  118. .x-treelist-navigation .x-treelist-item-expanded {
  119.     background-color: #2c3845
  120. }
  121. .x-treelist-navigation.x-treelist-highlight-path .x-treelist-item-over > * > .x-treelist-item-icon {
  122.     color: #fff
  123. }
  124. .x-treelist-navigation.x-treelist-highlight-path .x-treelist-item-over > * > .x-treelist-item-text {
  125.     color: #d6d9dc
  126. }
  127. .x-treelist-navigation.x-treelist-highlight-path .x-treelist-item-over > * > .x-treelist-item-expander {
  128.     color: #fff
  129. }
  130. .x-treelist-navigation .x-treelist-row-over {
  131.     background-color: #3c4a57
  132. }
  133. .x-treelist-navigation .x-treelist-row-over > * > .x-treelist-item-icon {
  134.     color: #fff
  135. }
  136. .x-treelist-navigation .x-treelist-row-over > * > .x-treelist-item-text {
  137.     color: #d6d9dc
  138. }
  139. .x-treelist-navigation .x-treelist-row-over > * > .x-treelist-item-expander {
  140.     color: #fff
  141. }
  142. .x-treelist-navigation .x-treelist-expander-first .x-treelist-item-icon {
  143.     left: 24px
  144. }
  145. .x-treelist-navigation .x-treelist-expander-first .x-treelist-item-text {
  146.     margin-left: 74px;
  147.     margin-right: 0
  148. }
  149. .x-treelist-navigation .x-treelist-expander-first .x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
  150.     margin-left: 30px
  151. }
  152. .x-treelist-navigation .x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
  153.     margin-left: 6px
  154. }
  155. .x-tab-bar-default{
  156.     height: 40px;
  157.     /*background-color: #0e2349;*/
  158. }
  159. .x-tab-default-top {
  160.     -webkit-border-radius: 0;
  161.     -moz-border-radius: 0;
  162.     -ms-border-radius: 0;
  163.     border-radius: 0;
  164.     padding: 8px 10px 7px 10px;
  165.     border-width: 0;
  166.     border-style: solid;
  167.     background-color: transparent
  168. }
  169. .x-tab-bar-default-top > .x-tab-bar-body-default{
  170.     padding:0
  171. }
  172. .x-nbr .x-tab-default-top {
  173.     padding: 0 !important;
  174.     border-width: 0 !important;
  175.     -webkit-border-radius: 0px;
  176.     -moz-border-radius: 0px;
  177.     -ms-border-radius: 0px;
  178.     border-radius: 0px;
  179.     background-color: transparent !important;
  180.     box-shadow: none !important
  181. }
  182. .x-tab-default {
  183.     border-color: transparent;
  184.     cursor: pointer
  185. }
  186. .x-tab-default-top {
  187.     margin: 0 4px 0 0
  188. }
  189. .x-tab-default-top.x-tab-rotate-left {
  190.     margin: 0 0 0 4px
  191. }
  192. .x-tab-default-top.x-tab-focus {
  193.     -webkit-box-shadow: none;
  194.     -moz-box-shadow: none;
  195.     box-shadow: none
  196. }
  197. .x-tab-default-top.x-tab-focus.x-tab-over {
  198.     -webkit-box-shadow: none;
  199.     -moz-box-shadow: none;
  200.     box-shadow: none
  201. }
  202. .x-tab-default-top.x-tab-focus.x-tab-active {
  203.     -webkit-box-shadow: none;
  204.     -moz-box-shadow: none;
  205.     box-shadow: none;
  206.     background-color: #1d9ce5;
  207. }
  208. .x-tab-button-default {
  209.     padding-top: 5px;
  210.     height: 20px
  211. }
  212. .x-tab-inner-default {
  213.     font: 500 13px/20px "Open Sans", "Helvetica Neue", helvetica, arial, verdana, sans-serif;
  214.     /*color: #f0f0f0;*/
  215.     max-width: 100%
  216. }
  217. .x-tab-bar-plain .x-tab-inner-default {
  218.     color: #606060
  219. }
  220. .x-tab-icon-right>.x-tab-inner-default,
  221. .x-tab-icon-left>.x-tab-inner-default {
  222.     max-width: calc(100% - 20px)
  223. }
  224. .x-tab-icon-el-default {
  225.     min-height: 20px;
  226.     background-position: center center;
  227.     font-size: 20px;
  228.     line-height: 20px;
  229.     color: #f0f0f0
  230. }
  231. .x-tab-icon-left>.x-tab-icon-el-default,
  232. .x-tab-icon-right>.x-tab-icon-el-default {
  233.     width: 20px
  234. }
  235. .x-tab-icon-top>.x-tab-icon-el-default,
  236. .x-tab-icon-bottom>.x-tab-icon-el-default {
  237.     min-width: 20px
  238. }
  239. .x-tab-bar-plain .x-tab-icon-el-default {
  240.     color: #606060
  241. }
  242. .x-tab-icon-el-default.x-tab-glyph {
  243.     opacity: 0.7
  244. }
  245. .x-tab-text.x-tab-icon-left>.x-tab-icon-el-default {
  246.     margin-right: 6px
  247. }
  248. .x-tab-text.x-tab-icon-right>.x-tab-icon-el-default {
  249.     margin-left: 6px
  250. }
  251. .x-tab-text.x-tab-icon-top>.x-tab-icon-el-default {
  252.     margin-bottom: 6px
  253. }
  254. .x-tab-text.x-tab-icon-bottom>.x-tab-icon-el-default {
  255.     margin-top: 6px
  256. }
  257. .x-tab-focus.x-tab-default {
  258.     border-color: transparent;
  259.     background-color: transparent;
  260.     outline: 1px solid #35baf6;
  261.     outline-offset: -3px
  262. }
  263. .x-ie .x-tab-focus.x-tab-default,
  264. .x-ie10p .x-tab-focus.x-tab-default,
  265. .x-edge .x-tab-focus.x-tab-default {
  266.     outline: none
  267. }
  268. .x-ie .x-tab-focus.x-tab-default:after,
  269. .x-ie10p .x-tab-focus.x-tab-default:after,
  270. .x-edge .x-tab-focus.x-tab-default:after {
  271.     position: absolute;
  272.     content: " ";
  273.     top: 2px;
  274.     right: 2px;
  275.     bottom: 2px;
  276.     left: 2px;
  277.     border: 1px solid #35baf6;
  278.     pointer-events: none
  279. }
  280. .x-tab-bar-plain .x-tab-focus.x-tab-default .x-tab-inner-default {
  281.     color: #606060
  282. }
  283. .x-tab-bar-plain .x-tab-focus.x-tab-default .x-tab-icon-el {
  284.     color: #606060
  285. }
  286. .x-tab-over.x-tab-default {
  287.     border-color: #000;
  288.     background-image: none;
  289.     background-color: rgba(0, 0, 0, 0.08)
  290. }
  291. .x-ie8 .x-tab-over.x-tab-default {
  292.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#14000000, endColorstr=#14000000)";
  293.     zoom: 1
  294. }
  295. .x-ie8 .x-tab-over.x-tab-default.x-tab-rotate-left {
  296.     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"
  297. }
  298. .x-ie8 .x-tab-over.x-tab-default.x-tab-rotate-right {
  299.     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
  300. }
  301. .x-tab-bar-plain .x-tab-over.x-tab-default .x-tab-inner-default {
  302.     color: #606060
  303. }
  304. .x-tab-bar-plain .x-tab-over.x-tab-default .x-tab-icon-el {
  305.     color: #606060
  306. }
  307. .x-tab-focus.x-tab-over.x-tab-default {
  308.     border-color: #000;
  309.     background-image: none;
  310.     background-color: rgba(0, 0, 0, 0.08)
  311. }
  312. .x-ie8 .x-tab-focus.x-tab-over.x-tab-default {
  313.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#14000000, endColorstr=#14000000)";
  314.     zoom: 1
  315. }
  316. .x-ie8 .x-tab-focus.x-tab-over.x-tab-default.x-tab-rotate-left {
  317.     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"
  318. }
  319. .x-ie8 .x-tab-focus.x-tab-over.x-tab-default.x-tab-rotate-right {
  320.     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
  321. }
  322. .x-tab-bar-plain .x-tab-focus.x-tab-over.x-tab-default .x-tab-inner-default {
  323.     color: #606060
  324. }
  325. .x-tab-bar-plain .x-tab-focus.x-tab-over.x-tab-default .x-tab-icon-el {
  326.     color: #606060
  327. }
  328. .x-tab.x-tab-active.x-tab-default {
  329.     border-color: #fff;
  330.     background-color: #fff
  331. }
  332. .x-tab.x-tab-active.x-tab-default .x-tab-inner-default {
  333.     color: #105bf3
  334. }
  335. .x-tab-bar-plain .x-tab.x-tab-active.x-tab-default .x-tab-inner-default {
  336.     color: #404040
  337. }
  338. .x-tab.x-tab-active.x-tab-default .x-tab-icon-el {
  339.     color: #105bf3
  340. }
  341. .x-ie8 .x-tab.x-tab-active.x-tab-default .x-tab-icon-el {
  342.     color: #6ab5d6
  343. }
  344. .x-tab-bar-plain .x-tab.x-tab-active.x-tab-default .x-tab-icon-el {
  345.     color: #404040
  346. }
  347. .x-tab-focus.x-tab-active.x-tab-default {
  348.     border-color: #fff;
  349.     background-color: #fff
  350. }
  351. .x-tab-bar-plain .x-tab-focus.x-tab-active.x-tab-default .x-tab-inner-default {
  352.     color: #404040
  353. }
  354. .x-tab-bar-plain .x-tab-focus.x-tab-active.x-tab-default .x-tab-icon-el {
  355.     color: #404040
  356. }
  357. .x-tab.x-tab-disabled.x-tab-default {
  358.     border-color: transparent;
  359.     background-color: transparent;
  360.     cursor: default
  361. }
  362. .x-tab.x-tab-disabled.x-tab-default .x-tab-inner-default {
  363.     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  364.     opacity: 0.3
  365. }
  366. .x-tab-bar-plain .x-tab.x-tab-disabled.x-tab-default .x-tab-inner-default {
  367.     color: #606060
  368. }
  369. .x-tab.x-tab-disabled.x-tab-default .x-tab-icon-el-default {
  370.     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  371.     opacity: 0.5
  372. }
  373. .x-tab.x-tab-disabled.x-tab-default .x-tab-icon-el {
  374.     color: #f0f0f0;
  375.     opacity: 0.3;
  376.     filter: none
  377. }
  378. .x-tab-bar-plain .x-tab.x-tab-disabled.x-tab-default .x-tab-icon-el {
  379.     color: #606060
  380. }
  381. .x-nbr .x-tab-default {
  382.     background-image: none
  383. }
  384. .x-tab-default .x-tab-close-btn:before {
  385.     content: "f00d"
  386. }
  387. .x-tab-default .x-tab-close-btn {
  388.     top: 0;
  389.     right: 0;
  390.     width: 12px;
  391.     height: 12px;
  392.     font: 12px/1 FontAwesome;
  393.     color: red
  394. }
  395. .x-tab-default.x-tab-active .x-tab-close-btn {
  396.     color: red
  397. }
  398. .x-tab-default .x-tab-close-btn-over {
  399.     background-position: -12px 0;
  400.     color: red
  401. }

至此，应该能看到基本的界面的样子了:)

GPU云服务器 云服务器 linux的增删改查 jsp的增删改查教程 实现增删改查 php的增删改查实例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92693.html

相关文章

  • RBAC笔记

    摘要：例如，系统中某个用户辞职了，只需要将系统中该用户的角色授权撤销即可。 Q0.有哪些概念需要知道？ 一些概念的具体定义如下 用户（user）： 和计算机系统交互的人（在许多设计方案中，单个用户可能拥有多个登录标识（ID），这些标识可能同时处于活跃状态，但身份验证机制可以使多个标识匹配到某个具体的人，即用户对于计算机系统来说具有唯一性） 主体（subject）： 一个代表用户行为的计算机...

    ZweiZhao 评论0 收藏0

  • extjs-mvc结构实践(三):完善基本页面2

    摘要：结构实践三完善基本页面一般经典的后台管理系统，都是左侧菜单右侧结构布局。不免俗，咱也这么实现定义左侧导航菜单新建采用的组件构建一个导航菜单为了显示图标，引入字体图标，在引入引入定义导航菜单数据功能菜单展开节点。 extjs-mvc结构实践(三):完善基本页面2 一般经典的后台管理系统，都是左侧菜单右侧tabs结构布局。不免俗，咱也这么实现！ 定义左侧导航菜单 新建：app/luter/...

    X1nFLY 评论0 收藏0

  • 13 个快速构建 Laravel 后台的扩展包

    摘要：值得一提的是扩展包不免费用于商业用途，作者用一种人类友好的方式说你使用这个扩展包就是应该去挣钱的，而不是免费的去工作这个扩展包收费美元。除了这些，还有五个没有全面的审查的扩展包。最后，还有三个优质的包选择于。 showImg(https://segmentfault.com/img/remote/1460000012312105?w=2200&h=1125); 开发者们都是懒惰的，不，...

    MiracleWong 评论0 收藏0

  • 13 个快速构建 Laravel 后台的扩展包

    摘要：值得一提的是扩展包不免费用于商业用途，作者用一种人类友好的方式说你使用这个扩展包就是应该去挣钱的，而不是免费的去工作这个扩展包收费美元。除了这些，还有五个没有全面的审查的扩展包。最后，还有三个优质的包选择于。 showImg(https://segmentfault.com/img/remote/1460000012312105?w=2200&h=1125); 开发者们都是懒惰的，不，...

    ityouknow 评论0 收藏0

发表评论

登陆后可评论

0条评论

wendux

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<