SenchaTouch學習——form表單

時間  2019-12-09
標籤 senchatouch 學習 form 表單 欄目 HTML 简体版
原文   原文鏈接

　　SenchaTouch是一個很不錯的移動客戶端框架，最近學習它的from部分，記錄下code以備後查。javascript

　　一開始就被那優雅的界面迷住了，研究了一段ExtJs（Sencha），如今看客戶端的代碼有種似曾相識的感受。一塊兒開始吧！css

1.第一步，固然仍是引入基礎的JS包，簡單起見，咱們引入了基本所有的資源。html

2.第二步，固然是在頁面引入js和css文件html5

<head>
<link rel="stylesheet" href="SenchaTouch2.3.1-gpl/resources/css/sencha-touch.css" type="text/css"/>
<script type="text/javascript" src="SenchaTouch2.3.1-gpl/sencha-touch-debug.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<style type="text/css">
    .bgColor{
        background-color:prink;
    }
</style>
</head>

3.第三步，寫Js代碼java

Ext.require(['Ext.Panel','Ext.form.FieldSet','Ext.field.Text','Ext.form.Panel']);

Ext.application({
    name:'MyApp',
    icon:'images/icon.png', 
    // 用於指定應用程序被添加到使用ios操做系統的設備中的主屏幕時所使用的圖片，可配ipad和iPhone不一樣圖標
    glossOnIcon:false,
    // 是否取消ios操做系統中爲主屏幕中的圖標自動添加的gloss特效
    phoneStartupScreen:'images/phone_startup.png',
    // 用於指定應用程序被添加到ios主屏幕以後應用程序啓動時所顯示的圖片
    // 必須320X640
    tabletStartupScreen:'images/tablet_startup.png',
    // 用於指定添加到ios系統主屏幕後應用程序啓動時所顯示的圖片
    // 必須769X1004
    
    launch:function(){
        
        // 定義表單面板-------------------------------------------
        var formPanel = Ext.create('Ext.form.Panel',{
            id:'formPanel',
            scrollable:'vertical',    // (horizontal橫向)是否容許滾動，縱向
            baseCls:'bgPink',        // 設置基本樣式(以背景爲例)
            cls:'smallFont',        // 設置基本樣式(以字體爲例) 
            items:[{
                xtype:'fieldset',
                title:'電影信息',            // 標題
                instructions:'請填寫電影信息',// 描述
                defaults:{
                    labelwidth:'10%',
                    xtype:'textfield'
                },
                items:[{
                    id:'txt_title',
                    name:'title',
                    label:'名稱',            // 設置標籤名
                    labelAlign:'left',        // 設置標籤位置,默認left（top,right,bottom）
                    placeHolder:'請輸入電影名稱',// 未輸入內容且失去焦點時顯示值
                    required:true,            // 只能起到提示做用，不提供驗證功能
                    clearIcon:true,            // 不爲空時顯示一個清除內容圖標
                    listeners:{                // 增長監聽器
                        change:function(item,newValue,oldValue){
                            console.log('修改以前爲:'+oldValue);
                            console.log('修改以後爲:'+newValue);
                        }
                    }
                },{
                    id:'txt_director',
                    name:'director',
                    label:'導演',
                    placeHolder:'請輸入導演名稱',
                    clearIcon:true
                },{
                    id:'txt_type',
                    name:'type',
                    label:'類型',
                    value:'愛情',    // 值屬性
                    readOnly:true    // 只讀屬性
                },{
                    id:'txt_date',
                    name:'date',
                    label:'年代',
                    value:'2013年',    // 值屬性
                    disabled:true,    // 禁用屬性
                    disabledCls:'disabled' // 設置組件處於無效狀態樣式
                }]
            }]
        });
        
    
// ————組件測試————————————————————————————————————————————————————————————————————————————————        
        Ext.Viewport.add(formPanel);
        formPanel.getScrollable().getScroller().setFps(100);// 此句有問題
        formPanel.getScrollable().getScroller().scrollTo(0,200);
        formPanel.getScrollable().getScroller().scrollToEnd();//頁面打開時表單面板自動滾動到表單底部
    }
});

