Ext JS学习-day01-类与对象的定义-组件Panel-form-xtype和延迟加载---显示show---隐藏hide

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('五仁月饼');

 

在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(){
//....也可以自定义组件

    }
});