當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

Extjs框架总结

發(fā)布時(shí)間：2024/1/1 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 Extjs框架总结小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Extjs框架知識(shí)總結(jié)

概述

Ext是基于Web的富客戶(hù)端框架，其完全是基于標(biāo)準(zhǔn)W3C技術(shù)構(gòu)建的，使用到的都是HTML、CSS、DIV等相關(guān)技術(shù)。Extjs提供了大量已經(jīng)封裝好的可以直接使用的組件，上手容易。以下是基于Extjs框架整合的demo。

Extjs框架可分為五個(gè)部分：

HTML頁(yè)面：加載js插件，承載界面顯示

Controller.js：控制各個(gè)組件，以及實(shí)現(xiàn)事件監(jiān)聽(tīng)

View.js：實(shí)現(xiàn)頁(yè)面的布局

Store.js：提供數(shù)據(jù)信息，可以通過(guò)代理向后臺(tái)獲取表單數(shù)據(jù)

Model.js：數(shù)據(jù)保存模塊，用于保存Store獲取的數(shù)據(jù)

以下是各個(gè)模塊實(shí)現(xiàn)是代碼示例：
HTML頁(yè)面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Extjs示例</title><link href="ext-4.2/resources/css/ext-all-gray.css" rel="stylesheet"/><link href="resources/css/icon.css" rel="stylesheet"/><script src="ext-4.2/ext-all.js"></script><script src="ext-4.2/locale/ext-lang-zh_CN.js"></script><script src="common.js"></script><style type="text/css">.photo_css1 {height: 18px;width: 66px;cursor: pointer;}.photo_css2 {display: none;}</style> </head> <body></body> <script>Ext.application({name: 'Cnu',controllers: ['Cnu.controller.CheckSummaryController'],launch: function () {Ext.create('Ext.container.Viewport', {layout: 'fit',items: [{xtype: 'CheckSummaryView'}]});}}); </script> </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") {//查詢(xún)//點(diǎn)擊搜索按鈕將查詢(xún)條件傳遞到后臺(tái) // 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 加載之前將參數(shù)放進(jìn)去以待后臺(tái)獲取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 () {//頂部工具欄查詢(xún)輸入框this.tbar = [{xtype: 'label', text: '工號(hào)：'},{xtype: 'textfield', id: 'jobId', emptyText: '請(qǐng)輸入工號(hào)'},{id:'startTime',xtype : 'datefield',//anchor: '100%',name : 'startTime',//hiddenName : 'bdate',fieldLabel : '起始時(shí)間:',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("提示：","不可大于當(dāng)前時(shí)間！");Ext.getCmp('startTime').setValue(null);}else if(end.getTime() < start.getTime()) {Ext.Msg.alert("提示","結(jié)束時(shí)間必須大于開(kāi)始時(shí)間！");Ext.getCmp('startTime').setValue(null);}else if((today.getTime()-start.getTime())/86400000>31){Ext.Msg.alert("提示：","只能查詢(xún)最近30天的數(shù)據(jù)！");Ext.getCmp('startTime').setValue(null);}}},value: new Date() // defaults to today},//{xtype:'spacer', width:100},{id:'endTime',xtype : 'datefield',//anchor: '100%',name : 'endTime',fieldLabel : '截止時(shí)間:',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("提示：","不可大于當(dāng)前時(shí)間！");Ext.getCmp('endTime').setValue(null);}else if(end.getTime() < start.getTime()) {Ext.Msg.alert("提示","結(jié)束時(shí)間必須大于開(kāi)始時(shí)間！");Ext.getCmp('endTime').setValue(null);}else if((today.getTime()-end.getTime())/86400000>31){Ext.Msg.alert("提示：","只能查詢(xún)最近30天的數(shù)據(jù)！");Ext.getCmp('endTime').setValue(null);}}},value: new Date() // defaults to today},{id:'deptType',xtype: 'combobox',fieldLabel: '組織結(jié)構(gòu):',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: '請(qǐng)選擇組織結(jié)構(gòu)...'},{text: '查詢(xún)',iconCls: 'icon-query'}];this.columns = [{header: '工號(hào)',dataIndex: 'LOGIN_ID',flex: 1},{header: '姓名',dataIndex: 'LOGIN_NAME',flex: 1.2},{header: '簽入已簽出次數(shù)',dataIndex: 'LOGIN_NUM',flex: 2},{header: '簽入已簽出時(shí)長(zhǎng)（小時(shí)）',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' });

后臺(tái)代理部分具體實(shí)現(xiàn)略

總結(jié)

以上是生活随笔為你收集整理的Extjs框架总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

框架
ExtJs

上一篇：微信源码多功能微cms微信营销服务平台
下一篇：霏凡年度十大原创精华集最终版+随书附件包