第三章面板与布局

Posted on 2013-04-23 13:19 Joe553 阅读(182) 评论(0) 收藏举报

1.事件监听器及事件处理函数

事件监听处理第一种方法：

var img = Ext.create('Ext.Img', {
    //其他配置选项
    listeners: {
        tap: function () {
            //事件处理函数
        }
    }
});

事件监听处理第二种方法：

var img = Ext.create('Ext.Img', {
    src:'images/Html5&Css3.jpg',//图片路径
    width:118,
    height:150,
    //删除listeners配置选项
});
//面板组件代码略
Ext.Viewport.add(panel);

//添加图片组件tap事件的处理函数
var handleTap=function(){
    Ext.Msg.alert('您点击了图片');
}
//添加图片组件的tap事件的监听器并指定时间处理函数为handleTap
img.addListener('tap',handleTap,this,{
//或img.on('tap',handleTap,this,{
    single:true,//只执行一次
    delay:1000//延迟的毫秒数
});

上图中组件addListener方法使用了4个参数

第一个是需要被监听的事件。

第二个指定了事件的处理函数。

第三个是事件处理函数的作用域，即函数体内的this变量所引用的对象。

第四个是对于事件处理函数添加的一些配置选项。

2.动态加载技术

异步加载

优势：可以跨域。可以直接调试磁盘文件。利于调试，调试信息中有准确的文件名和错误行号。

缺点：必须指定所用的类。

Ext.require方法：指定所需要的类

Ext.require('Ext.Img');//指定单个类
Ext.require('Ext.data.*')//使用通配符指定某个包中的所有类
Ext.require('*');//使用通配符指定所有类
Ext.require('Ext.Img','Ext.data.*');//通过数组进行多重指定

Ext.exclude方法：排除所需要的类

Ext.exclude('Ext.data.*').require('*');//指定使用除了data包中的类之外的所有类
Ext.exclude('Ext.data.TreeStore').require('*');//指定data包中除了TreeStore之外的所有类

同步加载

优势：不需要指定使用哪些类。

缺点：不利于调试。不能跨域调试时必须使用Web服务器。

3.Tab面板组件

Ext.require('Ext.TabPanel');//指定TabPanel类
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    launch: function() {
        var tabPanel = Ext.create('Ext.TabPanel', {
            id:'tabPanel',
            ui:'dark',//容器组件预定义的样式，可选dark或light
            tabBarPosition: 'bottom', //Tab面板标签栏停靠位置可指定bottom或top
            //activeItem:1,//指定显示的面板，默认0
            items:[{
                title:'主页',
                html:'主页',
                iconCls:'home'
            },
            {
                title:'合同',
                html:'合同',
                iconCls:'user'
            }],
            listeners:{
                //三个参数item代表触发事件的面板组件，oldValue代表切换前Tab面板的子容器组件，newValue代表切换后Tab面板的子容器组件
                activeitemchange:function(item,oldValue,newValue)
                {
                    //执行一些代码
                    return true;//返回true或false
                },
                //painted在组件渲染完毕后触发，当需要科举组件生成都元素的位置，尺寸等做一些处理时，可以把处理代码写在painted内
                //item参数代表触发组件的面板
                painted:function(item)
                {
                    item.addCls('bgcolorPink');
                }
            }

        });
        Ext.Viewport.add(tabPanel);
        tabPanel.setActiveItem(1);//切换Tab面板，当执行setActiveItem时会触发Tab面板组件的activeitemchange事件
    }
});

4.Sencha Touch 
2.0中的内置图标

5.Sencha 
Touch中的布局

5.1 盒布局

SenCha 
Touch使用继承了AbstractBoxLayout类的HBoxLayout类和VBoxLayout类来实现水平盒布局和垂直盒布局。

参考代码：

Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    launch: function() {
        var panel = Ext.create('Ext.Panel', {
            id:'myPanel',
            layout: {
                type: 'hbox',//hbox代表水平盒布局，vbox代表垂直盒布局
                align: 'stretch'//垂直对齐方式，stretch代表自动扩展
            },
            items:[
                {
                    flex:1,//表示组件宽度占总宽度的百分比值
                    html:'子组件1',
                    style: 'background-color: #5E99CC;'
                },
                {
                    flex:2,
                    html:'子组件2',
                    style: 'background-color: #759E60;'
                }
            ]
        });
        Ext.Viewport.add(panel);
    }
});

align代表垂直对齐方式，pack代表水平对齐方式

配置选项	选项值
align	center	中央对齐
align	start	顶部对齐
align	end	底部对齐
align	stretch	子组件高度（宽度）自动扩展为容器高度
pack	center	中央对齐
pack	start	向左对齐
pack	end	向右对齐
pack	justify	两端对齐

5.2 Fit布局

Fit布局通过Ext.layout.FitLayout类来实现。当容器只有一个子组件时，通过使用Fit布局使尺寸充满整个父容器组件内部。在使用Fit布局时，父容器应该只存在一个子组件，如果存在多个，将只会显示一个子组件。

5.3 Card布局

Card布局通过Ext.layout.FitLayout的子类Ext.layout.CardLayout来实现，Card布局用来对容器多个组件进行管理，每个组件尺寸都被自动扩展为父容器组件尺寸，但浏览器每次只显示一个子组件，可以使用setActiveItem方法通知浏览器显示哪一个组件。

Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    launch: function() {
        var p1=Ext.create('Ext.Panel', {
            id:'panel1',
            style: 'background-color:pink',
            html: '示例面板1'
        });
        var p2=Ext.create('Ext.Panel', {
            id:'panel2',
            style: 'background-color:pink',
            html: '示例面板2'
        });
        var panel = Ext.create('Ext.Panel', {
            layout:'card',//使用Card布局
            animation:'slide',//切换时的动画效果
            items: [p1,p2]
        });
        Ext.Viewport.add(panel);
        panel.setActiveItem(p2);//显示p2面板，参数可以为组件的Id或子组件在父容器中的序号或一个代表组件的变量
    }
});

