sencha表單入門例子

php之路發表於2013-12-01

來自於《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 配置選項：不起作用

相關文章