葡京在线开户ExtJS 4.2 业务支出(二)数据显示与询问

本篇开始学一个船只管理网,提供查询、添加、修改船舶的效果,这里介绍其中的数额显示与询问功能。

当CSS3受到提供了针对性边框进行圆角设定的支持,可对边框1~4独角进行圆角样式设置。

目录

1.
数码显示

2.
多少查询

  1. 在线演示

 

目录

1.
介绍

2.
value值的格式和种类

3. border-radius
1~4独参数说明

  1. 在线示例

 

1. 数目显示

以此间我们拿学一个轮管理网,并提供查询、添加、修改的效果。

大体的目录结构如下:

葡京在线开户 1

ShipMgrTab.js :船舶业务的进口。

controller 目录:存放船舶业务的逻辑控制文件。

model 目录:存放船舶业务的model文件。

store 目录 :存放船舶业务的store文件。

view 目录 :存放船舶业务的机件文件。

1. 介绍

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.1 圆角属性

CSS3提供了5种圆角属性

border-radius
:同时装4个框的圆角样式。

border-top-left-radius
:设置左上角边框的圆角样式。

border-top-right-radius
:设置右上角边框的圆角样式。

border-bottom-left-radius
:设置左下角边框的圆角样式。

border-bottom-right-radius
:设置右下角边框的圆角样式。

示例

葡京在线开户 2

 

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.2 浏览器支持情况

最好小本支持:IE 9 、Chrome 4

 

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.3 引用资料

规范:https://www.w3.org/TR/css3-background/#the-border-radius

文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

 

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}
]}

 

2. value值的格式和档次

border-*-radius属性的价值可个别设定水平半径垂直半径;若省略垂直半径,则直半径默认使用水平半径的值。

若是每个值,支持之单位有永恒长度百分比。若设置百分比格式,则水平半径的比例是靠边框的增长率,而垂直半径的比重是因边框的莫大。

做如下(以border-radius为例):

1) border-radius:20px; //
表示圆角的水平半径直半径都为20px长度。

2) border-radius:20px/40px; //
表示圆角的水平半径的长短也20px,笔直半径的长也20px。

3) border-radius:20%;
// 表示圆角的水平半径笔直半径还为独家边框长度的20%。

4) border-radius:20%/30%; // 表示圆角的水平半径呢边框宽度之20%,笔直半径犹为边框高度的20%。

5) border-radius:20px/30%; // 表示圆角的水平半径长度20px,垂直半径犹为边框高度的20%。

示例

葡京在线开户 3

 

1.5 运行图

葡京在线开户 4

 

3. border-radius 1~4单参数说明

border-radius可以一次性对四独角装同一之值,也可以针对4单比赛分别设置圆角体。

一旦秘诀就是在设定border-radius的参数个数。

率先看下CSS规范针对border-radius的参数说明:[ <length> |
<percentage> ]{1,4} [ / [ <length> | <percentage>
]{1,4} ]?

不过得知border-radius的参数个数范围也1~4独,这里而顾点水平半径和直半径的分级采用时:在border-radius中优先安装4独边角的程度半径再安装4个边角的直半径。

下面分别证实参数1~4独参数所表示的含义:

2. 数目查询

询问功能于简单,只需要shipMgrStore在每次要时增大上询问条件。

3.1 参数个数:1

说明:4只框的圆角样式都利用这设置。

示例:border-radius: 20px; // 4单框圆角样式且也20px

葡京在线开户 5

 

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);
            }
        })
    ]
});

 

3.2 参数个数:2

说明

  第①参数:左上角与右下角边框的圆角样式。

  第②参数:右上比与左下角边框的圆角样式。

示例:border-radius: 20px
40px; // 左上角与右下角:20px;右上比与左下角:40px

葡京在线开户 6

 

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;
        }
    }
});

 

 

3.3 参数个数:3

说明

  第①参数:左上角边框的圆角样式。

  第②参数:右上比与左下角边框的圆角样式。

  第③参数:右下角边框的圆角样式。

示例:border-radius:20px 40px
60px; // 左上角:20px;右上比赛与左下角:40px;右下角:60px

葡京在线开户 7

 

2.3 运行图

葡京在线开户 8

 

3.4 参数个数:4

说明

  第①参数:左上角边框的圆角样式。

  第②参数:右上角边框的圆角样式。

  第③参数:右下角边框的圆角样式。

  第④参数:左下角边框的圆角样式。

示例:border-radius:20px 40px 60px
80px; // 左上角:20px;右上角:40px;右下角:60px;左下角:80px

葡京在线开户 9

 

3. 在线演示

在线演示:http://www.akmsg.com/ExtJS/index.html#App.ShipMgr.ShipMgrTab

 

End

Web开发的路系列文章

菜单加载中…

4.在线示例

4.1 示例

 

 

4.2 在线地址

地址:http://www.akmsg.com/WebDemo/CSS3-border-radius.html

 

End

Web开发的路系列文章

菜单加载中…