1、类与对象
1.1 定义类的方式
Ext.define("YF.demo.DemoClass",{
config：{
id: 1,
name: 2
},
demoSay: function(){
}
});
1.2 对象实例化
4.0之前用new
var x = Ext.create('YF.demo.DemoClass',{
})
xtype －－》alias
widget
1.3 继承
extend
mixins
2、组件 component
2.1 组件种类
Ext.Panel Ext.button Ext.Window等
2.2 组件创建方式
就是类的实例化
Ext.create('Ext.panel.Panel',{
title: 'demoPanel',
width: 100,
height: 100,
....,
initComponent: function(){
}
});
2.3 几个重要方法
initComponent: function(){
}
实例化后可以 对象.hide() 对象.show()
requires类初始化时加载 uses类初始化后加在 xtype 延时加载
2.4 自定义组件
Ext.define('YF.demo.MyPanel',{
extend: 'Ext.panel.panel',
xtype: 'myPanel',
title: 'demoPanel',
initComponent: function(){
}
});
3、容器与布局 container layout
3.1 什么叫容器？
特殊组件。但是能够包含子组件的组件就叫容器。eg：panel
Ext.container.Container＝＝》子 Ext.container.Viewport（整体布局） 和 Ext.panel.Panel（嵌套布局）
重要属性：layout和items、layoutConfig(布局用到的特殊配置)
3.2 布局
控制组件的摆放的位置。
Ext.layout.ContainerLayout（可以忽略）
每个容器都有个默认的布局大部分是Ext.layout.ContainerLayout
关键词：layout ==> border（边界布局,center不能少）、fit(一个子元素时填满，items只能有一个)
Ext.create('Ext.panel.Panel',{
title: 'demoPanel',
width: 400,
height: 200,
layout: 'border',
items: [
{
region: "north",
xtype: "panel"
}, {
region: "west",
xtype: "panel"
}, {
region: "center",
xtype: "panel"
}
]
})
3.3 Viewport
一个页面只能有一个viewport的实例
4、数据
4.1 model 更多是定义属性、数据格式等
Ext.define("App.model.User", {
extend: "Ext.data.Model",
fields: [
{name: "id",type: "int"},
{name: "userName"},
{name: "roleName"},
{name: "userState"},
{name: "remark"}
]
});
4.2 store
获取的2种方式
var store = Ext.create('Ext.data.Store', {
pageSize: orderPageSize,
proxy: {
type: 'ajax',
url: './yunfu/ta/order/listOrders.do',
headers: { "Accept": "application/json" },
reader: { type: "json", rootProperty : "datas" },
write: { type: "json" },
listeners: {
exception: function (reader, response, error, eOpts) {
YF.getApplication().processServerError(response);
}
}
}
});
var taStateStore = Ext.create('Ext.data.Store', {
fields:['id', 'text' ],
data: [
{id:'', text: 'ALL'},
{id:'1', text: 'APP'},
{id:'2', text: 'REJ'}
]
});
5、事件
待续！
评论0