Extjs框架总结
Extjs框架知識總結
概述
Ext是基于Web的富客戶端框架，其完全是基于標準W3C技術構建的，使用到的都是HTML、CSS、DIV等相關技術。Extjs提供了大量已經封裝好的可以直接使用的組件，上手容易。以下是基于Extjs框架整合的demo。
Extjs框架可分為五個部分：
以下是各個模塊實現是代碼示例：
HTML頁面：
Controller.js
Ext.define("Cnu.controller.CheckSummaryController", {extend: 'Ext.app.Controller',views: ['demo.CheckSummaryView'],models: ['demo.CheckSummaryModel'],stores: ['demo.CheckSummaryStore'],refs: [{ref: 'CheckSummaryView',selector: 'CheckSummaryView'}],init: function () {this.control({'CheckSummaryView button': {click: this.btnEvent}});},btnEvent: function (selModel) {var grid = this.getCheckSummaryView();//var model = grid.getSelectionModel();if (selModel.iconCls == "icon-query") {//查詢//點擊搜索按鈕將查詢條件傳遞到后臺 // model.clearSelections();//清空所有選擇 var jobId = Ext.getCmp('jobId').getValue();var startTime = Ext.util.Format.date(Ext.getCmp('startTime').getValue(), 'Y-m-d');var endTime = Ext.util.Format.date(Ext.getCmp('endTime').getValue(), 'Y-m-d');var deptType = Ext.getCmp('deptType').getValue();//store 加載之前將參數放進去以待后臺獲取grid.store.on('beforeload', function (store, options) {var new_params = {jobId: jobId, startTime: startTime, endTime: endTime,deptType: deptType};Ext.apply(store.proxy.extraParams, new_params);});grid.store.load();}}});View.js
Ext.define("Cnu.view.demo.CheckSummaryView", {extend: 'Ext.grid.Panel',xtype: 'CheckSummaryView',store: 'demo.CheckSummaryStore',initComponent: function () {//頂部工具欄 查詢輸入框this.tbar = [{xtype: 'label', text: '工號：'},{xtype: 'textfield', id: 'jobId', emptyText: '請輸入工號'},{id:'startTime',xtype : 'datefield',//anchor: '100%',name : 'startTime',//hiddenName : 'bdate',fieldLabel : '起始時間:',format: 'Y-m-d',allowBlank : false,listeners: {change: function () {var e = Ext.util.Format.date(Ext.getCmp('endTime').getValue(), 'Y-m-d');//格式化日期控件值var s = Ext.util.Format.date(Ext.getCmp('startTime').getValue(), 'Y-m-d');//格式化日期控件值var end = new Date(e);var start = new Date(s);var today = new Date();if(start.getTime()>today.getTime()){Ext.Msg.alert("提示：","不可大于當前時間！");Ext.getCmp('startTime').setValue(null);}else if(end.getTime() < start.getTime()) {Ext.Msg.alert("提示","結束時間必須大于開始時間！");Ext.getCmp('startTime').setValue(null);}else if((today.getTime()-start.getTime())/86400000>31){Ext.Msg.alert("提示：","只能查詢最近30天的數據！");Ext.getCmp('startTime').setValue(null);}}},value: new Date() // defaults to today},//{xtype:'spacer', width:100},{id:'endTime',xtype : 'datefield',//anchor: '100%',name : 'endTime',fieldLabel : '截止時間:',format: 'Y-m-d',allowBlank : false,listeners: {change: function () {var e = Ext.util.Format.date(Ext.getCmp('endTime').getValue(), 'Y-m-d');//格式化日期控件值var s = Ext.util.Format.date(Ext.getCmp('startTime').getValue(), 'Y-m-d');//格式化日期控件值var end = new Date(e);var start = new Date(s);var today = new Date();if(end.getTime()>today.getTime()){Ext.Msg.alert("提示：","不可大于當前時間！");Ext.getCmp('endTime').setValue(null);}else if(end.getTime() < start.getTime()) {Ext.Msg.alert("提示","結束時間必須大于開始時間！");Ext.getCmp('endTime').setValue(null);}else if((today.getTime()-end.getTime())/86400000>31){Ext.Msg.alert("提示：","只能查詢最近30天的數據！");Ext.getCmp('endTime').setValue(null);}}},value: new Date() // defaults to today},{id:'deptType',xtype: 'combobox',fieldLabel: '組織結構:',name: 'deptType',//hiddenName: 'STRATEGY_TYPE',store: Ext.create('Ext.data.Store', {fields: ['DEPARTMENT', 'DEPARTMENT_DESC'],autoLoad:true,proxy: {type: 'rest',url: rest_prefix+'/checksummary/getDept',reader: {type: 'json',root: 'DATA'}}}),valueField: 'DEPARTMENT',displayField: 'DEPARTMENT_DESC',typeAhead: true,queryMode: 'local',editable:false,allowBlank : false,triggerAction: 'all',emptyText: '請選擇組織結構...'},{text: '查詢',iconCls: 'icon-query'}];this.columns = [{header: '工號',dataIndex: 'LOGIN_ID',flex: 1},{header: '姓名',dataIndex: 'LOGIN_NAME',flex: 1.2},{header: '簽入已簽出次數',dataIndex: 'LOGIN_NUM',flex: 2},{header: '簽入已簽出時長（小時）',dataIndex: 'LOGIN_TIME',flex: 1.1}];this.callParent(arguments);},dockedItems: [{xtype: 'pagingtoolbar',store: 'demo.CheckSummaryStore',dock: 'bottom',displayInfo: true}] });Store.js
Ext.define("Cnu.store.demo.CheckSummaryStore", {extend: 'Ext.data.Store',model: 'Cnu.model.demo.CheckSummaryModel',pageSize: '15',autoSync: true,autoLoad: false,remoteFilter: true,remoteSort: true,proxy: {type: 'rest',url: rest_prefix + '/checksummary/checksummarylist',//actionMethods: {// read: 'POST'//},reader: {type: 'json',root: 'DATA',totalProperty: 'totalCount'},writer: {type: 'json'}},/*sorters: [{property: 'CREATE_TIME', direction: 'DESC'}],*/listeners: {'beforeload': function (store, op, options) {/*var params = {isUse: 0};Ext.apply(store.proxy.extraParams, params);*/}} });Model.js
Ext.define('Cnu.model.demo.CheckSummaryModel', {extend: 'Ext.data.Model',fields: [{name: 'LOGIN_ID'},{name: 'LOGIN_NAME'},{name: 'LOGIN_NUM'},{name: 'LOGIN_TIME'}],idProperty: 'LOGIN_ID' });后臺代理部分具體實現略
總結
- 上一篇： 微信源码多功能 微cms微信营销服务平台
- 下一篇： 霏凡年度十大原创精华集最终版+随书附件包