1.创建一个工程cmd----
sencha -sdk /User/cmd/Desktop/Class/SDK/
ext-5.1.1 generate app MyApp my-app 2.启动内置服务器，浏览html
cmd----sencha app watch
看到地址--localhost:1841 3.编译压缩使其导入其他软件运行时方便--进入工程的根目录下--my-app--
cmd---sencha app build
--多出一个build目录--production--Myapp(进行了压缩)   核心概念
第一节  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('五仁月饼');

 

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
在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:'五仁月饼'    //初始化参数
        });
第二节Components组件
1.什么是组件(Component)
    是对数据和方法的简单封装 实例：
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     
由上可知，都是一种组合关系 ---代码段
创建一个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'
}); panel.hide();//hide the Component 隐藏
panel.show();//show the Component  显示 5.浮动组件
var panel=Ext.create('Ext.panel.Panel',{
    width:200,
    height:100,
    floating:true,//浮动组件     title:'Test',
    html:'Test Panel'
}); 6.创建自定义组件
Ext.define('My.custom.Component',{
    extend:'Ext.Component',
//合理的利用面向对象特性--可以继承父类的组件
    newMethod:function(){
//....也可以自定义组件     }
});
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