使用 getter和setter
使用config包裹起来
Ext.define('My.sample.Person', {
config: {
name: 'Mr. Unknown',
age: 0,
gender: 'Male'
},
constructor: function(config) {
this.initConfig(config);
return this;
}
// ...
})
//
var jacky = new My.sample.Person({
name: "Jacky",
age: 35
});
alert(jacky.getAge()); // alerts 35
alert(jacky.getGender()); // alerts "Male"
jacky.setName("Mr. Nguyen");
alert(jacky.getName()); // alerts "Mr. Nguyen"
xtype He alias
xtype
xtype为类定义了一个短名称，同时提供了一个延迟实例化的方式
alias
类名的短别名列表。 别名由命名空间和由句点连接的名称组成，如
namespace - 命名空间描述了这是什么类型的别名，并且必须全部小写。
name - 允许通过别名进行延迟实例化的别名。 名称不应包含任何句点。
以下命名空间
feature - Ext.grid.Panel features
plugin - Plugins
store - Ext.data.Store
widget - Components
controller - Controller
模板方法
事件
- 创建的时候
- 点击的时候
- 销毁的时候
自定义事件
事件的绑定(on)(addLlistener)和解除绑定(un)(removeListener)
var destroy = myButton.on('click',onMyButtobClick,myButton){
destroyable: true
}
button1 为button2 绑定事件
myButton.addManageListener(Mybutton,'click',onMyButtonClick,myButton)
多事件的处理
全部放在listeners即可
当使用on时如何实现多事件绑定？
myButton.on({
scope: 'mypanel',
click: onClick,
mouseover: onMouseover
})
事件的拦截
Ext.util.Observable.capture(myButton,function(eventName){
// 拦截到按钮所有事件
return true/false
// 对指定事件做指定处理
if(eventName === 'mouseover') {
return true
}
})
释放某些元素的拦截事件
listeners: {
click: function() {
Ext.util.Observer.releaseCapture(mybutton)
}
}
事件的传播
var panel = Ext.create('Ext.panel.Panel',{
300,
height: 300,
renderTo: Ext.getBody()
})
var panel = Ext.create('Ext.panel.Panel',{
300,
height: 300,
renderTo: Ext.getBody()
})
// panel不主动监听点击事件，通过“关注”到button的点击事件触发，事件的传播
panel.relayEvents(mybuttons,['click'])
panel.on('click',function() {
alert('buttonClick')
})
如何自定义事件？
listeners: {
click: function() {
// 传递的第二个参数可以被接收到
this.fireEvent('myEvent', 'my')
},
myEvent: function(name) {
console.log("我被执行了！！！" + name)
}
}
Ext.define('Person', {
mixins: {
observable: 'Ext.util.Obserbable'
}
})
var person = Ext.create('Person', {
listeners: {
myEvent: {
console.log("我被执行了！！！")
}
}
})
布局
-
绝对布局(absolute)
距离左上角的点x和y的距离（也就是元素的左上角的x和
y坐标）
-
可折叠布局 (accordion)
items: [ { xtype: 'panel', layout: 'accordion', items: [ { title: 'haha',text: "haha", html:'haha'}, { title: 'hwhw',text: "hwhw", html:'hwhw'} ] } -
边界布局 （border）
layout: 'border', defaults: { border: false, // header: false // 可拖动的分割线 split: true }, items: [ {xtype: 'panel',title: 'north',region: 'north',height: 100,html: '我是上间'}, {xtype: 'panel',title: 'center',region: 'center',layout: 'fit',html: 'haha'}, {xtype: 'panel',title: 'west',collapsible: true,region: 'west', 140,html: '我是左间'}, ] -
卡片布局 (card)
始终只有一个页面处于激活状态
setActiveItem(card) 通过组件名称 setActiveItem(card-2) 通过 itemId来激活 setActiveItem(2) 通过索引激活getActiveItem()获取当前激活页面如何通过下一页和上一页实现翻页
- 获取当前布局对象
- 设置当前激活的页面为index所指
- 实现导航按钮的禁用和开启
this.getLayout()返回当前与此Container关联的Ext.layout.container.Container实例
id和getCmp('id')或者reference和this.lookupReference('pre')来实现查找元素
//实现禁用
me.lookupReference('pre').setDisabled(me.active === 0)
me.lookupReference('next').setDisabled(me.active === (me.items.length - 1))
官方实例
var navigate = function(panel,direction) {
var layout = panel.getLayout()
// 获得当前layout，layout 上有方法可以切换当前页
layout[direction]()
// layout.getPrev() 返回值是上一个card组件
// 这里的作用就是判断是否还有上一个如果有就不禁止，当没有后就设置按钮进制使用
Ext.getCmp('prev-a').setDisabled(!layout.getPrev())
Ext.getCmp('next-a').setDisabled(!layout.getNext())
}
Ext.define('extTest.view.test.card', {
extend: 'Ext.panel.Panel',
xtype: 'cCard',
layout: 'card',
400,
height: 400,
items: [
{title: 'one',html: 'one page'},
{title: 'two',html: 'two page'},
{title: 'three',html: 'three page'}
],
bbar: [
{xtype: 'button',text: 'prev',id: 'prev-a',handler: function(btn) {navigate(btn.up('panel'),'prev')}},
'->',
{xtype: 'button', text: 'next', id: 'next-a',handler: function(btn) {navigate(btn.up('panel'),'next')}}
]
})
列式布局
column
注意columnWidth值是1以内的数字，代表占比
vbox和hbox
锚点布局
form布局
Ext.Msg.confirm
Ext.Msg.confirm(title,content,确定后的执行内容(可以是函数)，this)
treepanel实现树
xxx function() {
var me = this
// getViewModel先获取到ViewModel对象然后从中获取自己需要的值
var menu = this.getViewModel..get('xxx')
}