ExtJS4.2学习(16)制作表单



本节开始我们正式讲EXT的第2大类组件--表单控件,有了之前几节的经验,现在应该学起来得心应手,这里先介绍下Extjs4.2里的样式,以便于美化界面,今天无意中还搜到了几篇自己制作样式的文章,相当给力,对于我来说是个好消息,我会在后面的学习中逐渐学习。pyj思考者日记网-束洋洋个人博客

QQ截图20131210215738.jpgpyj思考者日记网-束洋洋个人博客

css文件夹里有总体对应的下面theme样式,pyj思考者日记网-束洋洋个人博客

access是黑色样式黑色样式.jpgpyj思考者日记网-束洋洋个人博客

classic为默认蓝色经典样式默认样式.jpgpyj思考者日记网-束洋洋个人博客

ext-theme-classic-sandbox为没有样式,最基本的,超难看,建议别用这个pyj思考者日记网-束洋洋个人博客

ext-theme-gray是灰色样式灰色样式.jpgpyj思考者日记网-束洋洋个人博客

ext-theme-neptune是蓝色样式蓝色样式.jpgpyj思考者日记网-束洋洋个人博客

接下来的例子中我们主要使用ext-theme-neptune样式,我们来制作一个简单的表单:pyj思考者日记网-束洋洋个人博客

QQ截图20131210220452.jpgpyj思考者日记网-束洋洋个人博客

主要代码如下:pyj思考者日记网-束洋洋个人博客

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Hello Extjs4.2</title>  
<link href="../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet">  
<script src="../../ExtJS4.2/ext-all.js"></script>  
<script src="../../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>  
<script type="text/javascript">  
Ext.onReady(function(){  
    var form = new Ext.form.FormPanel({  
        title:'第一个表单',  
        defaultType:'textfield', //默认表单里的控件类型  
        buttonAlign:'center', //按钮对齐方式  
        frame:true,  
        width:220,  
        fieldDefaults:{  
            labelAlign:'right', //文本对齐方式  
            labelWidth:70  
        },  
        items:[{  //内容  
            fieldLabel:'输入框'  
        }],  
        buttons:[{  
            text:'按钮'  
        }]  
    });  
    form.render("form");  
});  
</script>  
</head>  
<body>  
<h1>我的ExtJS4.2学习之路</h1>  
<hr />  
作者:束洋洋  
开始日期:2013年12月10日 20:36:56  
<h2>深入浅出ExtJS之制作表单</h2>  
<div id="form"></div>  
</body>  
</html>

 pyj思考者日记网-束洋洋个人博客

再来看看整体表单有哪些控件:pyj思考者日记网-束洋洋个人博客

QQ截图20131210220452.jpgpyj思考者日记网-束洋洋个人博客

看看代码:pyj思考者日记网-束洋洋个人博客

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Hello Extjs4.2</title>  
<link href="../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet">  
<script src="../../ExtJS4.2/ext-all.js"></script>  
<script src="../../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>  
<script type="text/javascript">  
Ext.onReady(function(){  
  
    // HtmlEditor需要这个  
    Ext.QuickTips.init();  
  
    var form = new Ext.form.FormPanel({  
        buttonAlign: 'center',  
        width: 600,  
        title: 'form',  
        frame: true,  
        fieldDefaults: {  
            labelAlign: 'right',  
            labelWidth: 70  
        },  
        items: [{  
            xtype: 'container',  
            layout: 'column',  
            items: [{  
                columnWidth:.7,  
                xtype:'fieldset',  
                collapsible: true, //是否为可折叠  
                collapsed: false, //默认是否折叠  
                title: '单纯输入',  
                autoHeight:true,  
                defaults: {width: 300},  
                defaultType: 'textfield',  
                items: [{  
                    fieldLabel: '文本',  
                    name: 'text'  
                },{  
                    xtype: 'numberfield',  
                    fieldLabel: '数字',  
                    name: 'number'  
                },{  
                    xtype:"combo",  
                    fieldLabel: '选择',  
                    name: 'combo',  
                    store: new Ext.data.SimpleStore({  
                        fields: ['value', 'text'],  
                        data: [  
                            ['value1', 'text1'],  
                            ['value2', 'text2']  
                        ]  
                    }),  
                    displayField: 'text',  
                    valueField: 'value',  
                    mode: 'local',  
                    emptyText:'请选择'  
                },{  
                    xtype: 'datefield',  
                    fieldLabel: '日期',  
                    name: 'date'  
                },{  
                    xtype: 'timefield',  
                    fieldLabel: '时间',  
                    name: 'time'  
                },{  
                    xtype: 'textarea',  
                    fieldLabel: '多行',  
                    name: 'textarea'  
                },{  
                    xtype: 'hidden',  
                    name: 'hidden'  
                }]  
            },{  
                xtype: 'container',  
                columnWidth:.3,  
                layout:'form',  
                items:[{  
                    xtype:'fieldset',  
                    checkboxToggle:true, //多选  
                    title: '多选',  
                    autoHeight:true,  
                    defaultType: 'checkbox',  
                    hideLabels: true,  
                    style: 'margin-left:10px;',  
                    bodyStyle: 'margin-left:20px;',  
                    items: [{  
                        boxLabel: '首先要穿暖',  
                        name: 'check',  
                        value: '1',  
                        checked: true,  
                        width: 'auto'  
                    },{  
                        boxLabel: '然后要吃饱',  
                        name: 'check',  
                        value: '2',  
                        checked: true,  
                        width: 'auto'  
                    },{  
                        boxLabel: '房子遮风避雨',  
                        name: 'check',  
                        value: '3',  
                        width: 'auto'  
                    },{  
                        boxLabel: '行路方便',  
                        name: 'check',  
                        value: '4',  
                        width: 'auto'  
                    }]  
                },{  
                    xtype:'fieldset',  
                    checkboxToggle:true,  
                    title: '单选',  
                    autoHeight:true,  
                    defaultType: 'radio',  
                    hideLabels: true,  
                    style: 'margin-left:10px;',  
                    bodyStyle: 'margin-left:20px;',  
                    items: [{  
                        boxLabel: '渴望自由',  
                        name: 'rad',  
                        value: '1',  
                        checked: true,  
                        width: 'auto'  
                    },{  
                        boxLabel: '祈求爱情',  
                        name: 'rad',  
                        value: '2',  
                        width: 'auto'  
                    }]  
                }]  
            }]  
        },{  
            xtype: 'container',  
            layout: 'form',  
            items: [{  
                labelAlign: 'top',  
                xtype: 'htmleditor',  
                fieldLabel: '在线编辑器',  
                id: 'editor',  
                anchor: '98%',  
                height: 200  
            }]  
        }],  
        buttons: [{  
            text: '保存'  
        },{  
            text: '读取'  
        },{  
            text: '取消'  
        }]  
    });  
  
    form.render("form");  
  
  
});  
</script>  
</head>  
<body>  
<h1>我的ExtJS4.2学习之路</h1>  
<hr />  
作者:束洋洋  
开始日期:2013年12月10日 21:09:01  
<h2>深入浅出ExtJS之表单控件</h2>  
<div id="form"></div>  
</body>  
</html>

 pyj思考者日记网-束洋洋个人博客

 pyj思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridpyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridpyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingpyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格pyj思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.Fieldpyj思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件pyj思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditorpyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 pyj思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解pyj思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目pyj思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