ExtJS 4.2 業務開發(二)資料展示和查詢
本篇開始模擬一個船舶管理系統,提供查詢、新增、修改船舶的功能,這裡介紹其中的資料展示和查詢功能。
目錄
1. 資料展示
2. 資料查詢
3. 線上演示
1. 資料展示
在這裡我們將模擬一個船舶管理系統,並提供查詢、新增、修改的功能。
大致的目錄結構如下:
ShipMgrTab.js :船舶業務的入口。
controller 目錄:存放船舶業務的邏輯控制檔案。
model 目錄:存放船舶業務的model檔案。
store 目錄 :存放船舶業務的store檔案。
view 目錄 :存放船舶業務的元件檔案。
1.1 設定Model
在展示資料之前要先做一些準備功能,比如業務與伺服器資料互動的方式。
Model表示業務的實體物件,在這裡設定船舶的Model:
Ext.define('App.ShipMgr.model.ShipModel', { extend: 'Ext.data.Model', fields: [ { name: 'ShipId', type: 'string', remark: '船舶ID' }, { name: 'ShipName', type: 'string', remark: '船舶名稱' }, { name: 'State', type: 'string', remark: '狀態' }, { name: 'StateName', type: 'string', remark: '狀態名稱' }, { name: 'Tonnage', type: 'string', remark: '噸位' }, { name: 'LoadNumber', type: 'int', remark: '核載人數' }, ] });
1.2 設定Store
Store封裝了一個Model物件的快取,通過 Proxy 載入資料,並提供了對資料進行排序、篩選和查詢的功能。 (在這裡只是簡單寫出需要的Model和Store;若需要對Mode、 Store和Proxy三者具體關係的瞭解可以訪問 http://docs.sencha.com/extjs/4.2.1/#!/guide/data)
var shipMgrStore = Ext.create('Ext.data.Store', { model: 'App.ShipMgr.model.ShipModel', pageSize: 25, autoLoad: true, proxy: { type: 'ajax', url: '/Business/ShipMgr/Query', reader: { reader: 'json', root: 'data', totalProperty: 'rowCount', }, actionMethods: { create: 'Post' } } });
1.3 建立Grid元件
Grid元件常用語業務中資料的列表展示。
// 建立grid var shipMgrGrid = Ext.create('Ext.grid.Panel', { store: shipMgrStore, columnLines: true, rowLines: true, bbar: Ext.create('Ext.toolbar.Paging', { store: shipMgrStore, pageSize: 25, displayInfo: true, displayMsg: '當前顯示第{0}行到第{1}行,一共{2}行。', emptyMsg: '沒有任何記錄' }), columns: [ Ext.create('Ext.grid.RowNumberer', { text: '序號', width: 50 }), { text: '船舶名稱', dataIndex: 'ShipName', flex:1 }, { text: '狀態名稱', dataIndex: 'StateName', width: 150 }, { text: '噸位', dataIndex: 'Tonnage', width: 150 }, { text: '核載人數', dataIndex: 'LoadNumber', width: 150 } ] });
1.4 伺服器返回的資料格式
在這裡shipMgrStore接收的是json格式的資料:
{"success":true, "rowCount":100, "data":[ {"ShipId":"989f1ace-5961-46d4-8f93-b56decb893af","ShipName":"船舶1","StateName":"離線","Tonnage":1.0,"LoadNumber":1}, {"ShipId":"f4dc1dd9-a173-4822-b3d3-4b3caa12820b","ShipName":"船舶2","StateName":"線上","Tonnage":1.0,"LoadNumber":1}, {"ShipId":"7b33d073-412b-460d-8e43-4f2d061d39a0","ShipName":"船舶3","StateName":"線上","Tonnage":2.0,"LoadNumber":2}, {"ShipId":"6ad72f6d-a4e6-4637-ab8b-038b9a7fc1b1","ShipName":"船舶4","StateName":"離線","Tonnage":3.0,"LoadNumber":3}, {"ShipId":"c3614867-a722-4ca8-961f-1324d5da4ad2","ShipName":"船舶5","StateName":"線上","Tonnage":1.0,"LoadNumber":4}, {"ShipId":"526befcf-0202-45b6-8175-4ca29a698acb","ShipName":"船舶6","StateName":"線上","Tonnage":5.0,"LoadNumber":1}, {"ShipId":"058295b4-e4d6-4fb6-b232-ed0e07515571","ShipName":"船舶7","StateName":"離線","Tonnage":6.0,"LoadNumber":6} ]}
1.5 執行圖
2. 資料查詢
查詢功能比較簡單,只需要shipMgrStore在每次請求時附加上查詢條件。
2.1 建立一個搜尋框
首先在shipMgrGrid的上方工具欄處建立一個文字輸入框和一個查詢按鈕。
點選查詢按鈕,會觸發shipMgrStore.loadPage(1)事件:
// 建立工具條 var shipMgrToolBarPanel = Ext.create('Ext.panel.Panel', { width: '100%', height: 40, bodyBorder: false, border: false, region: 'north', tbar: [ Ext.create('Ext.form.field.Text', { name: 'SearchTxt', emptyText: '請輸入船舶名稱', width: 200, enableKeyEvents: true, listeners: { keyup: function (thisControl, e, eOpts) { if (e.button == 12) { // 若敲的鍵為回車,就執行【查詢】搜尋 shipMgrToolBarPanel.down('[name=QueryBtn]').handler(); } } } }), Ext.create('Ext.Action', { icon: 'Resources/icon/find.png', text: '查詢', name: 'QueryBtn', handler: function () { // 設定搜尋條件 searchConditionObj.SearchTxt = shipMgrToolBarPanel.down('[name=SearchTxt]').value; shipMgrStore.loadPage(1); } }) ] });
2.2. store附加搜尋條件
shipMgrStore每次請求時都附加搜尋條件:
// 建立store var shipMgrStore = Ext.create('Ext.data.Store', { model: 'App.ShipMgr.model.ShipModel', pageSize: 25, autoLoad: true, proxy: { type: 'ajax', url: '/Business/ShipMgr/Query', reader: { reader: 'json', root: 'data', totalProperty: 'rowCount', }, actionMethods: { create: 'Post' } }, listeners: { beforeload: function (thisStore, record, opts) { // 附加檢索條件 thisStore.proxy.extraParams = searchConditionObj; } } });
2.3 執行圖
3. 線上演示
相關推薦
ExtJS 4.2 業務開發(二)資料展示和查詢
本篇開始模擬一個船舶管理系統,提供查詢、新增、修改船舶的功能,這裡介紹其中的資料展示和查詢功能。 目錄 1. 資料展示 2. 資料查詢 3. 線上演示 1. 資料展示 在這裡我們將模擬一個船舶管理系統,並提供查詢、新增、修改的功能。 大致的目錄結構如下: ShipMgrTab.js :
ExtJS 4.2 業務開發(三)資料新增和修改
Ext.define('App.ShipMgr.view.AddShipWindow', { extend: 'Ext.window.Window', layout: 'fit', constrain: true, // 是否只能在父容器的範圍內拖動 modal:
ExtJS 4.2 業務開發(一)主頁搭建
Ext.application({ name: 'AKApp', launch: function () { // 設定Viewport Ext.create('Ext.container.Viewport', { name
《OpenCV3程式設計入門》——4.2 OpenCV中常用資料結構和函式(Point、Scalar、Size、Rect、cvtColor)
目錄 1、點的表示:Point類 2、顏色的表示:Scalar類 3、尺寸的表示:Size類 4、矩形的表示:Rect類 5、顏色空間轉換:cvtColor()函式 1、點的表示:Point類 Point類資料結構表示了二維座標系下的點,即由影象座標x和y指定的2D點
extjs 4.2 自定義主題,官方原文翻譯
網上文章都不詳細,自己看官方原文,成功自定義extjs 4.2和extjs 6.2兩個版本。本文是4.2 環境&工具 win7 已經配置了java環境(文中要求配置jre,) 官方原文 Ruby下載 我用的是2.4.4(看它長的特殊) sench
第4章:基本結構和基本資料型別/4.2 Go 程式的基本結構和要素/4.2.5 可見性
易學筆記 十年IT經驗個人學習筆記分享: 開發語言:C/C++/JAVA/PYTHON/GO/JSP WEB架構:Servlets/springMVC/springBoot/springClound 容器架構:Docker容器/Docker叢集/Docker與微服務整合/
第4章:基本結構和基本資料型別/4.2 Go 程式的基本結構和要素/4.2.4 import:匯入包
易學筆記 十年IT經驗個人學習筆記分享: 開發語言:C/C++/JAVA/PYTHON/GO/JSP WEB架構:Servlets/springMVC/springBoot/springClound 容器架構:Docker容器/Docker叢集/Docker與微服務整合/
第4章:基本結構和基本資料型別/4.2 Go 程式的基本結構和要素/4.2.6 函式
易學筆記 十年IT經驗個人學習筆記分享: 開發語言:C/C++/JAVA/PYTHON/GO/JSP WEB架構:Servlets/springMVC/springBoot/springClound 容器架構:Docker容器/Docker叢集/Docker與微服務整合/
ExtJS 4.2 Grid元件的單元格合併
ExtJS 4.2 Grid元件本身並沒有提供單元格合併功能,需要自己實現這個功能。 目錄 1. 原理 2. 多列合併 1. 原理 1.1 HTML程式碼分析 首先建立一個Grid元件,然後檢視下的HTML原始碼。 1.1.1 Grid元件 1.1.2 HTML程式碼 從這
ExtJS 4.2 元件的查詢方式
元件建立了,就有方法找到這些元件。在DOM、Jquery都有各自的方法查詢元素/元件,ExtJS也有自己獨特的方式查詢元件、元素。本次從全域性查詢、容器內查詢、form表單查詢、通用元件等4個方面介紹元件的查詢方式。 目錄 2. 容器內查詢 1. 全域性查詢方式 全域性查詢方式指在整個
ExtJS 4.2 評分元件
/*! * 評分元件 */ Ext.define('App.Demo.RatingStarFiledDemoTab', { extend: 'Ext.panel.Panel', layout: 'fit', closable: true, reload: fu
ExtJS 4.2 元件介紹
目錄 1. 介紹 1.1 說明 1.2 元件分類 1.3 元件名稱 1.4 元件結構 1. 介紹 1.1 說明 ExtJS的強大功能之一是提供了非常豐富的元件,包括grid(表格)、panel(面板)、form(表單)、button(按鈕)、progressBa
ExtJS 4.2 Date元件擴充套件:新增清除按鈕
/*! * 在原有的Date元件上新增【清除】按鈕 */ Ext.define('Js.ux.DatePicker', { override: 'Ext.picker.Date', renderTpl: [ '<div id="{id}-innerEl"
ExtJS 4.2 第一個程式
本篇介紹如何建立一個ExtJS應用程式。並通過建立目錄、匯入檔案、編寫程式碼及分析程式碼等步驟來解釋第一個ExtJS程式。 目錄 1. 建立程式 1.2 實際目錄 1.4 執行圖 2. 程式碼分析 1. 建立程式 1.1 建立目錄建議 根據官方建議,建立一個ExtJ
extjs 6.2 熟悉開發環境 hello world
1.下載extjs 6.2 並解壓。 2.釋出extjs專案。 將ext-6.2.0資料夾拷貝到tomcate的webapp目錄下啟動tomcate,或者拷貝到IIS釋出。 3.本地編寫hello
Extjs 6.2 實戰 (二)MVVM模式介紹
MVVM是模型(Model)、檢視(View)和檢視模型(ViewModel)的縮寫,是一種軟體設計模式。MVVM主要作用就是簡化事件驅動變成的使用者介面開發。它把軟體系統劃分為模型、檢視和檢視模型三個基本部分2.1 Extjs中的MVVM模式 Extjs中的MVVM模式將應
(轉)OpenCV3.4.2+VS2017開發環境配置
由於版本提高,在原文的基礎上有適當修改,但總體都是原博主的。本文是隻配置了一個專案,要想永久配置請參考 拜小白教你OpenCV3.4.2+VS2017開發環境配置 本機環境:win10 64位 OpenCV3.4.2 Visual Studio 2017 最
3dTiles 資料規範詳解[4.2] i3dm瓦片二進位制資料檔案結構
i3dm,即 `Instanced 3D Model`,例項三維模型的意思。 諸如樹木、路燈、路邊的垃圾桶、長椅等具有明顯 **重複** 特徵的資料。這類資料用得較少(笑,現在都喜歡搞BIM、傾斜攝影、精模、白模等) > 我的git地址:[github.com/onsummer](https://gith
玩轉Android Camera開發(二):使用TextureView和SurfaceTexture預覽Camera 基礎拍照demo
處理 pict all sans 格式 facet ace ets nth Google自Android4.0出了TextureView。為什麽推出呢?就是為了彌補Surfaceview的不足。另外一方面也是為了平衡GlSurfaceView。當然這是本人揣度的。關於Te
4.2 矩陣的最小路徑和
路徑 4.2 一個 開始 最小路徑 位置 如果 累加 數字 【題目】: 給定一個矩陣m,從左上角開始每次只能向右或者向下走,最後到達右下角的位置,路徑上所有的數字累加起來就是路徑和,返回所有路徑和中最小的路徑和 舉例: 如果給定的m如下: 1