Extjs6（五）——寫一個包含toolbar、form、grid的子頁面

本文基於ext-6.0.0

　　這個頁面布局是很多管理系統的常用布局，具體如下圖：

　　

一、頁面主體personalInfo.js

　　整個頁面采用border布局，分成三部分，這個personalInfo.js就是整個頁面的主體，引用了personalToolbar、personalForm、personalGrid三個組件。

Ext.define('Learning.view.centerPanel.personalInfo.personalInfo', {
    extend: 'Ext.panel.Panel',
    xtype:'personal-main',
    // controller: 'personalInfo',
    // viewModel: 'personalInfo',
    referenceHolder: true,
    layout: 'border',
    height: window.innerHeight-50,

    defaults:{
        collapsible: false,
        split: false
    },

    items: [
        {
            reference:'personalToolbar',
            xtype:'personal-toolbar',
            region:'north',
            height:50
        },
        {
            reference:'personalForm',
            xtype:'personal-form',
            region :'north',
            style:'margin-bottom:10px;',  //貼在一起不好看，就分開點
        },
        {
            reference:'personalGrid',
            xtype:'personal-grid',
            region :'center'
        }
    ],
});

　　這里要說一下panel，panel是必須要設置height的，我這里設置height為window.innerHeight-50,是因為我這個的父panel有一個height為50的頭，所以要減去50。

 

二、personalToolbar.js

　　按鈕的事件還沒有寫，這里先注釋上了，之后會寫。

Ext.define('Learning.view.centerPanel.personalInfo.personalToolbar',{
    extend: 'Ext.toolbar.Toolbar',
    xtype:'personal-toolbar',

    items:[
        {
            text:'新增',
            iconCls:'x-fa fa-plus',
            //handler: 'addWin'
        },
        {
            text:'編輯',
            iconCls:'x-fa fa-edit',
            //handler: 'editWin'
        },
        {
            text:'刪除',
            iconCls:'x-fa fa-times',
            //handler: 'del'
        },
        {        
            text:'查詢',
            iconCls:'x-fa fa-search',    
            //handler: 'onSearch'    
        },
        {
            text:'重置',
            iconCls:'x-fa fa-refresh',
            //handler: 'reset'    
        }
    ]
});     

 

三、personalForm.js

　　這里只寫了textfield一種，之前有專門寫過各種form的總結（Extjs6組件——Form大家族成員介紹），需要別的form可以看下。

Ext.define('Learning.view.centerPanel.personalInfo.personalForm', {
    extend: 'Ext.form.Panel',
    xtype:'personal-form',
    id:'personalForm',

    defaultType:'textfield',
    layout:'anchor',
    defaults:{
        style:'float:left;',
        anchor:'16%'
    },
    fieldDefaults:{
        labelAlign:'right',
        labelWidth:65                                 
    },

    items:[
        {
            allowBlank: false,
            fieldLabel: '姓名',
            name: 'name',
            minWidth: 180
        },
        {
            allowBlank: false,
            fieldLabel: '性別',
            name: 'sex',
            minWidth: 180
        },
        {
            fieldLabel: '民族',
            name: 'nation',
            minWidth: 180
        },
        {
            fieldLabel: '電話',
            name: 'phone',
            minWidth: 180
        }
    ]
});

 

 四、personalGrid.js

Ext.define('Learning.view.centerPanel.personalInfo.personalGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'personal-grid',

    requires: [
        'Learning.store.personalInfo.personalStore'
    ],

    store: {
        type: 'personalStore'
    },

    selModel: {
        selType: 'checkboxmodel', 
        mode: 'MULTI'
    },

    columns: [
        {
            xtype:'rownumberer',
            header:'行號',
            renderer: function(value,metadata,record,rowIndex){
                return (rowIndex+1);
            },
            width:60,
            align: 'center',
        },
        { 
            text: '姓名',  
            dataIndex: 'name', 
            flex: 1,
            minWidth:135 
        },
        { 
            text: '性別', 
            dataIndex: 'sex', 
            flex: 1,
            minWidth:135
        },
        { 
            text: '民族',  
            dataIndex: 'nation', 
            flex: 1,
            minWidth:135 
        },
        { 
            text: '電話', 
            dataIndex: 'phone', 
            flex: 2,
            minWidth:135
        },
    ]
});

　　Grid中的數據來源於store。

Ext.define('Learning.store.personalInfo.personalStore', {
    extend: 'Ext.data.Store',

    alias: 'store.personalStore',

    fields: [
        'name', 'sex' , 'nation' , 'phone'
    ],

    data: { items: [
        { name: '皮皮', sex: "女", nation: "漢", phone: "555-111-1111" },
        { name: '卡卡', sex: "男", nation: "回", phone: "555-222-2222" },
        { name: '球球', sex: "男", nation: "苗", phone: "555-333-3333" },
        { name: '貝貝', sex: "女", nation: "漢", phone: "555-444-4444" }
    ]},

    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    }
});

 

 完。

她的臉映着光，像豬腳一樣。