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();