Extjs基础

1.border layout

 

Ext.onReady(function(){
            new Ext.Viewport({
                enableTabScroll:true,
                layout:"border",
                items:[
                //东边面板
                new Ext.Panel({title:"东部",region:"east",layout:"fit",width:150}),
                //南边面板
                new Ext.Panel({title:"南部",region:"south",layout:"fit",height:150}),
                //西边面板
                new Ext.Panel({title:"西部",region:"west",layout:"fit",width:150}),
                //北边面板
                new Ext.Panel({title:"北部",region:"north",layout:"fit",height:150}),
                //中央面板
                new Ext.TabPanel({region:"center",items:[new Ext.Panel({title:"面板一"}),new Ext.Panel({title:"面板二"})]})]
            });
        });

 

2.panel

 

Ext.onReady(function(){
            var panel = new Ext.Panel({title:'panel',height:200,width:150,html:'<h>djlfj</h>'});
            panel.render("panel");
        });

 

var panel = new Ext.Panel({title:"panel标题",height:200,width:400,html:"页体内容",
                        tbar:[{text:"顶部工具栏1"}],bbar:[{text:"底部工具栏"}],buttons:[{text:"按钮位于底部"}]});
            panel.render("panel");

<div id ="panel"></div>

 

3.tabpanel

var tab1 = new Ext.TabPanel({title:"tabpanel1",height:150,width:200,

items:[{title:'tab1',height:30},{title:'tab2',height:30}]});
            var tab2 = new Ext.TabPanel({title:"tabpanel1",height:150,width:200,

items:[new Ext.Panel({title:'tab1',height:30}),new Ext.Panel({title:'tab2',height:30})]});
            tab1.render("tab1");
            tab2.render("tab2");

 

<div id="tab1"></div>
    <div id="tab2"></div>

4.无法关闭的窗口

Ext.onReady(function(){
            var win = new Ext.Window({title:'不能关闭的窗口',height:150,width:200,
                listeners:{"beforedestroy":function (obj){alert("你关闭不了我");obj.show();return false}}});
            win.show();
        });

5.面板工具栏

var panel = new Ext.Panel({title:"panel标题",height:200,width:400,html:"页体内容",
                        tbar:[{text:"刷新"}],
                        tools:[{id:"save"},{id:"help",handler:function(){Ext.Msg.alert("help","pls help me");}},{id:"search"},{id:"close"}]});
            panel.render("panel");

6.tbfill和tbseparator

var panel = new Ext.Panel({title:"panel标题",height:200,width:400,html:"页体内容",
                        tbar:[new Ext.Toolbar.TextItem("工具栏"),{xtype:"tbfill"},{text:"添加",pressed:true},{xtype:"tbseparator"},{text:"保存",pressed:true}],
                        });
            panel.render("panel");

7.创建窗口

Ext.onReady(function(){
       
            var newwinbtn = Ext.get("newwinbtn");
            newwinbtn.on("click",newWin);
            var i = 1;
               
            function newWin(){
                var win = new Ext.Window({
                    title:"new win" + i++,
                    height:400,
                    width:400,
                    minimizable:true,
                    maximizable:true
                });
                win.show();
            }
        });

<input type="button" value="新窗口" id="newwinbtn"/>

 

8.Ext.WindowGroup管理窗口

Ext.onReady(function(){
       
            var newwinbtn = Ext.get("newwinbtn");
            var sendbackbtn = Ext.get("sendbackbtn");
            var hidebtn = Ext.get("hidebtn");
            newwinbtn.on("click",newWin);
            sendbackbtn.on("click" , sendBackWin);
            hidebtn.on("click" , hideWin);
            var i = 1 , mygroup= new Ext.WindowGroup();
               
            function newWin(){
                var win = new Ext.Window({
                    title:"new win" + i++,
                    height:400,
                    width:400,
                    minimizable:true,
                    maximizable:true,
                    manager:mygroup
                });
                win.show();
            }
            function sendBackWin()
            {
                mygroup.sendToBack(mygroup.getActive());
            }
            function hideWin()
            {
                mygroup.hideAll();
            }
        });

 

9.消息框