animation配置选项代表切换时的动画效果'fade'（淡入淡出）,'slide'（滑动）,'flip'（翻转）,'wipe'（擦除）,'pop'（弹出）,'cude'（滑动）。也可以对一个动画特效进行更多的配置，如：

animation:{type:'slide',direction:'right',duration:1000}

type代表动画类型，direction代表滑动方向，duration代表特效时长

setActiveItem方法并不具有切换时的动画效果如果希望切换组件时有动画效果的话应该使用animateActiveItem方法。如：

Panel.animateActiveItem('切换后的子组件','特效名称或配置对象');

TabPanel面板使用Card布局，所以也可以使用anumation配置选项来改变子容器显示时的特效。TabPanel默认slide特效。

var tabPanel=Ext.create('Ext.TabPanel',{
    //其他配置选项
    layout:{
        animation:'flip'
        //或animation:{type:'slide',direction:'right',duration:1000}
    },
    //其他配置选项
});

5.4 组件内部的停靠

停靠时指可以在容器内部，紧靠组件的上边缘，下边缘，左边缘和右边缘放置一个组件，当被停靠的边缘尺寸扩大时，组件的长度或高度也会自动被扩充为容器边缘的长度或高度。

停靠使用docked配置选项，可以指定值为left，top，right或者bottom

6.Carousel组件

Carousel组件可以理解为一个使用了Card布局的容器组件。通过Ext.carousel.Carousel类创建，类别名为Ext.Carousel.
示例代码：

Ext.require('Ext.Carousel');
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    launch: function() {
        var carousel1 = Ext.create('Ext.Carousel', {
            ui: 'dark',
            flex:1,
            direction: 'horizontal',//排序方向,horizontal为横向排列,vertical为纵向排列
            defaults:{              //子组件通用的默认配置选项
                styleHtmlContent:true
            },
            items: [
            {
                html: '左视图',
                style: 'background-color:pink'
            },
            {
                html: '中视图',
                style: 'background-color:red'
            },
            {
                html: '右视图',
                style: 'background-color:yellow'
            }]
        });
        var carousel2 = Ext.create('Ext.Carousel', {
            ui: 'dark',
            flex:1,
            direction: 'vertical',
            defaults:{
                styleHtmlContent:true
            },
            items: [{
                html: '上视图',
                style: 'background-color:pink'
            },
            {
                html: '中视图',
                style: 'background-color:red'
            },
            {
                html: '下视图',
                style: 'background-color:yellow'
            }]
        });
        var panel = Ext.create('Ext.Panel', {
            layout: {
                type : 'vbox',
                align: 'stretch'
            },
            items: [carousel1, carousel2]
        });
        Ext.Viewport.add(panel);
        //carousel1.next();    显示当前子组件的下一个组件
        //carousel1.prev();    显示当前子组件的下上一个组件
        //carousel1.animateActiveItem(1,'flip') 显示容器中第2个子组件，使用flip动画效果
        carousel1.setActiveItem(1);
    }
});

7.NavigationView组件

NavigationView组件本质上是一个具有Card布局的容器组件，所以每次只显示一个内部子组件。但是它提供了一些附加特性，这使得该组件更加像一个“堆栈”的容器组件，即可以将子组件堆入该组件中，然后按照入栈顺序依次取出位于栈顶的组件。使用Ext.navigation.View类定义NavigationView组件，类的别名为Ext.NavigationView.

Ext.require('Ext.NavigationView')
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    launch: function() {
        var view = Ext.create('Ext.NavigationView', {
            navigationBar: {//配置标题栏
                ui: 'dark',
                docked: 'top'
            },
            //useTitleForBackButtonText:true,//可以将后退按钮修改为位于栈中的当前组件后面的标题文字
            items: [{
                title: '标题一',
                html:'组件1'
            }]
        });
        panel=Ext.create('Ext.Panel',{
            title: '标题二',
            html:'组件2'
        });
        Ext.Viewport.add(view);
        view.push(panel);//使用push方法将panel堆如栈顶
        panel=Ext.create('Ext.Panel',{
            title: '标题三',
            html:'组件3'
        });
        view.push(panel);//可以随时堆入新的组件
        view.pop();//将栈顶的组件弹出栈外
        //view.reset();//将所有组件弹出栈外
    }
});

8. 
xtype选项配置

在SenCha 
Touch中，每一个组件都有一个xtype配置选项，在创建组件时可以通过指定xtype选项值的方法创建组件,使用xtype配置选项的最大好处在于可以使用组件的延迟渲染特性。

8.1 getComponent方法

用于获取容器中的子组件，但是它只获取该容器的直接子组件而不获取下层子组件。如：

container.getComponent(comp);

container代表引用容器的变量名，comp可以为组件的序号或id。

8.2 getXTypes方法和isXType方法

getXTypes方法用于获取该组件的xtype值。如

console.log(panel.getXTypes());//将Panel的xtype值输入到控制台

isXType方法用于判断该组件的xtype值与某个组件的xtype值是否相等，返回布尔值。如

console.log(p.isXType('panel'))//p组件是不是'Panel'

刷新页面返回顶部

Joe553的博客

公告