Sencha ExtJS 6 Widget Grid 入門

　　最近由於業務需要，研究了一下Sencha ExtJS 6 ，雖然UI和性能上據相關資料說都有提升，但是用起來確實不太順手，而且用Sencha cmd工具進行測試和發布，很多內部細節都是隱藏的，出了問題不好跟蹤。更奇葩的是明明在sencha app watch上運行很好，但是sencha app build后會出現異常。即使是這樣，但Sencha ExtJS 6 在UI控件和編程模式上確實比較強大。下面介紹一個 Widget Grid 用法，可以在表格grid中進行列樣式渲染，是一個比較強大的功能：

1 拷貝admin-dashboard創建項目

2 配置app.json，主要用於中文提示和采用font-awesome字體庫等

    /**
     * The Sencha Framework for this application.
     */
    "framework": "ext",
    "locale": "zh_CN",//中文
    /**
     * The list of required packages (with optional versions; default is "latest").
     * https://docs.sencha.com/extjs/6.0/core_concepts/localization.html
     */
    "requires": [
        "charts",
        "font-awesome",//字體
        "ux",
        "ext-locale"
    ],

3 配置菜單（Admin.store.NavigationTree）

  {
        text: 'Widget Grid',
         view: 'main.SRFX',
         leaf: true,
         iconCls: 'x-fa fa-times-circle',
         routeId: 'SRFX'
 },

4 定義視圖和模型等

　在\classic\src\view\main中新建 一個srfxd.js，其內容為：

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'progress'],
    data: [
        { name: 'Lisa', progress: .159, sequence1: [1, 2, 4, 5, 4, 5], sequence2: [1, -2, 4, 5, 4, -5], sequence3: [1, -2, 4, 5, 4, -5] },
        { name: 'Bart', progress: .216, sequence1: [1, 2, 4, 5, 4, 5], sequence2: [1, -2, 4, 5, 4, -5], sequence3: [1, -2, 4, 5, 4, -5] },
        { name: 'Homer', progress: .55, sequence1: [1, 2, 4, 5, 4, 5], sequence2: [1, -2, 4, 5, 4, -5], sequence3: [1, -2, 4, 5, 4, -5] },
        { name: 'Maggie', progress: .167, sequence1: [1, 2, 4, 5, 4, 5], sequence2: [1, -2, 4, 5, 4, -5], sequence3: [1, -2, 4, 5, 4, -5] },
        { name: 'Marge', progress: .145, sequence1: [1, 2, 4, 5, 4, 5], sequence2: [1, -2, 4, 5, 4, -5], sequence3: [1, -2, 4, 5, 4, -5] }
    ]
});




Ext.define('Admin.view.main.SRFX', {
    extend: 'Ext.grid.Panel',
    requires: [
        'Ext.grid.column.Action',
        'Ext.ProgressBarWidget',
        'Ext.slider.Widget',
        'Ext.sparkline.*'
    ],
    title: '收入分析',
    store: store,
    columns: [
        {
            text: 'Name',
            dataIndex: 'name'
        },
        {
            text: 'progress',
            xtype: 'widgetcolumn',
            width: 120,
            dataIndex: 'progress',
            widget: {
                xtype: 'progressbarwidget',
                textTpl: [
                    '{percent:number("0")}% done'
                ]
            }
        }
        , {
            text: 'Line',
            width: 100,
            dataIndex: 'sequence2',
            xtype: 'widgetcolumn',
            widget: {
                xtype: 'sparklineline',
                tipTpl: 'Value: {y:number("0.00")}'
            }
        }
        , {
            text: 'Bar',
            width: 100,
            dataIndex: 'sequence2',
            xtype: 'widgetcolumn',
            widget: {
                xtype: 'sparklinebar'
            }
        }, {
            text: 'Bullet',
            width: 100,
            dataIndex: 'sequence3',
            xtype: 'widgetcolumn',
            widget: {
                xtype: 'sparklinebullet'
            }
        }
    ],
    height: 350,
    width: 600,
    // renderTo: Ext.getBody()
});

 5 sencha app watch查看