4.查看運行出來的效果。以下圖：ios

效果還很不錯，很簡約啊！~html5真強大。app

上面的例子僅僅是一些簡單的頁面元素，下面再來幾個看看。框架

這個示例裏面多了很多form元素，下面瞅瞅代碼吧~！學習

Ext.require(['Ext.MessageBox','Ext.Panel','Ext.form.FieldSet','Ext.field.*','Ext.form.Panel']);

Ext.application({
    name:'MyApp',
    icon:'images/icon.png', 
    // 用於指定應用程序被添加到使用ios操做系統的設備中的主屏幕時所使用的圖片，可配ipad和iPhone不一樣圖標
    glossOnIcon:false,
    // 是否取消ios操做系統中爲主屏幕中的圖標自動添加的gloss特效
    phoneStartupScreen:'images/phone_startup.png',
    // 用於指定應用程序被添加到ios主屏幕以後應用程序啓動時所顯示的圖片
    // 必須320X640
    tabletStartupScreen:'images/tablet_startup.png',
    // 用於指定添加到ios系統主屏幕後應用程序啓動時所顯示的圖片
    // 必須769X1004
    
    launch:function(){
        
        // 定義表單面板-------------------------------------------
        var formPanel = Ext.create('Ext.form.Panel',{
            id:'formPanel',
            scrollable:'vertical',    // (horizontal橫向)是否容許滾動，縱向
            baseCls:'bgPink',        // 設置基本樣式(以背景爲例)
            cls:'smallFont',        // 設置基本樣式(以字體爲例) 
            items:[{
                xtype:'fieldset',
                title:'用戶信息',            // 標題
                instructions:'請填寫用戶信息',// 描述
                defaults:{
                    labelwidth:'10%'
                },
                items:[{
                    xtype:'textfield',
                    id:'txt_name',
                    name:'name',
                    label:'姓名',            // 設置標籤名
                    labelAlign:'left',        // 設置標籤位置,默認left（top,right,bottom）
                    placeHolder:'請輸入姓名',// 未輸入內容且失去焦點時顯示值
                    required:true,            // 只能起到提示做用，不提供驗證功能
                    clearIcon:true            // 不爲空時顯示一個清除內容圖標
                },{
                    xtype:'passwordfield',
                    id:'txt_password',
                    name:'password',
                    label:'密碼',
                    placeHolder:'請輸入密碼',
                    clearIcon:true
                },{
                    xtype:'spinnerfield',
                    id:'spn_age',
                    name:'age',
                    label:'年齡',
                    minValue:0,        // 最小值
                    maxValue:9,        // 最大值
                    stepValue:1,    // 步進值
//                    groupButtons:false, // 默認爲true.爲false+-各一邊
                    cycle:true        // 達到最大從最小循環
                },{
                    xtype:'radiofield',
                    id:'txt_sex1',
                    name:'sex',
                    label:'男性',
                    value:'male',
                    checked:true,    // 默認選中
                    listeners:{
                        check:function(item,e){
                            console.log('您選擇了：男性');
                        }
                    }
                },{
                    xtype:'radiofield',
                    id:'txt_sex2',
                    name:'sex',
                    label:'女性',
                    value:'female',
                    checked:false,    // 默認不選中
                    listeners:{
                        check:function(item,e){
                            console.log('您選擇了：女性');
                        }
                    }
                },{
                    xtype:'checkboxfield',
                    id:'txt_hobby1',
                    name:'hobby',
                    label:'籃球',
                    value:'ball',
                    checked:true    // 默認選中狀態
                },{
                    xtype:'checkboxfield',
                    id:'txt_hobby2',
                    name:'hobby',
                    label:'足球',
                    value:'ball',
                    checked:false    // 默認選中狀態
                },{
                    xtype:'selectfield',
                    id:'txt_select',
                    name:'select',
                    label:'課程',
                    options:[{
                        text:'語文',
                        value:'1'
                    },{
                        text:'數學',
                        value:'2'
                    },{
                        text:'英語',
                        value:'3'
                    }],
                    listeners:{
                        change:function(select,newValue,oldValue){
                            console.log(newValue);
                            switch(newValue){
                            case '1':
                                Ext.Msg.alert('你選擇了語文');
                                break;
                            case '2':
                                Ext.Msg.alert('你選擇了數學');
                                break;
                            case '3':
                                Ext.Msg.alert('你選擇了英語');
                                break;
                            }
                            
                        }
                    }
                },{
                    xtype:'emailfield',
                    id:'txt_email',
                    name:'email',
                    label:'Email',
                    placeHolder:'請輸入有效的Email地址',
                    clearIcon:true
                },{
                    xtype:'urlfield',
                    id:'txt_url',
                    name:'url',
                    label:'我的網址',
                    placeHolder:'請輸入有效的網址',
                    clearIcon:true
                },{
                    xtype:'textareafield',
                    id:'txt_textarea',
                    name:'memo',
                    label:'我的簡介',
                    maxLength:1000,    // 最大字數
                    maxRows:4,        // 超過此行數會有滾動條
                    placeHolder:'請輸入1000字之內的我的簡介',
                    clearIcon:true
                },{
                    xtype:'searchfield',
                    id:'txt_search',
                    name:'search',
                    label:'檢索',
                    placeHolder:'請輸入檢索關鍵字',
                    clearIcon:true
                }]
            }]
        });
        
    
// ————組件測試————————————————————————————————————————————————————————————————————————————————        
        Ext.Viewport.add(formPanel);
//        formPanel.getScrollable().getScroller().setFps(100);// 此句有問題
        formPanel.getScrollable().getScroller().scrollTo(0,200);
        formPanel.getScrollable().getScroller().scrollToEnd();//頁面打開時表單面板自動滾動到表單底部
        
        //設置值，有問題 
//        formPanel.getComponent('txt_sex1').setGroupValue('female');
    }
});

