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組件常用語業務中資料的列表展示。

// 建立gridvar 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每次請求時都附加搜尋條件：

// 建立storevar 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. 線上示範

線上示範：http://www.akmsg.com/ExtJS/index.html#App.ShipMgr.ShipMgrTab

 

==================================系列文章==========================================

本篇文章：7.6  ExtJS 4.2 業務開發(二)資料展示和查詢

Web開發之路系列文章

 

ExtJS 4.2 業務開發(二)資料展示和查詢