function showAlert()
        {
            Ext.MessageBox.alert("测试","这是extjs消息框一个例子");
        }
        function showConfirm()
        {
            Ext.MessageBox.confirm("请确认" , "真是是否删除该记录？？" ,confirmCallback );
        }
        function confirmCallback(button , text)
        {
            if(button == "yes")
                Ext.Msg.alert("成功删除") ;
        }
        function showPrompt()
        {
            Ext.MessageBox.prompt("你是谁？" , "请输入你的姓名" ,
            function(button , text)
            {
                if(button == "ok")
                    Ext.Msg.alert("你的姓名是：" + text);
                else
                    Ext.Msg.alert("真失望，不认识自己是...");
            });
        }
        Ext.onReady(function(){
            var alert = Ext.get("alert");
            alert.on("click",showAlert);
            var confirm = Ext.get("confirm");
            confirm.on("click" ,showConfirm);
            var prompt = Ext.get("prompt");
            prompt.on("click", showPrompt);
        });

 

10.column布局

Ext.onReady(function(){
            //--
            var panel = new Ext.Panel({
                title:"columnLayout面板",
                layout:"column" ,
                height:200,
                width:500,
                //--
                items:[
                    new Ext.Panel({title:"col_one",columnWidth:.2}),
                    new Ext.Panel({title:"col_two",columnWidth:.4}),
                    new Ext.Panel({title:"col_three",columnWidth:.2}),
                    new Ext.Panel({title:"col_four",columnWidth:.2})
                ]
                //--   
            });
            //--
            panel.render("columnlayoutpanel");
        });

11.fit 布局

fit布局有多个子元素，但容器只会显示一个子元素

Ext.onReady(function(){
            //--
            var panel = new Ext.Panel({
                title:"columnLayout面板",
                layout:"fit" ,
                height:200,
                width:500,
                //--
                items:[
                    new Ext.Panel({title:"col_one"}),
                    new Ext.Panel({title:"col_two"}),
                    new Ext.Panel({title:"col_three"}),
                    new Ext.Panel({title:"col_four"})
                ]
                //--   
            });
            //--
            panel.render("columnlayoutpanel");
        });

11.form 布局

Ext.onReady(function(){
            //--
            var form1 = new Ext.Panel({
                title:"普通面板构造，布局Form",
                layout:"form" ,
                height:200,
                width:300,
                defaultType:"textfield",
                //--
                items:[
                    {fieldLabel:"请输入你的名字",name:"name"},
                    {fieldLabel:"请输入你的年龄",name:"age"}
                ]
                //--
            });
            //--
            //--
            var form2 = new Ext.form.FormPanel({
                title:"FormPanel构造的容器",
                height:200,
                width:300,
                defaultType:"textfield",
                //--
                items:[
                    {fieldLabel:"请输入你的名字",name:"name"},
                    {fieldLabel:"请输入你的年龄",name:"age"}
                ]
                //--
            });
            //--
            form1.render("form1");
            form2.render("form2");
        });

12.accordion布局

Ext.onReady(function(){
            //--
            var panel = new Ext.Panel({
                title:"",
                height:500,
                width:200,
                layout:"accordion",
                layoutConfig:{
                    animate:true
                },
                //--
                items:[
                    {title:"栏目一",html:"栏目一内容"},
                    {title:"栏目二",html:"栏目二内容"},
                    {title:"栏目三",html:"栏目三内容"},
                    {title:"栏目四",html:"栏目四内容"}
                ]
                //--
            });
            //--
            panel.render("accordionpanel");
        });

13.table布局

Ext.onReady(function(){
            //--
            var panel = new Ext.Panel({
                title:"",
                height:200,
                width:500,
                layout:"table",
                layoutConfig:{
                    columns:3
                },
                //--
                items:[
                    {title:"栏目一",html:"栏目一内容",rowspan:2,height:200},
                    {title:"栏目二",html:"栏目二内容",colspan:2,height:100},
                    {title:"栏目三",html:"栏目三内容",height:100},
                    {title:"栏目四",html:"栏目四内容",height:100}
                ]
                //--
            });
            //--
            panel.render("accordionpanel");
        });