本节开始我们正式讲EXT的第2大类组件--表单控件,有了之前几节的经验,现在应该学起来得心应手,这里先介绍下Extjs4.2里的样式,以便于美化界面,今天无意中还搜到了几篇自己制作样式的文章,相当给力,对于我来说是个好消息,我会在后面的学习中逐渐学习。
ddd67b6c41213f8397bc82d205e5aff8.jpg
css文件夹里有总体对应的下面theme样式,
access是黑色样式10d9d757a8a4ce956815bd45b75c87a0.jpg10d9d757a8a4ce956815bd45b75c87a0.jpg
classic为默认蓝色经典样式1523849e86c58a606b28c3bb585dc42b.jpg
ext-theme-classic-sandbox为没有样式,最基本的,超难看,建议别用这个
ext-theme-gray是灰色样式9fe26c4132f2fc0a9f437cfcb8aea541.jpg
ext-theme-neptune是蓝色样式9c859aa36d534ac629062f2e84c57c4f.jpg
接下来的例子中我们主要使用ext-theme-neptune样式,我们来制作一个简单的表单:
d3987bd1def21129d7d9e11387be01d2.jpg
主要代码如下:

<%@ 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>

再来看看整体表单有哪些控件:
863d62be81f3ab4719d329597d8cbadf.jpg
看看代码:

<%@ 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>

连载中,请大家继续关注!本文出自我的个人网站思考者日记网