ExtJs学习笔记

/*extjs版本4.1.1*/

一、布局

1.基本布局

　　　　var viewport=new Ext.Viewport({
            layout:'border',
            items:[{
                region:'north',
                height:40,
                html:'<h1>菜单</h1>'
            },{
                region:'west',
                width:100,
                html:'<h1>菜单</h1>'
            },{
                region:'center',
                html:'主要内容'
            }]
        });

2.布局类型：

①border  分为东、西、南、北、中五个区域 子组件通过设置region属性来固定位置

②FitLayout 只能有一个子组件 如果子组件是数据表格 大小随着页面大小变化 

　注：1)item放置多个组件 只会显示第一个

　　   2)此布局下item中千万不要使用 autoHeight:true 参数 否则此布局会失效

③Accordion 伸缩菜单布局

View Code

var viewport=new Ext.Viewport({
            layout:'border',
            items:[
                {
                    region:'west',
                    width:200,
                    layout:'accordion',
                    layoutConfig:{
                        titleCollapse:true,  //单击标题折叠子面板
                        animate:true,  //展开动画效果
                        activeOnTop:false  
                    },
                    items:[{
                        title:'我的好友',
                        html:'这是我的好友'
                    },{
                        title:'大学同学',
                        html:'这是我的大学同学'
                    },{
                        title:'高中同学',
                        html:'这是我的高中同学'
                    }
                    ]
                },
                {
                    region:'center',
                    split:true,
                    border:true
                }
            ]
        });

 ④CardLayout 向导布局

View Code

var panel=new Ext.Panel(
        {
            title:'CardLayout',
            regeion:'west',
            width:400,
            height:400,
            frame:true,
            applyTo:'panel',
            autoScroll:true,
            collapsible:true,
            defaults:{bodyStyle:'background-color:#FFFFFF;padding:15px'},
            layout:'card',
            activeItem:0,
            items:[
            {title:'one',html:'123',id:'p1'},
            {title:'Two',html:'234',id:'p2'},
            {title:'Three',html:'255',id:'p3'}
            ],
            buttons:[
            {text:'上一页',handler:ChangePage},
            {text:'下一页',handler:ChangePage}
            ]
        }
        )
        function ChangePage(btn)
        {
            var index=Number (panel.layout.activeItem.id.substring(1));
            if (btn.text=='上一页')
            {
                index--;
                if (index<1) index=1;
            }    
            else
            {
                index++;
                if (index>3) index=3;
            }
            panel.layout.setActiveItem('p'+index );
        }

⑤FormLayout 表单布局

View Code

var viewport=new Ext.Viewport({
            layout:'fit',
            items:[{
                xtype:'form',
                title:'信息',
                labelAlign:'right',
                labelWidth:50,
                frame:true,
                defaultType:'textfield',
                items:[{
                    fieldLabel:'名称',
                    name:'name',
                    anchor:'90%'
                },{
                    fieldLabel:'生日',
                    name:'birthday',
                    xtype:'datefield',
                    anchor:'90%'
                },{
                    fieldLabel:'备注',
                    name:'desc',
                    xtype:'textarea',
                    anchor:'90% -100'
                }]
            }]
        });

⑦

⑧

⑨

⑩

 

二、常用属性

1.折叠 collapsible:true,需同时设置title

2.treePanel中增加属性useArrows:true 可设置非叶子节点样式为箭头

2.可拖动改变大小 split:true  可以设置拖动范围minSize和maxSize

3.创建对象的方法：

　① new 如：var win = new Ext.window.Window({....});

   ② create 如：var win = Ext.create('Ext.window.Window',{.....});

4.自定义对象(继承)

    ① 常规定义

View Code

Ext.define('myWin',{  //自定义一个对象 继承自Ext.window.Window
      extend:'Ext.window.Window',
      width:400,
      height:300,
      title:'标题',
      initCompoent: function (config) {
           this.callParent(arguments); // calls My.app.Panel's constructor
      }
 });
 var win=Ext.create('myWin',{//..});

    ② 自定义对象统一放置到某个文件夹下，并在调用时引入(避免在首页大量引入不必要的自定义js文件)

View Code

1.新建文件夹ux，并新建文件myWin.js(建议文件名和自定义对象名一致)
Ext.define('ux.myWin',{
    extend:'Ext.window.Window',
    width:400,
    height:300,
    config:{
         price: 500    //通过config 系统会自动生成setPrice()和getPrice()方法 详细参考api之Ext.Class.config
    },
    title:'自定义对象的标题',
    initCompoent: function (config) {
         this.callParent(arguments); // calls My.app.Panel's constructor
    }
});
2.在引用自定义对象的文件中，在Ext.onReady之前预先定义加载自定义对象文件路径
Ext.Loader.setConfig({
    enabled:true,
    paths:{
        myApp:'ux'
    }
});
3.引用
var win=Ext.create('ux.myWin',{
    requires:['ux.myWin']
});   

 5.类混合

View Code

Ext.define('eat',{    
        caneat:function(){
            alert("eat");
        }
    });
    Ext.define('jump',{
        canjump:function(){
            alert("jump");
        }
    });
    Ext.define('user',{
        mixins: {    //混合 详情参考API之Ext.Class.mixins
             eat: 'eat',
             jump:'jump'    //混合了上两个类 具有他们的方法
         }
    });
    var u=Ext.create('user',{});
    u.caneat();
    u.canjump();

 6.创建模型类Model

//方法一  普通方法创建
Ext.define("person1",{
    extend:"Ext.data.Model",
    fields:[  //这里的fields只有当类继承自Ext.data.Model后才会生效
        {name:'name',type:'auto'},  
        {name:'age',type:'int'},
        {name:'email',type:'auto'}
    ]
});

//方法二 通过注册类创建Model
Ext.regModel("person2",{
    fields:[  //这里的fields只有当类继承自Ext.data.Model后才会生效
        {name:'name',type:'auto'},  
        {name:'age',type:'int'},
        {name:'email',type:'auto'}
    ]
});