梦幻之旅

DEBUG - 天道酬勤

   :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  671 随笔 :: 6 文章 :: 256 评论 :: 0 Trackbacks

 

function myForm_1() {
    Ext.QuickTips.init();
    
var form = new Ext.form.FormPanel({
                defaultType : 'textfield',
                labelAlign : 'right',
                title : 'form',
                labelWidth : 
50,
                frame : 
true,
                width : 
220,
                items : [
new Ext.form.TextField({
                    name : 
"userName",
                    fieldLabel : '文本框',
                    inputType : 
"text",
                    allowBlank : 
false,
                    emptyText : 
"请正确输入数据",
                    maxLength : 
10,
                    maxLengthText : 
"请不要超过10个字符",
                    invalidText : 
"invalidText:只能够输入数字",
                    regex : 
/^\d+$/,
                    regexText : 
"只能够输入数字",
                    validationEvent : 
"click"
                        
// validator:function(){Ext.Msg.alert("提示信息","只能够输入数字");}
                    })],
                buttons : [{
                            text : '按钮',
                            handler : 
function() {
                                Ext.Msg.alert(
"提示信息""Hello,你好哈.");
                            }
                        }]
            });
    form.render(
"form");
}

function myForm_2() {
    
var form1 = new Ext.form.FormPanel({
                width : 
350,
                frame : 
true,
                renderTo : 
"form1",
                title : 
"FormPanel",
                bodyStyle : 
"padding:5px 5px 0",
                defaults : {
                    width : 
200,
                    xtype : 
"textfield"
                },
                items : [{
                            fieldLabel : 
"UserName",
                            name : 
"user",
                            id : 
"user"
                        }, {
                            fieldLabel : 
"PassWord",
                            inputType : 
"password",
                            name : 
"pass",
                            id : 
"pass"
                        }],
                buttons : [{
                            text : 
"确定"
                        }, {
                            text : 
"取消",
                            handler : 
function() {
                                
var svalue = "用户名:"
                                        
+ Ext.get('user').getValue();
                                svalue 
+= ",密码:" + Ext.get('pass').getValue();
                                Ext.Msg.alert(
"提示信息", svalue);
                            }
                        }]
            });
}

