初步了解Sencha,运用Sencha写一个简单的表单

原创 2013年12月04日 23:38:12

1.首先建立一个名为Form.js的文件,再在app.js文件中对建立的文件进行注册操作,如下所示:

views: [
        'Main','Form'
    ],


在Views中添加文件'Form'

接下来在Main.js中对添加的文件进行连接调用

 items: [
            {
                title: 'Welcome',
                iconCls: 'home'
             },
            {
                title: 'Get Started',
                iconCls: 'action'
            },
            {    xtype:'FormPanel',
                 title:'login',
                 iconCls:'user'
            }
                ]

代码中的xtype:'FormPanel'和Form.js文件中的xtype对应,title:'login'为显示的名称,iconCls:'user'表示显示的图标类型为用户

Sencha建立的工程需要在iis中进行部署,部署后用浏览器访问显示的效果如图:

2.建立Form.js文件

Ext.define('MyApp.view.Form', {
    extend: 'Ext.form.Panel',
    xtype: 'FormPanel',
    config:{
    items:[]}
})

在items:[]中建立两个容器

items:[

{ xtype:'filedset'}

{ xtype:'panel'}

]

3.在容器filedset中放一个数组items:[],在数组中存放各个标签控件

姓名输入域:

{
                        xtype:'textfield',
                        label:'Name',
                        placeHolder:'Please Enter Info'
                    }

密码输入域:

{
                        xtype:'passwordfield',
                        label:'password',
                        placeHolder:'Please Enter Info'
                    }

邮箱输入域:

{
                        xtype:'emailfield',
                        label:'Emmail',
                        placeHolder:'Please Enter'
                    }

连接地址输入域:

{
                        xtype:'urlfield',
                        label:'Url',
                        placeHolder:'Please Enter'
                    }

滚动条:

{
                        xtype:'spinnerfield',
                        label:'Spinner',
                        placeHolder:'Please Enter'
                    }

复选:

{
                        xtype:'fieldset',
                        title:'爱好',
                        /* style:'width:35%;float:right',*/
                        items:[
                            {
                                xtype:'checkboxfield',
                                label:'羽毛球',
                                name:'hobby1',
                                value:'1'
                            },
                            {
                                xtype:'checkboxfield',
                                label:'网球',
                                name:'hobby2',
                                value:'2'
                            }

                        ]
                    }

日期:

{
                        xtype:'datepickerfield',
                        label:'日期',
                        destoryPickOnHide:true,
                        name:'date',
                        value:new Date(),
                        picker:{
                            yearFrom:1990
                        }
                    }

下拉列表:

{
                        xtype:'selectfield',
                        label:'学历',
                        options:[
                            {
                                text:'小学',
                                value:'1'
                            },
                            {
                                text:'中学',
                                value:'2'
                            }

                        ]
                    }

文本输入域:

{
                        xtype:'textfield',
                        label:'自我介绍',
                        name:'desc'
                    }

效果图:


4.按钮控件

{
                xtype:'panel',
                layout:{
                    type:'hbox'/*控制按钮水平显示*/
                },
                style:'margin:20px',
                items:[
                    {
                        xtype:'spacer'
                    },
                    {
                        xtype:'button',
                        text:'提交',
                        ui:'decline-round',
                        handler:function(button){/*处理点击按钮的事件,这里给出一个弹窗*/
                            Ext.Msg.alert('没有内容需要提交')
                        }
                    },
                    {
                        xtype:'spacer',
                        width:'100px'
                    },
                    {
                        xtype:'button',
                        text:'重置',
                        ui:'decline-round',
                        handler:function(button){
                            var form=Ext.Viewport.down('FormPanel');/*查找控件*/
                            form.reset();/*调用重置方法*/
                        }
                    },
                    {
                        xtype:'spacer'/*添加空格*/
                    }

                ]

            }

效果图:









Sencha Touch的表单组件

  • 2016年04月14日 10:26
  • 3.62MB
  • 下载

sencha自定义ImageField用于表单中显示图片

苦于sencha源码中,表单中无法显示

Sencha Touch学习笔记(九)表单

表单是在Sencha Touch中特别常用的一部分,大部分的App都会要去用户输入登录信息,这就要用表单来实现。在一些实际项目中,会有更复杂的信息需要人为的添加修改,也需要表单。 装载表单相关组件的...

sencha touch之表单二(注册页面)

接着上一篇的登陆页面,来一个最简单的注册页面,几乎包含了常用的field Ext.application({ id:'itKingApp', launch:function(){ var...
  • jjx0224
  • jjx0224
  • 2013年10月09日 16:07
  • 2956

Sencha Touch 1.1.1 之初接触(一)怎样入手并写一个漂亮的demo

想到哪里写到哪里,因为是学习过程,可能有不对的地方,以后会随时回头修改。本文面向的是Sencha Touch 1.1.1版本。   1、Sencha Touch开发与普通web开发有什么区别? ...

[Phonegap+Sencha Touch] 移动开发2、PhoneGap/Cordova初步使用

下面讲的是创建一个PhoneGap项目,然后打包成apk安装包 的一般方法。与以后讲Sencha touch+PhoneGap的开发有少许不同。 1、打开cmd,把盘符转到想要创建项目的目录,比如 ...

sencha touch初步

1.安装Java   下载jdk,下载地址

【翻译】Sencha Touch 2入门:创建一个实用的天气应用程序之二

在这三个部分的Sencha Touch教程中,将会创建一个简单的我是否需要带伞的实用应用程序,它会从worldweatheronline.com提供的Web服务中加载天气信息。基于天气代码,该应用程序...

如何创建一个Sencha Touch 2应用_笔记本案例(第二部分)

这篇文章很好,包括5部分,但在网上只找到了第一部分的中文版,只有自己一点一点翻译。本人英语不好,所以将原文也贴上来,翻译不通顺的地方请大家参考。 In this second par...

Sencha Touch设置一个table样式时,tbody的宽度只有table的一半

文章出处:http://blog.csdn.net/lisliefor/article/details/6694812 最近,在一个页面控制两个table切换显示的时...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:初步了解Sencha,运用Sencha写一个简单的表单
举报原因:
原因补充:

(最多只允许输入30个字)