若是一些selectfield的值較多，能夠來自本地Store也能夠來自Proxy。測試

部分代碼以下：

launch:function(){

        // 定義genre
        Ext.define('genre', {
            extend : 'Ext.data.Model',
            config : {
                fields : [ {
                    name : 'id',
                    type : 'int'
                }, {
                    name : 'genre',
                    type : 'string'
                } ]
            }
        });
        
            
        // 本地數據
        var genreStore = Ext.create('Ext.data.Store',{
            model:'genre',
            data:[                        // 數據集，記錄
                  {id:1,genre:'喜劇'},
                  {id:2,genre:'韓劇'},
                  {id:3,genre:'美劇'}
                 ]
        });
        
        // 定義表單面板-------------------------------------------
        var formPanel = Ext.create('Ext.form.Panel',{
            id:'formPanel',
            scrollable:'vertical',    // (horizontal橫向)是否容許滾動，縱向
            baseCls:'bgPink',        // 設置基本樣式(以背景爲例)
            cls:'smallFont',        // 設置基本樣式(以字體爲例) 
            items:[{
                xtype:'fieldset',
                title:'電影信息',            // 標題
                instructions:'請填寫電影信息',// 描述
                defaults:{
                    labelwidth:'10%'
                },
                items:[{
                    id:'txt_title',
                    name:'title',
                    label:'名稱',            // 設置標籤名
                    labelAlign:'left',        // 設置標籤位置,默認left（top,right,bottom）
                    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
                },{
                    id:'txt_genre',
                    xtype:'selectfield',    // 選取框
                    name:'genre',
                    label:'類型',
                    valueField:'id',        // 實際信息
                    displayField:'genre',    // 展現信息
                    store:genreStore        // 存儲store
                },{
                    xtype:'textfield',
                    id:'txt_date',
                    name:'date',
                    label:'年代',
                    value:'2013年',    // 值屬性
                    disabled:true,    // 禁用屬性
                    disabledCls:'disabled' // 設置組件處於無效狀態樣式
                }]
            }]
        });

能實現相同的效果，有更加靈活的代碼風格。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程