Ext 常用组件解析

Ext 常用组件解析

Panel

定义&常用属性

    //1.使用initComponent
    Ext.define('MySecurity.view.resource.ResourcePanel', {
        extend: 'Ext.panel.Panel',
        requires:[
            'MySecurity.view.resource.ResourceGrid'
        ],
        xtype: 'resourcePanel',
        //是否显示边框
        border:true,
        padding:'0 5',
        //折叠模式
        collapseMode:'header',
        //是否可折叠
        collapsible: true,
        //点击header可折叠
        titleCollapse:true,
        //折叠的位置
        collapseDirection : 'top',
        //展开时header的位置
        headerPosition:'left',
        //是否隐藏header
        hideHeaders: true,
        
        initComponent : function() {
            this.grid = Ext.create('MySecurity.view.resource.ResourceGrid');
            this.items = [this.grid];
            this.callParent(arguments);
        }
    });

    //2.使用items
    Ext.define('MySecurity.view.resource.ResourcePanel', {
        extend: 'Ext.panel.Panel',
        requires:[
            'MySecurity.view.resource.ResourceGrid'
        ],
        xtype: 'resourcePanel',
        border:true,
        padding:'0 5',
        items:[{
            xtype:'resourceGrid'
        }]
    });

为panel添加click事件

    listeners: 
    {
        'render': function(panel) {
            panel.ariaEl.on('click', function(e,target) {
                //do something
            },panel);
        }
    }

Grid

定义&常用属性

    Ext.define('MySecurity.view.role.RoleGrid', {
        extend: 'Ext.grid.Panel',
        requires:[
            'MySecurity.store.role.RoleStore',
            'MySecurity.view.role.AddRoleWindow',
            'MySecurity.view.role.AddResourceToRoleWindow'
        ],
        xtype: 'roleGrid',
        //标题
        title:'角色',
        //gridview设置
        viewConfig:{
            //是否允许选中表格的数据(供拷贝)
            enableTextSelection:true
        },
        //添加插件
        plugins: [{
            //折叠表格插件
            ptype: 'rowexpander',
            rowBodyTpl : app.templates.roleTpl()
        }],
        initComponent : function() {
            var me = this;
            //定义列
            me.columns = [{ 
                //actioncolumn 用来返回一个带图标的按钮通过getClass方法可以定制显示
                xtype:'actioncolumn',text:'修改',align:'center',width:50,
                items: [{
                    iconCls: 'x-fa fa-pencil-square-o',  handler: 'editRoleClick',scope:me
                },{ //根据数据动态改变图标
                    getClass: function(v, metadata, record) {
                        if(record.get('status')=='P' && record.get('verified') )    
                            return 'icon-hide'
                        else
                            return 'icon-other'
                    },
                    scope: me,
                    handler: me.deletePerform
                }]
            },
            {   
                //表头
                text: '日期',
                //自动换行
                cellWrap: true,
                xtype: 'datecolumn' 
                dataIndex: 'name' ,
                //拉伸比例
                flex:1,
                //格式化日期显示
                format:'M j, Y',
                //是否显示表头的菜单栏
                menuDisabled: true,
                //是否可以拉表头的位置
                draggable: false,
                //是否可以拉伸列框
                resizable: false,
                //是否可以点击表头排序
                sortable: false
            },
            { 
                text: '描述', dataIndex: 'description',flex:1 ,
                //显示内容的渲染器
                renderer: function(value, meta, record){
                    if (!value) return '';
                    var img = '<img src="./images/right.png">';
                    return img;
                }
            }];

            //添加分页组件
            this.dockedItems = [{ 
                xtype: 'pagingtoolbar',
                store: this.store,
                dock: 'bottom',
                displayInfo: true
            }];

            //添加 top bur 
            this.tbar = [{ 
                type: 'button', text: '添加角色' , 
                iconCls:'x-fa fa-plus-circle',
                handler:me.addRoleClick,scope:me
            },{ 
                type: 'button', text: '修改角色资源' , 
                iconCls:'x-fa fa-plus-circle',
                handler:me.updateResourcesToRoleClick,scope:me
            }];

            this.store = Ext.create('MySecurity.store.role.RoleStore');

            this.callParent(arguments);
        }
        //省略其他方法
    });

分组：

1.开启分组功能(改变分组header显示)

    //开启分组功能
    this.features = [{
        //grouping 为 Ext.enums.Feature 的一种
        ftype: 'grouping',
        groupHeaderTpl: '{name}',
        hideGroupedHeader: true ,
        enableGroupingMenu: false //是否开启改变分组菜单
    }];

    //改变分组header显示:
    this.features = [{
        ftype: 'grouping',
        groupHeaderTpl: Ext.create('Ext.XTemplate',
            '<div>{children:this.formatName}</div>',
            {
                formatName: function(children) {
                    if(!children.length) return '';
                    var firstchild = children[0];
                    return firstchild.data.hierachyName;
                }
            }
        )
    }];

2.store设定分组字段

    groupField: '分组字段'

编辑:

1.设置编辑的插件

    this.plugins = [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ];

2.设置editor

    {
        text: 'number',
        dataIndex: 'number'
        name:'baseline',
        editor: {
            xtype: 'numberfield',
            allowBlank:false,
            maxValue:100,
            minValue:0
        }
    }

