三、Ext.Panel组建

属性：

　　-layout：样式布局

　　-title：面板标题

　　-width：宽度

　　-height：高度

　　-labelWidth：标签宽度

　　-frame：面板样式

方法：

　　-add()：添加组建

　　-addButton()：添加button组建

1.创建空白面板

Ext.onReady(function() {
            new Ext.Panel({
                        renderTo : Ext.getBody(),
　　　　　　　　　　　　　　layout : "form",//form里面每个组建一行
                        title : "人员信息",
                        width : 200,
                        height : 400,
                        frame : true//把面板四个角变成圆角并含有颜色
                    });
        });

2.带button的面板

Ext.onReady(function() {
            var _panel = new Ext.Panel({
                        title : "标题信息",
                        width : 200,
                        height : 300,
                        frame : true//把面板四个角变成圆角并含有颜色
                    });
            _panel.addButton({text:"确定1"});
            _panel.addButton(new Ext.Button({text:"确定2",minWidth:50}));
            
            _panel.render(Ext.getBody()); //表示最后构造               
        });

或者

Ext.onReady(function() {
            var _panel = new Ext.Panel({
                        renderTo : Ext.getBody(),
                        title : "标题信息",
                        width : 250,
                        height : 130,
                        frame : true,
                        layout : "form",//form里面每个组建一行，两个button不能在一行
                        labelWidth:30,
                        listeners : {
                            "render" : function(_panel) {
                                _panel.add({
                                            xtype : "button",
                                            text : "确定",
                                            minWidth : 100
                                        });
                                _panel.add({
                                            xtype : "button",
                                            text : "取消",
                                            minWidth : 100
                                        });
                            }
                        }
                    });
        });

3.带文本框的面板

Ext.onReady(function() {
            var _panel = new Ext.Panel({
                        renderTo : Ext.getBody(),
                        title : "标题信息",
                        width : 250,
                        height : 130,
                        frame : true,
                        layout : "form",//form里面每个组建一行
                        labelWidth:30,
                        listeners : {
                            "render" : function(_panel) {
                                _panel.add({
                                            xtype : "textfield",
                                            fieldLabel : "姓名",
                                            width:150
                                        });
                                _panel.add(new Ext.form.TextField({
                                            fieldLabel : "地址",
                                            width:150
                                        }));
                            }
                        }
                    });
        });

4.加载css样式

Ext.onReady(function() {
            var _panel = new Ext.Panel({
                        title : "标题信息",
                        width : 200,
                        height : 300,
                        frame : true//把面板四个角变成圆角并含有颜色
                    });
            _panel.addButton({text:"确定1"});
            _panel.addButton(new Ext.Button({text:"确定2",minWidth:50}));
            //添加css样式div.css
            _panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), {
                            tag:"div",
                            cls:"contain",
                            cn:[{
                                tag:"div",
                                cls:"center"
                            }]
                      } , true).child("div")) ;            
        });
CSS样式：
<style type="text/css">
.contain{
        width:100%; 
        height:100%;
        top:0;
        left:0;
    }
.center {
    position:absolute;
    top:30%;
    left:43%;
    text-align:left;
}
</style>

5.面板带文本框、button的一般通用形式

Ext.onReady(function() {
            new Ext.Panel({
                        renderTo:Ext.getBody(),
                        title : "登 陆",
                        frame : true,
                        width : 260,
                        height : 130,
                        layout : "form",
                        labelWidth : 45,
                        defaults:{xtype:"textfield",width:180},
                        items:[{
                            fieldLabel:"姓名"
                        },{
                            fieldLabel:"密码"
                        }],
                        buttons:[{
                            text:"确定"
                        },{
                            text:"取消"
                        }]
                    });
        });

 

总结：

xtype : "textfield" 形式等价于new Ext.form.TextField()
renderTo : 是在HTML的元素中插入Ext的组件
render：表示组建构建中载入
apply：直接把目标对象属性赋给对象属性
applyToMarkup：引入css样式

 

转载于:https://www.cnblogs.com/atwanli/articles/4621424.html