1.创建一个工程cmd----
sencha -sdk /User/cmd/Desktop/Class/SDK/
ext-5.1.1 generate app MyApp my-app
sencha -sdk /User/cmd/Desktop/Class/SDK/
ext-5.1.1 generate app MyApp my-app
2.启动内置服务器,浏览html
cmd----sencha app watch
看到地址--localhost:1841
cmd----sencha app watch
看到地址--localhost:1841
3.编译压缩使其导入其他软件运行时方便--进入工程的根目录下--my-app--
cmd---sencha app build
--多出一个build目录--production--Myapp(进行了压缩)
cmd---sencha app build
--多出一个build目录--production--Myapp(进行了压缩)
核心概念
第一节 Class System 类体系
Ext JS有一套自己完备的类体系来实现面向对象的设计思路;
2.什么是类? Class 类 Object 对象
对象是对客观事物的抽象 ,类是对对象的抽象
对象是由类创建出来真实存在的个体
例子:
java:
第一节 Class System 类体系
Ext JS有一套自己完备的类体系来实现面向对象的设计思路;
2.什么是类? Class 类 Object 对象
对象是对客观事物的抽象 ,类是对对象的抽象
对象是由类创建出来真实存在的个体
例子:
java:
Class MoonCake{ String name; public MoonCake(String name){ this.name=name; } public void hello(){ System.out.println("hello"); } } MoonCake wuRenYueBing=new MoonCake("五仁月饼");
用js表示类
function MoonCake(name){ this.name=name; this.hello=function(){ console.log("Hello"); }; } var wuRenYueBing=new MoonCake('五仁月饼');
在ExtJS 中类的声明---Ext.define
Ext.define('Example.model.MoonCake',{ //package的全路径有自己的命名空间 config:{ //属性 name:'' }, hello:function(){ //方法 console.log('Hello'); } });
3.类与对象
4.Ext JS的类声明方式
---- Ext JS的类声明方式
Ext.define();
5.Ext JS的类实例化方式
----- Ext JS的类实例化方式--用Ext.create();
var wuRenYueBing=Ext.create('Example.model.MoonCake',{
name:'五仁月饼' //初始化参数
});
----- Ext JS的类实例化方式--用Ext.create();
var wuRenYueBing=Ext.create('Example.model.MoonCake',{
name:'五仁月饼' //初始化参数
});
第二节Components组件
1.什么是组件(Component)
是对数据和方法的简单封装
实例:
bootstrap中对面板的定义
bootstrap中对面板的定义
<div class"panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">panel title</h3> </div> <div class="panel-body"> Panel content </div> </div>
2.组件体系
Ext.container.Viewport----主入口
Ext.tab.Panel --面板 Ext.form.Panel---表单
Ext .panel.Panel---Ext.panel.Panel Ext.form.field.Text---Ext.button.Button
由上可知,都是一种组合关系
Ext.container.Viewport----主入口
Ext.tab.Panel --面板 Ext.form.Panel---表单
Ext .panel.Panel---Ext.panel.Panel Ext.form.field.Text---Ext.button.Button
由上可知,都是一种组合关系
---代码段
创建一个Panel--
创建一个Panel--
var childPanel1=Ext.create('Ext.panel.Panel',{
title:'Child Panel 1', //名称
html:'A Panel' //显示内容
});
--创建另一个Panel
var childPanel2=Ext.create('Ext.panel.Panel',{
title:'Child Panel 2',
html:'Another Panel'
});
//创建一个入口Viewport,将创建的两个面板加进来
Ext.create('Ext.container.Viewport',{
items:[ childPanel1,childPanel2 ]
});
3.xtype和延迟加载
Ext.create('Ext.tab.Panel',{
renderTo:Ext.getBody(),
height:100,
width:200,
items:[
{
xtype:'panel', //不用单独去创建panel,
title:'Tab One',
html:'The first tab',
listeners:{ //设置一个监听
render:function(){ //点击弹出提示框
Ext.MessageBox.alert('Rendered One','Tab One was rendered.');
}
}
},
{
title:'tab Two',
html:'The second tab',
listeners:{
render:function(){
Ext.MessageBox.alert('Rendered One','Tab Two was rendered.');
}
}
}
]
});
---延迟加载好处--如果有好多表,都初始化加载就会浪费资源。
4.显示与隐藏
var panel=Ext.create('Ext.panel.Panel',{
renderTo:Ext.getBody(),
title:'Test',
html:'Test Panel'
});
4.显示与隐藏
var panel=Ext.create('Ext.panel.Panel',{
renderTo:Ext.getBody(),
title:'Test',
html:'Test Panel'
});
panel.hide();//hide the Component 隐藏
panel.show();//show the Component 显示
panel.show();//show the Component 显示
5.浮动组件
var panel=Ext.create('Ext.panel.Panel',{
width:200,
height:100,
floating:true,//浮动组件
var panel=Ext.create('Ext.panel.Panel',{
width:200,
height:100,
floating:true,//浮动组件
title:'Test',
html:'Test Panel'
});
html:'Test Panel'
});
6.创建自定义组件
Ext.define('My.custom.Component',{
extend:'Ext.Component',
//合理的利用面向对象特性--可以继承父类的组件
newMethod:function(){
//....也可以自定义组件
Ext.define('My.custom.Component',{
extend:'Ext.Component',
//合理的利用面向对象特性--可以继承父类的组件
newMethod:function(){
//....也可以自定义组件
}
});
});