sencha表单入门例子

来自于《sencha touch 权威指南》

-------------------------------

一、网站结构

二、index.html代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>sencha touch</title>
<link rel="stylesheet" type="text/css" href="css/sencha-touch.css" />
<script type="text/javascript" src="sencha-touch-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
<style type="text/css">
.bgpink{background-color: #ccc;}
.smallfont{font-size: small;}
.dis {color: red;background-color: yellow;}
</style>
</head>
<body>

</body>
</html>

三、app.js代码

Ext.require(['Ext.form.Panel','Ext.form.FieldSet','Ext.field.Text']);
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    launch: function(){
        var formPanel = Ext.create('Ext.form.Panel',{
            id: 'formPanel',
            scrollable: 'vertical',
            baseCls: 'bgpink',

            items:[{
                xtype: 'fieldset',
                title: '电影信息',
                instructions: '请填写电影信息',
                defaults:{
                    labelwidth: '20%',
                },
                items: [{
                    xtype: 'textfield',
                    id: 'txt_title',
                    name: 'title',
                    label: '标题',
                    placeHolder: '请输入电影标题',
                    required: true,
                    clearIcon: true,
                    listeners:{
                        change:function(item,newValue,oldValue){
                            console.log("修改前的值为" + oldValue);
                            console.log("修改后的值为" + newValue);
                        }
                    }
                },{
                    xtype: 'textfield',
                    id: 'txt_director',
                    name: 'director',
                    label: '导演',
                    placeHolder: '请输入导演名称',
                    clearIcon: true
                }]
            }]
        });
        Ext.Viewport.add(formPanel);

        formPanel.getScrollable().getScroller().getFps(100);
        formPanel.getScrollable().getScroller().scrollTo(0,200);
        formPanel.getScrollable().getScroller().scrollToEnd();
    }
});

四、页面访问显示如下

 

-----------------------------

遇到的问题：

（1）、labelwidth 配置选项：值改变时，前台显示没有什么。不明白控制什么

（2）、disabledCls 配置选项：不起作用

（3）、Cls 配置选项：不起作用

posted @ 2013-12-01 10:38  php之路  阅读(298)  评论(0)  编辑  收藏  举报