ExtJS-2-布局与容器--数据包--关联--事件监听

1.布局与容器  Layouts and Containers
实例:

Ext.create('Ext.panel.panel',{
    renderTo:Ext.getBody(),
    400,
    height:200,
    title:'Containers Panel',
    layout:'column',  //水平布局,列每个占百分之50
    items:[
        {
            xtype:'panel',
            title:'Child Panel 1',
            height:100,
            columnWidth:0.5
    },
    {
        xtype:'panel',
        title:'Child Panel 1',
        height:100,
        columnWidth:0.5
    }
    ]
})；

 

2.数据包Data Package
--models 模型   ---stores 仓储   --- associations 关联关系   validations 验证

3.Models 模型

Ext.define('MyApp.model.Base',{
    extend:'Ext.data.Model',
    fields:[{
        name:'id',
        type:'int'
    }],
    schema:{//定义配置，一个大的集合，做通用配置
        namespace:'MyApp.model',
        proxy:{   //通过代理的方式处理
            type:'ajax',
            url:'{entityName}.json',  //获取地址
            reader:{    //读取
                type:'json',
                rootProperty:'{entityName:lowercase}'
            }
        }
    }
});

4.Stores 仓储

//定义一个store,绑定在一个model上;读取这个模型的数据
var store = new Ext.data.Store({
    model:'MyApp.model.User'
}); 
//请求地址获取数据，封装一个user对象返回
store.load({
    callback:function(){
        var first_name =this.first().get('name');
        console.log(first_name);
    }
});
//内联方式直接访问
Inline data
//把data中的数据放到User对象中来，此时store中有两个id 对象
new Ext.data.Store({
    model:'MyApp.model.User',
    data:[{
        id:1,
        name:"Philip J. Fry"
    },{
        id:2,
        name:"Hubert Farnsworth"
    }]
});
//store的优先排序筛选功能
Store and Grouping
new Ext.data.Store({
    model:'MyApp.model.User',
    sorters:['name','id'],
    filters:{
        property:'name',
        value:'Philip J. Fry'
    }
});

5.Associations关联关系
---将两个不同的model关联起来---referce:'User',关键字reference

User 模型----Ext.define('MyApp.model.User',{
    extend:'MyApp.model.Base',
    fileds:[{
        name:'name',
        type:string''
    }]
});
Post文章模型----Ext.define('MyApp.model.Post',{
    extend:'MyApp.model.Base',
    fileds:[{
        name:'userId',
        reference:'User',//关联user
    },{
        name:'title',
        type:'string'
    }]
});

6.validations 验证
 

配置需要验证的信息---Ext.define('MyApp.model.User',{
    extends:'Ext.data.Model',
    fields:...,
    validators:{
        name:[
            'presence',
            {type:'length',min:7},
            {type:'exclusion',list:['Bender']}
        ]
    }
});
访问获取错误信息
var bewUser=new MyApp,model.User({
    id:10,
    name:'Bender'
});
console.log('Is User valid?',newUser.isValid());//访问是否成功验证
var error = newUser.getValidation(),
    error = errors.get('name');
    console.log("Error is:"+error);

7.Events事件--- 监听事件

Ext.create('Ext.Button',{
    text:'Click Me',
    renderTo:Ext.getBody(),
    listeners:{
        click:function(){    //点击事件
            Ext.Msg.alert('I was clicked!');
        }
    }
});
--其他事件的演示
Ext.create('Ext.Button',{
    renderTo:Ext.getBody(),
    text:'My Button',
    listeners:{
        mouseover:function(){
            this.hide();
        },
        hide:function(){
            Ext.defer(function(){
                this.show();
            },1000,this);
        }
    }
});

8.稍后添加监听事件--没有添加listener--之后用button.on处理

var buttoon=Ext.create('Ext.Button',{
    renderTo：Ext.getBody(),
    text:'My Button'
});
Button.on('click',function(){
    Ext.Msg.alert('Event listener attached by .on');
});
---删除事件的监听----button.un
 var doSomething=function(){
     Ext.Msg.alert('listener called');
 };
 var button=Ext.create('Ext.Button',{
     renderTo:Ext.getBody(),
     text:'My Button',
     listeners:{
         click:doSomething,
     }
 });
 Ext.defer(function(){
     button.un('click',doSomething);
 },3000);
 ---监听范围选项--scope--关键字
 var panel=Ext.create('Ext.Panel',{
     html:'Panel HTML'
 });
 var button=Ext.create('Ext.Button',{
     renderTo:Ext.getBody(),
     text:'Click Me'
 });
 button.on({
     click:{
         scope:panel,   //指定了范围，将提示信息显示在panel面板中
         fn:function(){
             Ext.Msg.alert(this.getXtype());
         }
     }
 });
 ---只监听事件一次---single:true;
 var button = Ext.create('Ext.Button',{
     renderTo:Ext.getBody(),
     text:'Click Me',
     listeners:{
         click:{
             single:true,
             fu:function(){
                 Ext.Msg.alert('I will say this only once');
             }
         }
     }
 });

---缓冲配置buffer--在这个时间段内，不管点击多少次，事件只执行一次,预防重复提交
var button = Ext.create('Ext.Button',{
    renderTo:Ext.getBody(),
    text:'Click Me',
    listeners:{
        click:{
            buffer:2000,
            fm:function(){
                Ext.Msg.alert('I say this only once every 2 seconds');
            }
        }
    }
});
----发送自定义事件
var button = Ext.create('Ext.Button',{
    renderTo:Ext.getBody(),
    text:"Just wait 2 seconds",
    listeners:{
        myEvent:function(button,points){
            Ext.Msg.alert('myEvent fired! You score'+points+'points');
        }
    }
});
Ext.defer(function(){
    var number=Math.ceil(Math.random()*100);
    button.fireEvent('myEvent',button,number);  //名字指向定义的名字
}，2000);
---监听DOM事件--动元素
var container=Ext.create('Ext.Contatiner',{
    renderTo:Ext.getBody(),
    html:'Click Me!',
    listeners:{
        click
    }
});
container.getEl().on('click',function(){
    this.fireEvent('click',container);
},container);