Ext入门(Window、Panel、Viewport、Grid、Form、TreePanel)

在Window、Panel、Viewport、Grid、Form、TreePanel这些组件中Window是用show方法显示出来，Viewport不需要指定renderTo，其他的都需要指定。

        //Window
        Ext.onReady(function()
        {
            var win = new Ext.Window(
                {
                    500,
                    height:400,
                    title:'第一个窗体',
                    buttons:[{text:"确定"},{text:"取消"}]
                });
                win.show();
        });

        //Panel
        Ext.onReady(function(){
            var panel = new Ext.Panel({
                500,
                height:200,
                title:"面板头部Header",
                html:'<h1>面板主区域</h1>',
                //autoLoad:{url:'index.html'},
                tbar:[{pressed:true,text:'刷新'}],
                bbar:[{text:'底部工具栏bottomtoolbar'}],
                buttons:[{text:"按钮位于footer"}]
            });
            
            panel.render('test'); //渲染到id为test的div上

            alert(panel.el.dom.innerHTML);
            alert(panel.el.dom.outerHTML);
            alert(document.body.innerHTML);

            panel.body.update(
                "<h1><font color='blue'>EXT 主面板</font></h1>",true,function(){}
            );
            panel.load({
                url:'index.html',
                params:{name:"daxia",pwd:"123"},
                scope: this,
                discardUrl: false,
                nocache: false,
                text: "正在加载，请稍候...",
                timeout: 30,
                scripts: true
            });
        });
        
        //Panel中renderTo、applyTo、contentEl的区别renderTo和applyTo是把面板渲染到制定的div的节点上，contentEl是配置选项来把页面中的某一个DIV 的内容作为面板的内容
        Ext.onReady(function(){
            var panel = new Ext.Panel({
                title:'面板',
                500,
                height:300,
                renderTo:'c',
                contentEl:'tt'
            });

            alert(document.body.innerHTML);
        });

        //ViewPort
        //简单的viewport面板，不需要在制定renderTo
        Ext.onReady(function(){
            new Ext.Viewport({
                layout:'fit',
                items:[{
                    title:'Viewport面板',
                    html:'面板body',
                    bbar:[{text:'按钮1'},{text:'按钮2'}]
                }]
            });
        });

        Ext.onReady(function(){
            new Ext.Viewport({
                enableTabScroll:true,
                layout:'border',
                items:[
                {
                    title:'面板',
                    region:'north',
                    height:200,
                    html:'<h1>网站后台管理系统</h1>'
                }
                ,{
                    title:'菜单',
                    region:'west',
                    300,
                    collapsible:true,
                    html:'菜单栏'
                },
                {
                    xtype:'tabpanel',
                    region:'center',
                    items:[{title:'面板1'},{title:'面板2'}]
                }]
            });
        });
        
        //对话框
        function confirmDialog()
        {
            Ext.Msg.confirm('提示','是否要删除',function(button){
                alert("选择的结构："+(button=='yes'?'是':'否'));
            });
        }

        function inputDialog()
        {
            Ext.MessageBox.prompt("输入你的名字","请输入你的名字:",function(button,text){
            if(button=="ok"){
            alert("输入的名字:"+text);
            }
            else alert("你放弃输入 !");
            });
        }

        var t=0;
        function progress()
        {
            t=0;
            var msgbox = Ext.Msg.progress('请稍后','保存数据','请稍候，正在保存数据......');
            updateProgress();
        }

        function updateProgress()
        {
            t+=0.1;
            Ext.Msg.updateProgress(t);
            if(t>1)
                Ext.Msg.hide();
            else
                updateProgress.defer(1000);
                
        }
        
        function doSave(button,text)
        {
            if(button="yes")
            {
                progress();
            }
            else if(button=="no")
            {

　　　　　　//不保存数据
            }
            else
            {
                //取消当前操作
            }
        }

        function save()
        {
            Ext.Msg.show({
                title:'保存数据',
                msg:'是否要保存修改的数据？',
                buttons:Ext.Msg.YESNOCANCEL,
                fn:doSave,
                icon:Ext.MessageBox.QUESTION
            });
        }

        //TabPanel
        Ext.onReady(function(){
            var i=0;
            var tab = new Ext.TabPanel({
                renderTo:'tt',
                500,
                height:300,
                enableTabScroll:true,
                activeTab:true,
                bbar:[{text:'添加',handler:function(){
                    tab.add({title:'新面板'+i++,closable:true,html:'this is the new '+i+' Panel！'});
                }
                }],
                items:[{title:'面板1',html:'this is first Tabpanel!'},{closable:true,title:'面板2',html:'this is second TabPanel!'},{closable:true,title:'面板3',html:'this is third TabPanel!'}]
            });
        });

        //Grid
        Ext.onReady(function(){
            var data =[
                [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],
                [2, 'jfox', 'huihoo','www.huihoo.org'],
                [3, 'jdon', 'jdon','www.jdon.com'],
                [4, 'springside','springside','www.springside.org.cn']
            ];
            var store = new Ext.data.SimpleStore({data:data,fields:['id','name','organization','homepage']});
            var grid = new Ext.grid.GridPanel({
                renderTo:'tt',
                title:'中国Java开源产品及团队',
                height:150,
                600,
                columns:[{header:'项目名称',dataIndex:'name'},
                    {header:'开发团队',dataIndex:'organization'},
                    {header:'网址',dataIndex:'homepage'}
                ],
                store:store,
                autoExpandColumn:2
            });
        });

        //TreePanel
        Ext.onReady(function(){
            var root = new Ext.tree.TreeNode({
                id:'root',
                text:'树的根'
            });

            root.appendChild(new Ext.tree.TreeNode({
                id:'c1',
                text:'子节点'
            })
            );

            var tree = new Ext.tree.TreePanel({
                renderTo:'test',
                100,
                root:root
            });
        });

        //form
        Ext.onReady(function(){
            var f = new Ext.form.FormPanel({
                renderTo:'test',
                300,
                height:200,
                title:'用户信息录入',
                labelWidth:60,
                labelAlign:'right',
                frame:true,
                defaults:{xtype:'textfield',180},
                items:[
                    {name:'username',fieldLabel:'姓名'},
                    {name:'password',fieldLabel:'密码',inputType:'password'},
                    {name:'email',fieldLabel:'电子邮件'},
                    {xtype:'textarea',name:'intro',fieldLabel:'简介'}
                ],
                buttons:[{text:'提交',handler:function(){
                    f.form.submit({
                        waitTitle:'请稍候',
                        waitMsg:'正在提交表单数据，请稍候......'
                    });
                }},
                {text:'重置',handler:function(){
                    f.form.reset();
                }
                }]
            });
        });