zoukankan      html  css  js  c++  java
  • sencha touch学习心得之FormPanel

    最近做了一些sencha touch的学习,对于自己进来的一些学习心得给大家分享一下。可能都是些基础的东西,没办法啦,呵呵 ,本人也是入门级的水平。先讨论一下sencha touch中最常用到的布局——FormPanel。

    FormPanel是Panel的子类,就是一种表单显示形式的面板。

    这是最简单的一种FormPanel。代码如下:

    var FormTest = new Ext.form.FormPanel({
            scroll: 'vertical',
      defaults: {
       // labelAlign: 'right'
       labelWidth: '35%'
      },
      items: [{
       xtype: 'textfield',//文本输入框
       name: 'name',
       label: 'Name',
       placeHolder: 'Tom Roy',
       autoCapitalize : true,
       required: true,
       useClearIcon: true

      }, {
       xtype: 'passwordfield', //密码输入框
       name: 'password',
       label: 'Password',
       useClearIcon: true
      }, {
       xtype: 'emailfield',
       name: 'email',
       label: 'Email',
       placeHolder:
    'me@sencha.com',
       useClearIcon: true
      }, {
       xtype: 'urlfield',
       name: 'url',
       label: 'Url',
       placeHolder: 'http://sencha.com',
       useClearIcon: true
      }, {
       xtype: 'checkboxfield',
       name: 'cool',
       label: 'Cool'
      }, {
       xtype: 'datepickerfield',
       name: 'birthday',
       label: 'Birthday',
       picker: { yearFrom: 1900 }
      }, {
       xtype: 'selectfield',
       name: 'rank',
       label: 'Rank',
       options: [{
        text: 'Master',
        value: 'master'
       }, {
        text: 'Journeyman',
        value: 'journeyman'
       }, {
        text: 'Apprentice',
        value: 'apprentice'
       }]
      }, {
       xtype: 'hiddenfield',
       name: 'secret',
       value: false
      }, {
       xtype: 'textareafield',
       name: 'bio',
       label: 'Bio'
      }]
    }

     

    再对其中用到的一些组件进行说明:

    ①首先说说一下'textfield'和'textareafield',它们两个都是输入框,区别在于textfield是单行的输入框,而textareafield是  可以显示多行的。如果我们不想让它们的内容可编辑。我们可以为文本输入框添加:listeners:{
         afterrender:function(ele){
           ele.fieldEl.dom.readOnly = true;
           }
        },这样文本输入框就是只读的了。初始显示内容可以用value属性来定义。

    ②再说一下datepickerfield,这是一个日期选择框,显示效果很好,但是它的设计存在一些bug。先不讨论它的那些瑕疵。有时候我们要求它显示的年份,如果我们要求它显示的是当前时间。我们可以用value: new Date(),来定义。如果我们要求它的选择范围在2002年至但当前年份,可以用picker: { yearFrom: 2000 ,yearTo: new Date().getFullYear()},

    来达到要求。该组件选择的时候默认显示是英文,还可以修改sencha-touch的源码进行汉化。

    就先介绍这么多吧,有时间继续分享。

  • 相关阅读:
    html5+css3中的background: -moz-linear-gradient 用法 (转载)
    CentOS 安装Apache服务
    Linux 笔记
    CURL 笔记
    Spring Application Context文件没有提示功能解决方法
    LeetCode 389. Find the Difference
    LeetCode 104. Maximum Depth of Binary Tree
    LeetCode 520. Detect Capital
    LeetCode 448. Find All Numbers Disappeared in an Array
    LeetCode 136. Single Number
  • 原文地址:https://www.cnblogs.com/fyq891014/p/4188887.html
Copyright © 2011-2022 走看看