UAS2.0_DEV_TEST/app/view/grid/bigData/Panel.js

Ext.define('uas.view.grid.bigData.Panel', {
    extend: 'Ext.grid.Panel',
    xtype: 'big-data-grid',
    controller: 'bigdata',

    requires: [
        'Ext.grid.filters.Filters',
        'Ext.sparkline.Line',
        'Ext.ux.rating.Picker'
    ],

    store: {
        type: 'big-data',
        remoteSort: true,
        autoLoad: true
    },
    columnLines: true,
    multiColumnSort: true,

    features: [{
        ftype : 'groupingsummary',
        groupHeaderTpl : '{name}',
        hideGroupedHeader : false,
        enableGroupingMenu : false
    }, {
        ftype: 'summary',
        dock: 'bottom'
    }],

    layout: 'border',
    split: true,

    lockedGridConfig: {
        title: 'Employees',
        header: false,
        collapsible: true,
        width: 325,
        minWidth: 290,
        forceFit: true
    },

    selModel: {
        type: 'checkboxmodel',
        checkOnly: true
    },

    columns:[{
        xtype: 'rownumberer',
        width: 120,
        sortable: false,
        locked: true,
        summaryType: 'count',
        summaryRenderer: function(value, summaryData, dataIndex) {
            return Ext.String.format('共有{0}条数据', value);
        }
    }, {
        text: 'Id',
        sortable: true,
        dataIndex: 'employeeNo',
        groupable: false,
        width: 80,
        locked: true,
        editRenderer: 'bold'
    }, {
        text: 'Name (Filter)',
        dataIndex: 'name',
        sortable: true,
        sorter: {
            sorterFn: 'nameSorter' // set controller
        },

        width: 140,
        groupable: false,

        layout: 'hbox',
        locked: true,
        renderer: 'concatNames',
        editor: {
            xtype: 'textfield'
        },
        items: {
            xtype: 'textfield',
            fieldStyle: "",
            reference: 'nameFilterField',
            flex : 1,
            margin: 2,
            enableKeyEvents: true,
            listeners: {
                keyup: 'onNameFilterKeyup',
                buffer: 500
            }
        }
    }, {
        text: 'Rating',
        width: 100,
        sortable: true,
        dataIndex: 'rating',
        groupable: false,
        xtype: 'widgetcolumn',
        widget: {
            xtype: 'sparklineline'
        }
    }, {
        text: 'Date of birth',
        dataIndex: 'dob',
        xtype: 'datecolumn',
        groupable: false,
        width: 115,
        filter: {

        },
        editor: {
            xtype: 'datefield'
        },
        exportStyle: {
            alignment: {
                horizontal: 'Right'
            },
            format: 'Long Date'
        }
    }, {
        text: 'Join date',
        dataIndex: 'joinDate',
        xtype: 'datecolumn',
        groupable: false,
        width: 120,
        filter: {

        },
        editor: {
            xtype: 'datefield'
        },
        exportStyle: {
            alignment: {
                horizontal: 'Right'
            },
            format: 'Long Date'
        }
    }, {
        text: 'Notice<br>period',
        dataIndex: 'noticePeriod',
        groupable: false,
        width: 115,
        filter: {
            type: 'list'
        },
        editor: {
            xtype: 'combobox',
            listeners: {
                beforerender: 'onBeforeRenderNoticeEditor'
            }
        }
    }, {
        text: 'Email address',
        dataIndex: 'email',

        width: 200,
        groupable: false,
        renderer: 'renderMailto',
        editor: {
            xtype: 'textfield'
        }
    }, {
        text: 'Department',
        dataIndex: 'department',
        hidden: true,
        hideable: false,
        filter: {
            type: 'list'
        }
    }, {
        text: 'Absences',
        shrinkWrap: true,
        columns: [{
            text: 'Illness',
            dataIndex: 'sickDays',
            width: 100,
            groupable: false,
            summaryType: 'sum',
            summaryFormatter: 'number("0")',
            filter: {

            },
            editor: {
                xtype: 'numberfield',
                decimalPrecision: 0
            }
        }, {
            text: 'Holidays',
            dataIndex: 'holidayDays',
            width: null, // Size column to title text
            groupable: false,
            summaryType: 'sum',
            summaryFormatter: 'number("0")',
            filter: {

            },
            editor: {
                xtype: 'numberfield',
                decimalPrecision: 0
            }
        }, {
            text: 'Holiday Allowance',
            dataIndex: 'holidayAllowance',
            width: null, // Size column to title text
            groupable: false,
            summaryType: 'sum',
            summaryFormatter: 'number("0.00")',
            formatter: 'number("0.00")',
            filter: {

            },
            editor: {
                xtype: 'numberfield',
                decimalPrecision: 0
            }
        }]
    }, {
        text: 'Rating<br>This Year',
        dataIndex: 'ratingThisYear',
        groupable: false,
        xtype: 'widgetcolumn',
        widget: {
            xtype: 'rating',
            tip: 'Set to {tracking:plural("Star")}'
        }
    }, {
        text: 'Salary',
        width: 155,
        sortable: true,
        dataIndex: 'salary',
        align: 'right',
        formatter: 'usMoney',
        groupable: false,
        summaryType: 'average',
        summaryFormatter: 'usMoney',
        filter: {

        },
        editor: {
            xtype: 'numberfield',
            decimalPrecision: 2
        },
        exportStyle: {
            alignment: {
                horizontal: 'Right'
            },
            format: 'Currency'
        }
    }],

    viewConfig: {
        stripeRows: true
    },

    plugins: {
        gridfilters: true,
        rowexpander: {
            // dblclick invokes the row editor
            expandOnDblClick: false,
            rowBodyTpl: '<img src="{avatar}" height="100px" '+
                'style="float:left;margin:0 10px 5px 0"><b>{name}<br></b>{dob:date}'
        }
    }
});