3.重新设置editor

    使用beforecellclick事件，使用setEditor() 重新设置editor
    this.on('beforecellclick', this.onBeforeCellclick, this);

    onBeforeCellclick: function(self, td, cellIndex, record, tr) {  
        var baseline = this.down('[name ="baseline"]')
        var isAllowDecimals = (record.get('kind') == 1);
        baseline.setEditor({
            xtype: 'numberfield',
            allowBlank:false,
            allowDecimals : isAllowDecimals,
            allowExponential:isAllowDecimals
        });
        
    }

4.编辑事件

    this.on('edit', this.onEdit, this); 

    onEdit: function(editor, context) {

    }

行号/rownumberer:

    {
        xtype: 'rownumberer',
        text: '#',
        renderer: function(value, meta, record, rowIndex ){
            return '<div class="my-row-number">' + rowIndex + '</div>';
        }
    }

选择记录：

1.selModel

    this.selctionModel = Ext.create('Ext.selection.CheckboxModel',{
        mode : "SINGLE"     
    })
    this.selModel = this.selctionModel;

    获取选中的record 
        this.selctionModel.getSelection();

2.checkcolumn

    {
        xtype : 'checkcolumn',
        dataIndex : 'selectedForName',
        listeners:{
            checkchange:'onCheckChange',
            beforecheckchange:'beforeCheckedChange'
        }
    }

3.选中第一条record

    var selectionModel = this.getSelectionModel();

    if (this.store.getCount()) {
        selectionModel.selectRange(0, 0);    
    };

改变行高度:

    .x-grid-row{
        line-height: 5px; 
    }

Ext.tree.Panel

定义&属性

    this.tree = Ext.create('Ext.tree.Panel', {
        flex: 1,
        store: Ext.create('MySecurity.store.MyTreeStore'),
        //隐藏根节点
        rootVisible: false,
        columns: [{
            //树节点
            xtype: 'treecolumn',
            flex: 1,
            menuDisabled: true,
            cellWrap:true,
            draggable: false,
            resizable: false,
            sortable: false,
            minWidth: 200,
            text: 'name',
            dataIndex: 'name',
            renderer: function(value, meta, record){
                //if (record.get('leaf')) meta.tdCls = 'hide-column';
                return value;
            }
        }, {
            flex: 1,
            text:'model',
            dataIndex: 'model'
        }, {
            minWidth: 120,
            text:'number',
            dataIndex: 'number'
        }]
    });
    //数据加载完成的操作
    this.tree.store.on('load', this.onTreeStoreLoad, this);

Store & 数据实例

    //继承Ext.data.TreeStore
    Ext.define('MySecurity.store.MyTreeStore', {
        extend: 'Ext.data.TreeStore',
        model: 'MySecurity.model.tree.MyTreeModel',
        proxy: {
            type: 'ajax',
            url: '../controller/getTree'
        },
        autoLoad: true
    });
    
    //继承TreeModel
    Ext.define('MySecurity.model.tree.MyTreeModel', {
        extend: 'Ext.data.TreeModel',
        fields: [{
            name: 'name',
            type: 'string'
        }, {
            name: 'model',
            type: 'string'
        }, {
            name: 'bumber',
            type: 'string'
        }]
    }); 


    //data
    {
        "text": "1",
        "children": [{
            "name": "tree1", 
            "children": [{
                "name": "node", 
                "number": 8, 
                "children": [{
                    "model": "model1", 
                    "number": "4", 
                    "leaf": true
                }, 
                {
                    "model": "model2", 
                    "number": "4", 
                    "leaf": true
                }]
            }]
        }, 
        {
            "name": "tree2", 
            "children": [{
                "name": "node", 
                "number": 8, 
                "children": [{
                        "model": "model13", 
                        "number": "4", 
                        "leaf": true
                    }, 
                    {
                        "model": "model133434", 
                        "number": "4", 
                        "leaf": true
                }]
            }]
        }]
    }

Ext.window.Window

    Ext.define('MySecurity.view.RoleWindow', {
        extend: 'Ext.window.Window',
        width: 400,
        height: 160,
        //关闭时隐藏
        closeAction: 'hide',
        //置顶窗口，不能编辑其他组件
        modal: true,
        layout: 'fit',
        //标题
        title:'RoleWindow',
        initComponent : function() {
            this.items =[{html:'test'}];
            this.buttons = [{
                xtype: 'button',
                text: 'Upload',
                cls: 'white-btn',
                handler: this.onUploadBtnClick,
                iconCls: 'btn-iconfont iconfont-upload',
                scope: this
            }];
            this.callParent(arguments);
        }
    });

    var myWindow = Ext.create('MySecurity.view.RoleWindow');
    myWindow.show()
    myWindow.close();

Ext.window.Toast(消息提示)

    Ext.toast(message, title, align, iconCls);

Ext.LoadMask(loading遮罩)

    var myPanel = new Ext.panel.Panel({
        renderTo : document.body,
        height   : 100,
        width    : 200,
        title    : 'Foo'
    });

    var myMask = new Ext.LoadMask({
        msg    : 'Please wait...',
        target : myPanel
    });

    myMask.show();
    myMask.hide();

转载于:https://www.cnblogs.com/final-elysion/p/6110510.html