Extjs 简单UI设计1

1: button
<script type="text/javascript">
    Ext.onReady(function() {
        new Ext.Button({
            renderTo:Ext.getBody(),
            text:"确 定",
            minWidth:200,
            handler:function() {
                alert("handler 句柄相应button的默认事件:click");
            }
        })
    });
</script>

<script type="text/javascript">
    Ext.onReady(function() {
        new Ext.Button({
            renderTo:Ext.getBody(),
            text:"确定",
            minWidth:200,
            listeners:{
                "click":function() {
                    alert("listeners 自定义响应事件名称");
                }
            }
        })
    });
</script>

 
<script type="text/javascript">
    Ext.onReady(function() {
        var _button = new Ext.Button({
            renderTo:Ext.getBody(),
            text:"确定"
        });

        _button.on("click",function(){
            alert("类实例的 on 方式 注册监听器")
        });
    });
</script>

 

2:textField 
<script type="text/javascript">
    Ext.onReady(function() {
       var _panel = new Ext.Panel({
           renderTo:Ext.getBody(),
           layout:"form",
           labelWidth:30,
           listeners:{
               "render":function(_panel){
                   _panel.add(new Ext.form.TextField({
                       id:"txt_name",
                       fieldLabel:"姓名"
                   }))
               }
           }
       })  ;


       new Ext.Button({
           text:"确定",
           renderTo:Ext.getBody(),
           handler:function(){
               alert(Ext.getCmp("txt_name").getValue());
           }
       })

    });
</script>


 3:panel
<script type="text/javascript">
    Ext.onReady(function() {
        var _panel = new Ext.Panel({
            title:"人员信息",
            frame:true,
            width:200,
            height:300
        });

        _panel.addButton({text:"确定"});
        _panel.addButton(new Ext.Button({text:"取消",minWidth:100})) ;
        _panel.render(Ext.getBody());
    });
</script>

居中效果：
    <style type="text/css">
        .contain{
            width:100% ;
            height:100%;
            top:0;
            left:0;
        }
        .center{
            position:absolute;
            top:30%;
            left:43%;
            text-align:left;
        }
    </style>

<script type="text/javascript">
    Ext.onReady(function() {
        var _panel = new Ext.Panel({
            title:"人员信息",
            frame:true,
            width:200,
            height:300
        });

        _panel.addButton({text:"确定"});
        _panel.addButton(new Ext.Button({text:"取消",minWidth:100})) ;

        _panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
            tag:"div",
            cls:"contain",
            cn:[{
                tag:"div",
                cls:"center"
            }]
        },true).child("div")) ;
    });
</script>

 _panel.add({xtype:"textfield",fieldLabel:"姓名"});
<script type="text/javascript">
    Ext.onReady(function() {
        var _panel = new Ext.Panel({
            title:"人员信息",
            frame:true,
            width:270,
            height:130,
            layout:"form",
            listeners:{
                "render":function(_panel){
                    _panel.add({xtype:"textfield",fieldLabel:"姓名"});
                    _panel.add(new Ext.form.TextField({
                       id:"txt_address",
                       fieldLabel:"地址"
                   }));
                }
            }
        });

        _panel.addButton({text:"确定"});
        _panel.addButton(new Ext.Button({text:"取消",minWidth:100})) ;

        _panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
            tag:"div",
            cls:"contain",
            cn:[{
                tag:"div",
                cls:"center"
            }]
        },true).child("div")) ;
    });
</script>

 2.0之后新式写法
<script type="text/javascript">
    Ext.onReady(function() {
        var _panel = new Ext.Panel({
            title:"登录",
            frame:true,
            width:260,
            height:130,
            layout:"form",
            labelWidth:40,
            defaults:{xtype:"textfield",width:180},
            items:[{fieldLabel:"帐号"},{fieldLabel:"密码"}],
            buttons:[{text:"确定"},{text:"取消"}]
        });

        _panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
            tag:"div",
            cls:"contain",
            cn:[{
                tag:"div",
                cls:"center"
            }]
        },true).child("div")) ;
    });
</script>

4：window
<script type="text/javascript">
    Ext.onReady(function() {
        var _window = new Ext.Window({
            title:"登录",
            frame:true,
            plain:true,
            resizable:false,
            buttonAlign:"center",
            width:260,
            height:130,
            layout:"form",
            labelWidth:40,
            closeAction:"hide",
            defaults:{xtype:"textfield",width:180},
            bodyStyle:"padding-top:6px;padding-left:6px",
            items:[{fieldLabel:"帐号"},{fieldLabel:"密码"}],
            buttons:[{text:"确定"},{text:"取消",handler:function(){
               _window.hide();
            }}],
            listeners:{
                "show":function(){
                    alert("show is happened!");
                },
                "hide":function(){
                    alert("hide is happened!");
                },
                "close":function(){
                    alert("close is happened!")
                }
            }
        });
    _window.show();
    });
</script>