例子 :将一个grid添加到一个panel中去
panel
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.myPanel',//与controller中ref的selector关联
height: 250,
id: 'panel',
width: 400,
layout: 'fit',
title: 'My Panel',
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});
grid
Ext.define('MyApp.view.mygrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',//与controller中ref的selector关联
requires: [
'Ext.grid.column.Number',
'Ext.grid.column.Date',
'Ext.grid.column.Boolean',
'Ext.grid.View'
],
height: 250,
id: 'grid',
width: 400,
title: 'My Grid Panel',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
]
});
me.callParent(arguments);
}
});
controller
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
views: [
'mygrid',
'MyPanel'
],
refs: [
{
autoCreate: true,//必须自动创建对象,因为程序启动时只创建了主view(myPanel),这是在app.js中定义了的
ref: 'grid',//引用名随意起,但是在生成get方法后首字母强制大写,如:getGrid()
selector: 'myGrid',//必须与alias中widget.后的部分字符相同
xtype: 'myGrid'//必须与alias中widget.后的部分字符相同,autoCreate必须声明xtype
},
{
ref: 'myPanel',//主view
selector: 'myPanel'
}
],
onLaunch: function() {
var panel = this.getMyPanel();//controller根据ref生成的get方法,注意get后的首字母强制大写。
panel.removeAll(true);//删 最好先删再定义grid 如果在按钮事件中,这样重复点击按钮不会出现addcls为null错误,大概是删的时候会清除css样式,如果这个时候已经有grid对象,则样式会丢失
var grid = this.getGrid();//controller根据ref生成的get方法,注意get后的首字母强制大写。
panel.add(grid);//添
panel.doLayout();//刷新
}
});