ExtJS 4.2 Business Development (ii) data presentation and enquiry

This article began to simulate a ship management system, providing query, add, modify the function of the ship, the data presented here and query function.

Directory

1. Data display

2. Data query

3. Online Demo

1. Data display

Here we will simulate a ship management system, and provide query, add, modify the function.

The approximate directory structure is as follows:

Shipmgrtab.js: The entrance to the ship business.

Controller directory: A logical control file that holds the ship's business.

Model Directory: Model file for the shipping business.

Store Directory: The store file that holds the shipping business.

View Directory: The component file that holds the ship's business.

1.1 Setting the Model

Before presenting the data, you need to do some preparatory functions, such as how the business interacts with the server data.

Model represents the entity object of the business, where the model of the ship is set:

Ext.define (' App.ShipMgr.model.ShipModel ', {    extend: ' Ext.data.Model ', fields    : [        {name: ' Shipid ', type: ' String ', remark: ' Ship ID '},        {name: ' ShipName ', type: ' String ', remark: ' Ship name '},        {name: ' state ', type: ' String ', Remark: ' Status '},        {name: ' StateName ', type: ' String ', remark: ' State name '},        {name: ' Tonnage ', type: ' String ', remark: ' Tonnage '},        {name: ' Loadnumber ', type: ' int ', remark: ' Nuclear capacity '},    ]});  

　　

1.2 Setting Store

The store encapsulates a model object's cache, loads the data through a Proxy, and provides the ability to sort, filter, and query the data. (Here you simply write the model and store you need, and if you need to know more about the relationship between mode, store, and proxy, you can access 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 Creating a Grid component

A list of data in a grid component's common terminology business.

Create 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: ' currently shows the {0} line to the {1} line, altogether {2} rows. ',        emptymsg: ' No Records '    },    columns: [        ext.create (' Ext.grid.RowNumberer ', {            text: ' Ordinal ',            Width:50        }), {            text: ' Ship name ',            dataindex: ' ShipName ',            flex:1        }, {            text: ' state name ',            Dataindex: ' StateName ',            width:150        }, {            text: ' Tonnage ',            dataindex: ' Tonnage ',            width:150        } , {            text: ' Nuclear capacity ',            dataindex: ' Loadnumber ',            width:150        }    ]});

1.4 Data formats returned by the server

Here Shipmgrstore receives the data in JSON format:

{"Success": true, "rowCount": +, "data": [{"Shipid": "989f1ace-5961-46d4-8f93-b56decb893af", "ShipName": "Ship 1", " StateName ": Offline", "Tonnage": 1.0, "Loadnumber": 1},{"Shipid": "f4dc1dd9-a173-4822-b3d3-4b3caa12820b", "ShipName": "Ship 2 "," StateName ":" Online "," Tonnage ": 1.0," Loadnumber ": 1},{" Shipid ":" 7b33d073-412b-460d-8e43-4f2d061d39a0 "," ShipName ":" Ship 3 "," StateName ":" Online "," Tonnage ": 2.0," Loadnumber ": 2},{" Shipid ":" 6ad72f6d-a4e6-4637-ab8b-038b9a7fc1b1 "," ShipName ":" Ship 4 "," StateName ":" Offline "," Tonnage ": 3.0," Loadnumber ": 3},{" Shipid ":" C3614867-a722-4ca8-961f-1324d5da4ad2 "," ShipName ": Ship 5", "StateName": "Online", "Tonnage": 1.0, "Loadnumber": 4},{"Shipid": "526BEFCF-0202-45B6-8175-4CA29A698ACB "," ShipName ":" Ship 6 "," StateName ":" Online "," Tonnage ": 5.0," Loadnumber ": 1},{" Shipid ":" 058295b4-e4d6-4fb6-b232-ed0e07515571 "," ShipName ":" Ship 7 "," StateName ":" Offline "," Tonnage ": 6.0," Loadnumber ": 6}]}

1.5 Operation diagram

2. Data query

The query function is relatively simple and requires only shipmgrstore to append the query criteria on each request.

2.1 Create a search box

First, create a text input box and a query button at the top of the Shipmgrgrid toolbar.

Clicking the query button will trigger the Shipmgrstore.loadpage (1) Event:

Create a toolbar 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: ' Please enter ship name ', width:200, Enablekeyevents:true, listeners: {                        Keyup:function (ThisControl, E, eopts) {if (E.button = = 12) {//If the key to hit is a carriage return, perform a "query" search                    Shipmgrtoolbarpanel.down (' [name=querybtn] '). Handler ();            }}}), Ext.create (' ext.action ', {icon: ' Resources/icon/find.png ',                Text: ' Query ', Name: ' Querybtn ', handler:function () {//Set search criteria                Searchconditionobj.searchtxt = Shipmgrtoolbarpanel.down (' [Name=searchtxt] '). Value;            Shipmgrstore.loadpage (1); }        })    ]});

2.2. Store additional search criteria

Shipmgrstore additional search conditions on each request:

Create Storevar Shipmgrstore = ext.create (' Ext.data.Store ', {    model: ' App.ShipMgr.model.ShipModel ',    pageSize:    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) {            //additional search criteria            ThisStore.proxy.extraParams = Searchconditionobj;}}    );

2.3 Operation diagram

3. Online Demo

Online demo : Http://www.akmsg.com/ExtJS/index.html#App.ShipMgr.ShipMgrTab

================================== Series article ==========================================

This post: 7.6 ExtJS 4.2 Business Development (ii) data presentation and enquiry

Web Development Road Series articles

ExtJS 4.2 Business Development (ii) data presentation and enquiry