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();
上一篇:canvas-3linearGradient.html


下一篇:JAVA结对编程--阶段总结