zoukankan      html  css  js  c++  java
  • ExtJS 自定义组件

    主要参考的是官方文档

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>主播推荐-分数管理-标签管理</title>
        <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="resources/css/KitchenSink-all.css" />
        <script type="text/javascript" src="ext-all.js"></script>
    </head>
    
    <body>
        <div id="grid" style=" 1000px;"></div>
        <div id="ksgrid"></div>
        <div id="onegrid"></div>
        <div id="twogrid"></div>
        <script>
        Ext.onReady(function() {
            var columns = [{
                header: 'ID',
                dataIndex: 'id',
                sortable: true
            }, {
                header: '创建时间',
                dataIndex: 'create',
                 120
            }, {
                xtype: 'datecolumn',
                header: '修改时间',
                dataIndex: 'update',
                 150
            }, {
                header: '标签名称',
                dataIndex: 'title'
            }, {
                header: '推荐排序',
                dataIndex: 'recommend'
            }, {
                header: '流量权重',
                dataIndex: 'weigh'
            }, {
                header: '启用状态',
                dataIndex: 'state'
            }, {
                menuDisabled: true,
                sortable: false,
                xtype: 'actioncolumn',
                 150,
                items: [{
                    iconCls: 'sell-col',
                    tooltip: 'Sell stock',
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex);
                        Ext.Msg.alert('Sell', 'Sell ' + rec.get('id'));
                        var recNext = grid.getStore().getAt(rowIndex + 1);
                    }
                }, {
                    getClass: function(v, meta, rec) {
                        if (rec.get('change') < 0) {
                            return 'alert-col';
                        } else {
                            return 'buy-col';
                        }
                    },
                    getTip: function(v, meta, rec) {
                        if (rec.get('change') < 0) {
                            return 'Hold stock';
                        } else {
                            return 'Buy stock';
                        }
                    },
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex),
                            action = (rec.get('change') < 0 ? 'Hold' : 'Buy');
    
                        Ext.Msg.alert(action, action + ' ' + rec.get('company'));
                    }
                }]
            }];
    
            var data = [
                ['1', '2014-12-11 00:30', '2014-12-11 00:30', '女神', '2', '25', '已启用'],
                ['1', '2014-12-11 00:25', '2014-12-11 00:25', '女神', '2', '25', '已启用'],
                ['1', '2014-12-11 00:25', '2014-12-11 00:25', '女神', '2', '25', '已启用'],
                ['1', '2014-12-11 00:25', '2014-12-11 00:25', '女神', '2', '25', '已启用'],
                ['1', '2014-12-11 00:25', '2014-12-11 00:25', '女神', '2', '25', '已启用']
            ];
    
            var store = new Ext.data.ArrayStore({
                data: data,
                fields: [{
                    name: 'id'
                }, {
                    name: 'create'
                }, {
                    name: 'update'
                }, {
                    name: 'title'
                }, {
                    name: 'recommend'
                }, {
                    name: 'weigh'
                }, {
                    name: 'state'
                }]
            });
            store.load();
    
            var grid = new Ext.grid.GridPanel({
                autoHeight: true,
                title: 'title',
                renderTo: 'grid',
                store: store,
                columns: columns
            });
    
            //自定义组件
            //这是ExtJS中KitchenSink的例子
            //这里把columns写入组件中了
            Ext.define('KitchenSink.view.grid.ArrayGrid', {
                extend: 'Ext.grid.Panel', //Ext.grid.GridPanel也可以
                requires: [
                    'Ext.grid.column.Action' //不太明白用途  字面上看应该是action列的依赖  但是去掉也可以
                ],
                xtype: 'array-grid', //定义了组件的xtype   在form那一章节里面有用到
                stateful: true,
                collapsible: true,
                multiSelect: true,
                stateId: 'stateGrid',
                // height: 350,
                title: 'Array Grid',
                viewConfig: {
                    stripeRows: true,
                    enableTextSelection: true
                },
    
                initComponent: function() {
                    this.width = 650;
                    this.columns = [{
                        text: 'Company',
                        flex: 1,
                        sortable: false,
                        dataIndex: 'company'
                    }, {
                        text: 'Price',
                         75,
                        sortable: true,
                        renderer: 'usMoney',
                        dataIndex: 'price'
                    }, {
                        text: 'Change',
                         80,
                        sortable: true,
                        renderer: function(val) {
                            if (val > 0) {
                                return '<span style="color:' + '#73b51e' + ';">' + val + '</span>';
                            } else if (val < 0) {
                                return '<span style="color:' + '#cf4c35' + ';">' + val + '</span>';
                            }
                            return val;
                        },
                        dataIndex: 'change'
                    }, {
                        text: '% Change',
                         100,
                        sortable: true,
                        renderer: function(val) {
                            if (val > 0) {
                                return '<span style="color:' + '#73b51e' + '">' + val + '%</span>';
                            } else if (val < 0) {
                                return '<span style="color:' + '#cf4c35' + ';">' + val + '%</span>';
                            }
                            return val;
                        },
                        dataIndex: 'pctChange'
                    }, {
                        xtype: 'datecolumn',
                        text: 'Last Updated',
                         115,
                        sortable: true,
                        format: 'm/d/Y',
                        dataIndex: 'lastChange'
                    }, {
                        menuDisabled: true,
                        sortable: false,
                        xtype: 'actioncolumn',
                         50,
                        items: [{
                            iconCls: 'sell-col',
                            tooltip: 'Sell stock',
                            handler: function(grid, rowIndex, colIndex) {
                                var rec = grid.getStore().getAt(rowIndex);
                                Ext.Msg.alert('Sell', 'Sell ' + rec.get('company'));
                            }
                        }, {
                            getClass: function(v, meta, rec) {
                                if (rec.get('change') < 0) {
                                    return 'alert-col';
                                } else {
                                    return 'buy-col';
                                }
                            },
                            getTip: function(v, meta, rec) {
                                if (rec.get('change') < 0) {
                                    return 'Hold stock';
                                } else {
                                    return 'Buy stock';
                                }
                            },
                            handler: function(grid, rowIndex, colIndex) {
                                var rec = grid.getStore().getAt(rowIndex),
                                    action = (rec.get('change') < 0 ? 'Hold' : 'Buy');
    
                                Ext.Msg.alert(action, action + ' ' + rec.get('company'));
                            }
                        }]
                    }];
    
                    this.callParent();
                }
            });
    
            var ksData = [
                ['3m Co', '71.72', '0.02', '0.03%', '09/01/2015'],
                ['Alcoa Inc', '29.01', '0.42', '1.47%', '09/01/2015'],
                ['Altria Group Inc', '83.81', '0.28', '0.34%', '09/01/2015'],
                ['American Express Company', '52.55', '0.01', '0.02%', '09/01/2015'],
                ['American International Group, Inc.', '64.13', '0.31', '0.49%', '09/01/2015']
            ];
            var ksStore = new Ext.data.ArrayStore({
                data: ksData,
                fields: [{
                    name: 'company'
                }, {
                    name: 'price'
                }, {
                    name: 'change'
                }, {
                    name: 'pctChange',
                }, {
                    name: 'lastChange'
                }]
            });
            var ksGrid = new KitchenSink.view.grid.ArrayGrid({
                autoHeight: true,
                title: 'title',
                renderTo: 'ksgrid',
                store: ksStore
            });
            //-------------------------------------------------------------------------
            //自定义组件2
            var ksColumns = [{
                text: 'Company',
                flex: 1,
                sortable: false,
                dataIndex: 'company'
            }, {
                text: 'Price',
                 75,
                sortable: true,
                renderer: 'usMoney',
                dataIndex: 'price'
            }, {
                text: 'Change',
                 80,
                sortable: true,
                renderer: function(val) {
                    if (val > 0) {
                        return '<span style="color:' + '#73b51e' + ';">' + val + '</span>';
                    } else if (val < 0) {
                        return '<span style="color:' + '#cf4c35' + ';">' + val + '</span>';
                    }
                    return val;
                },
                dataIndex: 'change'
            }, {
                text: '% Change',
                 100,
                sortable: true,
                renderer: function(val) {
                    if (val > 0) {
                        return '<span style="color:' + '#73b51e' + '">' + val + '%</span>';
                    } else if (val < 0) {
                        return '<span style="color:' + '#cf4c35' + ';">' + val + '%</span>';
                    }
                    return val;
                },
                dataIndex: 'pctChange'
            }, {
                xtype: 'datecolumn',
                text: 'Last Updated',
                 115,
                sortable: true,
                format: 'm/d/Y',
                dataIndex: 'lastChange'
            }, {
                menuDisabled: true,
                sortable: false,
                xtype: 'actioncolumn',
                 50,
                items: [{
                    iconCls: 'sell-col',
                    tooltip: 'Sell stock',
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex);
                        Ext.Msg.alert('Sell', 'Sell ' + rec.get('company'));
                    }
                }, {
                    getClass: function(v, meta, rec) {
                        if (rec.get('change') < 0) {
                            return 'alert-col';
                        } else {
                            return 'buy-col';
                        }
                    },
                    getTip: function(v, meta, rec) {
                        if (rec.get('change') < 0) {
                            return 'Hold stock';
                        } else {
                            return 'Buy stock';
                        }
                    },
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex),
                            action = (rec.get('change') < 0 ? 'Hold' : 'Buy');
    
                        Ext.Msg.alert(action, action + ' ' + rec.get('company'));
                    }
                }]
            }];
            Ext.define('Ext.raku.OneGrid', {
                extend: 'Ext.grid.GridPanel',  //Ext.grid.Panel也OK
                autoHeight: true,
                initComponent: function() {
                    this.store = new Ext.data.ArrayStore({
                        data: this.data,
                        fields: this.fields
                    });
                    console.log(this.columns);
                    this.callParent();
                }
            });
    
            var aOneGrid = new Ext.raku.OneGrid({
                data: ksData,
                fields: [{
                    name: 'company'
                }, {
                    name: 'price'
                }, {
                    name: 'change'
                }, {
                    name: 'pctChange',
                }, {
                    name: 'lastChange'
                }],
                columns: ksColumns,
                renderTo: 'onegrid'
            });
            //另一种继承的方式
            //PS  继承自 Ext.grid.GridPanel 和 Ext.grid.Panel 都可以
            Ext.raku.TwoGrid = Ext.extend(Ext.grid.Panel, {
                autoHeight: true,
                initComponent: function() {
                    this.store = new Ext.data.ArrayStore({
                        data: this.data,
                        fields: this.fields
                    });
                    console.log(this.columns);
                    this.callParent();
                }
            });
    
            var aTwoGrid = new Ext.raku.TwoGrid({
                data: ksData,
                fields: [{
                    name: 'company'
                }, {
                    name: 'price'
                }, {
                    name: 'change'
                }, {
                    name: 'pctChange',
                }, {
                    name: 'lastChange'
                }],
                columns: ksColumns,
                renderTo: 'twogrid'
            });
    
        });
    
        </script>
    </body>
    
    </html>
  • 相关阅读:
    信息检索笔记
    北大课程(变态心理学)
    My life
    Excel小技巧(随机点名)
    Flask基础
    CTF
    GDB
    LD_PRELOAD
    AFL-数据变异
    AFL入门
  • 原文地址:https://www.cnblogs.com/cart55free99/p/4526114.html
Copyright © 2011-2022 走看看