function myForm_3() {
    
var form1 = new Ext.form.FormPanel({
                width : 
850,
                frame : 
true,
                renderTo : 
"form1",
                title : 
"FormPanel",
                bodyStyle : 
"padding:5px 5px 0",
                defaults : {
                    width : 
200,
                    xtype : 
"textfield"
                },
                items : [{
                            xtype : 
"fieldset",
                            checkboxToggle : 
true,// 关键参数,其他和以前的一样
                            checkboxName : "个人信息",
                            title : 
"选填信息",
                            defaultType : 'textfield',
                            width : 
830,
                            autoHeight : 
true,// 使自适应展开排版
                            items : [{
                                        fieldLabel : 
"UserName",
                                        name : 
"user",
                                        anchor : 
"95%"// 330px-labelWidth剩下的宽度的95%,留下5%作为后面提到的验证错误提示
                                    }, {
                                        fieldLabel : 
"PassWord",
                                        inputType : 
"password",// 密码文本
                                        name : "pass",
                                        anchor : 
"95%"
                                    }]
                        }, {
                            xtype : 'fieldset',
                            title : '个人信息',
                            collapsible : 
true,
                            autoHeight : 
true,
                            width : 
830,
                            defaults : {
                                width : 
150
                            },
                            defaultType : 'textfield',
                            items : [{
                                        fieldLabel : '爱好',
                                        name : 'hobby',
                                        value : 'www.cnblogs.com'
                                    }, {
                                        xtype : 
"combo",
                                        name : 'sex',
                                        store : [
"""""保密"],
                                        fieldLabel : 
"性别",
                                        emptyText : '请选择性别.'
                                    }, {
                                        xtype : 
"datefield",
                                        fieldLabel : 
"生日",
                                        anchor : 
"99%"
                                    }]
                        }],
                buttons : [{
                            text : 
"确定"
                        }, {
                            text : 
"取消"
                        }]
            });
}
function myForm_4() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget 
= 'side';// 提示的方式,枚举值为"qtip","title","under","side",id(元素id)
    var form1 = new Ext.form.FormPanel({
                width : 
350,
                frame : 
true,
                renderTo : 
"form1",
                labelWidth : 
80,
                title : 
"FormPanel",
                bodyStyle : 
"padding:5px 5px 0",
                defaults : {
                    width : 
150,
                    xtype : 
"textfield",
                    inputType : 
"password"
                },
                items : [{
                            fieldLabel : 
"不能为空",
                            allowBlank : 
false,// false则不能为空,默认为true
                            blankText : "不能为空,请填写",// 错误提示信息,默认为This field is
                            vtype : "email",// 'email'只能有效的Email,'alpha'只能输入字母,'alphanum'只能输入数字和字母,'url'只能输入url
                            vtypeText : "不是有效的邮箱地址",// 错误提示信息,默认值我就不说了
                            id : "blanktest",
                            anchor : 
"90%"
                        }]
            });
}
function myForm_5() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget 
= 'side';// 提示的方式,枚举值为"qtip","title","under","side",id(元素id)

    
// 先用Ext.apply方法添加自定义的password验证函数(也可以取其他的名字)
    Ext.apply(Ext.form.VTypes, {
                password : 
function(val, field) {// val指这里的文本框值,field指这个文本框组件,大家要明白这个意思
                    if (field.confirmTo) {// confirmTo是我们自定义的配置参数,一般用来保存另外的组件的id值
                        var pwd = Ext.get(field.confirmTo);// 取得confirmTo的那个id的值
                        return (val == pwd.getValue());
                    }
                    
return true;
                }
            });

    
var form1 = new Ext.form.FormPanel({
                width : 
350,
                frame : 
true,
                renderTo : 
"form1",
                labelWidth : 
80,
                title : 
"FormPanel",
                bodyStyle : 
"padding:5px 5px 0",
                defaults : {
                    width : 
150,
                    xtype : 
"textfield",
                    inputType : 
"password"
                },
                items : [{
                            fieldLabel : 
"密码",
                            id : 
"pass1",
                            anchor : 
"90%"
                        }, {
                            fieldLabel : 
"确认密码",
                            id : 
"pass2",
                            vtype : 
"password",// 自定义的验证类型
                            vtypeText : "两次密码不一致!",
                            confirmTo : 
"pass1",// 要比较的另外一个的组件的id
                            anchor : "90%"
                        }]
            });
}
function myForm_6() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget 
= 'side';
    
var combo = new Ext.form.ComboBox({
                store : ['湖北', '江西', '安徽'],
                
// emptyText : '请选择一个省份.',
                applyTo : 'combo'
            });
}
function myForm_7() {
    
var ExtSelect = new Ext.form.ComboBox({
        transform : 
"select",// html中的id
        width : 80
            
// 宽度
        });
}
function myForm_8() {
    Ext.QuickTips.init();
    
var myform = new Ext.FormPanel({
                frame : 
true,
                width : 
600,
                layout : 
"form",
                labelWidth : 
50,
                title : 
"htmleditor简单示例",
                labelAlign : 
"top",// items中的标签的位置
                renderTo : Ext.getBody(),
                items : [{
                            xtype : 
"htmleditor",
                            id : 
"he",
                            fieldLabel : 
"编辑器",
                            anchor : 
"99%"
                        }]
            });
}
Ext.onReady(myForm_8);
posted on 2008-11-09 00:26 HUIKK 阅读(2047) 评论(3)  编辑  收藏 所属分类: EXT

评论

# 如何删除一个textFiled呀? 2008-11-12 19:16 iii5
如何删除一个textFiled呀?

用remove方法,删不掉fieldLabel,怎么办呢?  回复  更多评论
  

# re: Ext FormPanel 独孤九剑-第九式 2008-11-12 22:27 惠万鹏
@iii5
我也是菜鸟一只,刚学ext不久.以前没有用过ext,不久的将来也不会用,只是想学一学它,以备将来使用而已.  回复  更多评论
  

# re: Ext FormPanel 独孤九剑-第九式 2008-11-27 22:34 lzb
搞得挺全的!学习中  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: