ExtJS3.0之Form组件以及登录窗口实例

 

在测试过程中，在IE中的显示效果与以下帖图不完全一样。但在FF中是一样的。

 

2、Ext.Panel

　　下面讲解事件render，事件render是指当前对象正确构造触发，方法add和getCmp，例子代码如下：

 /// 
 
//样式

 
Ext.onReady(function(){
    var _panel = new Ext.Panel({ //Panel：面板
        title:"人员信息",
        width:200,
        height:150,
        cls:"person_panel",
        renderTo:Ext.getBody(),
        layout:"form",
        labelWidth:30,
        listeners:{
            "render":function(_panel){  //事件render：当当前对象被正确构造后触发
                _panel.add(new Ext.form.TextField({ //方法add：添加一个组件到面板中
                    cls:"person_textfield",
                    id:"txt_name",
                    fieldLabel:"姓名",
                    labelStyle: 'font-weight:bold;margin: 5px auto auto 5px;'
//                    labelSeparator: '...'
                }));
            }
        }
    })
    
    new Ext.Button({
        text:"确 定",
        cls:"person_panel",
        renderTo:Ext.getBody(), //属性renderTo：将当前对象所生成的HTML对象存放到指定的对象中
        handler:function(){
            var txt = Ext.getCmp("txt_name").getValue();//Ext.getCmp("String_id")得到id为String_id的组件对象
            Ext.Msg.alert("提示",txt);
        }
    });
});
 

　　执行上述代码，如下图所示：

　　再看下面的例子，主要方法addButton两种构造方式的不同，例子代码如下：

 Ext.onReady(function(){
    var _panel = new Ext.Panel({ //Panel：面板
        title:"人员信息",
        frame:true,        //属性frame：把四个角变成圆角    
        cls:"person_panel", //属性cls：增加样式   
        width:200,
        height:150
    })
    
    _panel.addButton({text:"确 定"}); //按form的自身构造对象
    _panel.addButton(new Ext.Button({text:"取 消",minWidth:100})); //重新构造一个对象
    _panel.render(Ext.getBody());
});
 

　　执行上述代码，如下图所示：

　　接下来重点讲解属性xtype：在EXTJS的可视化组件部署中有一种xtype机制，即通过指定xtype的值来告诉容器组件如何初始化包含组件，如xtype:"textfield"，表示使用Ext.form.TextField来进行初始化。运行帮助文档查看xtype的类型信息，如图：

　　接下来看一个完整的登陆实例，代码如下图所示：

 

 Ext.onReady(function(){
    var _panel = new Ext.Panel({ //Panel：面板
        title:"登 陆",
        frame:true,        //属性frame：把四个角变成圆角        
        width:260,
        height:130,
        layout:"form",
        labelWidth:45,
        defaults:{xtype:"textfield",width:180},
        items:[{      //items：指定包含在面板中的组件的配置数组
            fieldLabel:"账 号"
        },{
            fieldLabel:"密 码"
        }],
        buttons:[{                           
            text:"确 定"
        },{
            text:"取 消"
        }]
    });
    
    _panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{  //applyToMarkup：在当前组件上动态创建
        tag:"div",
        cls:"contain",
        cn:[{
            tag:"div",
            cls:"center"
        }]
    },true).child("div"));  //true：表示applyToMarkup当前返回的是ExtJs对象
});
 

　　执行上述代码，如下图所示：