sencha touch01

sencha touch ch01
-------------------------------------------------------------
index.html
---------------------
<!DOCTYPE html>
<html>
<head>
    <title>index.html文件示例</title>
    <link rel="stylesheet" href="css/sencha-touch.css"
    type="text/css">
    <script type="text/javascript" src="sencha-touch.js">
    </script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body>123</body>
</html>

app.js
---------------------
Ext.application({
    name: 'MyApp',
    launch: function() {
        alert('Sencha Touch 2框架已被加载');
    }
});

sencha touch ch02
-------------------------------------------------------------
index.html
---------------------
<!DOCTYPE html>
<html>
<head>
    <title>一个简单的示例面板</title>
    <link rel="stylesheet" href="css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="sencha-touch.js"></script>
    <script type="text/javascript" src="app-all.js"></script>
    <style>
    .colorRed{
        color:red;
    }
    .colorBlue{
        color:blue;
    }
    </style>
</head>
<body></body>
</html>

app.js
---------------------
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',
            html: '一个简单的示例面板'
        });
        var subPanel = Ext.create('Ext.Panel', {
            id:'subPanel',
            html: '面板中的子面板'
        });
        Ext.Viewport.add(panel);
        panel.add(subPanel);
        var newPanel=Ext.fly('myPanel');
        newPanel.addCls('colorRed');
        //应用程序中这段代码之后不再引用id为myPanel的元素
        var newPanel=Ext.fly('subPanel');
        newPanel.addCls('colorBlue');
        //应用程序中这段代码之后不再引用id为subPanel的元素
    }
});

sencha touch ch03面板组件中放置图片
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
    <title>在面板组件中放置图片</title>
    <link rel="stylesheet" href="css/sencha-touch.css"
    type="text/css">
    <script type="text/javascript" src="sencha-touch.js">
    </script>
    <script type="text/javascript" src="app-all.js"></script>
    <style>
    .bgColorPink{
        background-color:pink;
    }
    </style>
</head>
<body></body>
</html>

Ext.require('Ext.Img');
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    launch: function() {
        var img=Ext.create('Ext.Img',{
             src: 'images/html51.jpg',
             width:118,
             height:150,
             listeners:{
                 tap:function(){
                     Ext.Msg.alert('您单击了图片');
                 }
             }
        });
        var panel = Ext.create('Ext.Panel', {
            id:'myPanel',
            cls:'bgColorPink',
            items:[img]
        });
        Ext.Viewport.add(panel);
    }
});

sencha touch ch03 Tab面板组件使用示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
    <title>Tab面板组件使用示例</title>
    <link rel="stylesheet" href="css/sencha-touch.css"
    type="text/css">
    <script type="text/javascript" src="sencha-touch.js">
    </script>
    <script type="text/javascript" src="app-all.js"></script>
    <style type="text/css">
    body{
        font-family:'宋体';
    }
    .bgcolorPink{
        background-color:pink;
    }
    </style>
</head>
<body></body>
</html>

Ext.require('Ext.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',
            tabBarPosition: 'bottom',
            items:[{
                title:'主页',
                html:'主页',
                iconCls:'home'
            },
            {
                title:'合同',
                html:'合同',
                iconCls:'user'
            }],
            listeners:{
                activeitemchange:function(item,oldValue,newValue)
                {
                    //执行一些代码
                    return true;//返回true或false
                },
                painted:function(item)
                {
                    item.addCls('bgcolorPink');
                }
            }

        });
        Ext.Viewport.add(tabPanel);
        tabPanel.setActiveItem(1);
    }
});

sencha touch ch03 水平盒布局方式的简单示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
    <title>水平盒布局方式的简单示例</title>
    <link rel="stylesheet" href="css/sencha-touch.css"
    type="text/css">
    <script type="text/javascript" src="sencha-touch.js">
    </script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>

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',
                align: 'stretch'
            },
            items:[
                {
                    flex:1,
                    html:'子组件1',
                    style: 'background-color: #5E99CC;'
                },
                {
                    flex:2,
                    html:'子组件2',
                    style: 'background-color: #759E60;'
                }
            ]
        });
        Ext.Viewport.add(panel);
    }
});

sencha touch ch03 垂直盒布局方式的简单示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
    <title>垂直盒布局方式的简单示例</title>
    <link rel="stylesheet" href="css/sencha-touch.css"
    type="text/css">
    <script type="text/javascript" src="sencha-touch.js">
    </script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>

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: 'vbox',
                align: 'stretch'
            },
            items:[
                {
                    flex:1,
                    html:'子组件1',
                    style: 'background-color: #759E60;'
                },
                {
                    flex:2,
                    html:'子组件2',
                    style: 'background-color: #5E99CC;'
                }
            ]
        });
        Ext.Viewport.add(panel);
    }
});

sencha touch ch03 Fit布局的使用示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
    <title>Fit布局的使用示例</title>
    <link rel="stylesheet" href="css/sencha-touch.css"
    type="text/css">
    <script type="text/javascript" src="sencha-touch.js">
    </script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>

sencha touch ch03 使用Fit布局并在父容器组件中放置多个子组件
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
    <title>使用Fit布局并在父容器组件中放置多个子组件</title>
    <link rel="stylesheet" href="css/sencha-touch.css"
    type="text/css">
    <script type="text/javascript" src="sencha-touch.js">
    </script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>

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', {
            layout:'fit',
            items:[{
                style: 'background-color:pink',
                html: '示例文字1',
            },
            {
                style: 'background-color:pink',
                html: '示例文字2',
            }]
        });
        Ext.Viewport.add(panel);
    }
});

sencha touch ch03 Card布局的简单使用示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
    <title>Card布局的简单使用示例</title>
    <link rel="stylesheet" href="css/sencha-touch.css"
    type="text/css">
    <script type="text/javascript" src="sencha-touch.js">
    </script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>

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',
            items: [p1,p2]
        });
        Ext.Viewport.add(panel);
        panel.setActiveItem(p2);
    }
});

sencha touch ch03 Carousel组件的使用示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
    <title>Carousel组件的使用示例</title>
    <link rel="stylesheet" href="css/sencha-touch.css"
    type="text/css">
    <script type="text/javascript" src="sencha-touch.js">
    </script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>

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',
            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.setActiveItem(1);
    }
});

sencha touch ch03 NavigationView组件的使用示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
    <title>NavigationView组件的使用示例</title>
    <link rel="stylesheet" href="css/sencha-touch.css"
    type="text/css">
    <script type="text/javascript" src="sencha-touch.js">
    </script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>

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);
        panel=Ext.create('Ext.Panel',{
            title: '标题三',
            html:'组件3'
        });
        view.push(panel);
        view.pop();
    }
});

sencha touch ch03 xtype配置选项使用示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
    <title>xtype配置选项使用示例</title>
    <link rel="stylesheet" href="css/sencha-touch.css"
    type="text/css">
    <script type="text/javascript" src="sencha-touch.js">
    </script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>

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 panel = Ext.create('Ext.Panel', {
            defaults:{
                ui: 'dark',
                flex:1,
                xtype:'carousel',
                defaults:{
                    xtype:'panel'
                }
            },
            layout: {
                type : 'vbox',
                align: 'stretch'
            },
            items: [
            {
                id:'carousel1',
                direction: 'horizontal',
                items: [
                {
                    html: '左面板',
                    style: 'background-color:pink'
                },
                {
                    html: '中面板',
                    style: 'background-color:red'
                },
                {
                    html: '右面板',
                    style: 'background-color:yellow'
                }]
            },
            {
                id:'carousel2',
                direction: 'vertical',
                items: [{
                    html: '上面板',
                    style: 'background-color:pink'
                },
                {
                    html: '中面板',
                    style: 'background-color:red'
                },
                {
                    html: '下面板',
                    style: 'background-color:yellow'
                }]
            }]
        });
        Ext.Viewport.add(panel);
        panel.getComponent('carousel1').setActiveItem(1);
    }
});

猜你喜欢