ExtJS4.2學習(16)製做表單

時間 2020-01-19

原文原文鏈接

本節開始咱們正式講EXT的第2大類組件--表單控件，有了以前幾節的經驗，如今應該學起來駕輕就熟，這裏先介紹下Extjs4.2裏的樣式，以便於美化界面，今天無心中還搜到了幾篇本身製做樣式的文章，至關給力，對於我來講是個好消息，我會在後面的學習中逐漸學習。

css文件夾裏有整體對應的下面theme樣式，
access是黑色樣式
classic爲默認藍色經典樣式
ext-theme-classic-sandbox爲沒有樣式，最基本的，超難看，建議別用這個
ext-theme-gray是灰色樣式
ext-theme-neptune是藍色樣式
接下來的例子中咱們主要使用ext-theme-neptune樣式，咱們來製做一個簡單的表單：

主要代碼以下：javascript

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

再來看看總體表單有哪些控件：

看看代碼：css

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

連載中，請你們繼續關注！本文出自個人我的網站思考者日記網html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。