练习用的JS

function setStyle(){
    Ext.fly('myBtn').on({'click':function(){
        //Ext.fly('myDiv').setStyle('backgroundColor','#ff0000');    
        Ext.fly('myDiv').highlight();
    }});
    Ext.fly('myDiv').addClassOnOver('div_mouse_on');
}

function appendAsTag(){
    var str='<ul><li>玉带桥边鸟鸟风，</li>';
    str+='<li>牧童横笛边桥东</li>';
    str+='<li>夕阳返照校花坞</li>';
    str+='<li>柳絮飞来片片红</li>';
    Ext.DomHelper.append('myDiv2',str);
}

function appendAsObj(){
    var obj={
        tag:'ul',
        children:[
        {tag:'li',html:'少年听雨歌楼上，红烛昏罗帐。'},
        {tag:'li',html:'壮年听雨客舟中，江阔云低，断雁叫西风。'},
        {tag:'li',html:'而今听雨僧庐下，鬓已星星也。'},
        {tag:'li',html:'悲欢离合总无情，一任阶前点滴到天明。  '}
        ]
    };
    Ext.DomHelper.append('myDiv2',obj);
}

function testInsert(){
    var str='<ul><li>人生若只如初见</li>';
    str+='<li>何事秋风悲画扇</li></ul>';
    Ext.DomHelper.append('beforeBegin',Ext.getDom('myDiv'),str);
}

function testOverwrite(){
    var str='<ul><li>人生若只如初见</li>';
    str+='<li>何事秋风悲画扇</li></ul>';
    Ext.DomHelper.overwrite('myDiv',str);
}

function testTemplate(){
    var tpl=Ext.DomHelper.createTemplate('<li>{content}</li>');
    tpl.overwrite('myDiv',{content:'劝君更尽一杯酒 西出阳关无故人'});
}


function testElementSelect(){
    var win=Ext.Window({
        id:'myWin',
        title:'DomQuery',
        width:300,
        height:400,
        renderTo:Ext.getBody(),
        bbar:[
        {
            test:'元素选择器',
            handler:function(){
                var el=Ext.DomQuery.selectNode('*');
                //var el=Ext.query('*');
                alert(el.innerHTML);
            }
        }
        ]
    });
    win.show();
}

function testSelect(){
    var trs=Ext.query('tr:even');
    Ext.each(trs,function(tr){
        tr.style.backgroundColor='#ffff00';
    });
}

function ns(pkg){
    if(!pkg){
        return null;
    }
    var o={};
    var result=o;
    var arr=pkg.split('.');
    o=o[arr[0]]={};
    var len=arr.length;
    for(var i=1;i<len;i++){
        o=o[arr[i]]={};
    }
    return result;
}


function Ajax_Func1() {
    new Ext.Button({
        renderTo: "div1",
        text: "后台Ajax提交",
        handler: function () {
            Ext.Ajax.request({
                url: 'Ajax_Func1.do',
                headers: {
                    'userHeader': 'userMsg'
                },
                params: { a: 10, b: 20 },
                method: 'GET',
                success: function (response, options) {
                    Ext.MessageBox.alert('成功', '从服务端获取结果: ' + response.responseText);
                },
                failure: function (response, options) {
                    Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);
                }
            });
        },
        id: "bt1"
    });
}

function ajaxlogin() {
    new Ext.Button({
        renderTo: "div1",
        text: "后台Ajax提交",
        handler: function () {
            Ext.Ajax.request({
                url: 'login.do?method=query',
                headers: {
                    'userHeader': 'userMsg'
                },
                params: { a: 10, b: 20 },
                method: 'GET',
                success: function (response, options) {
                    Ext.MessageBox.alert('成功', '从服务端获取结果: ' + response.responseText);
                },
                failure: function (response, options) {
                    Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);
                }
            });
        },
        id: "bt1"
    });
}

function requestJson(){
    Ext.Ajax.request({
    url:'test.json',
    disableCaching:true,
    success:function(response,opts){alert(response.responseText);},
    failure:function(response,opts){alert('加载数据失败 ');}
    });
}
function requestXml(){
    Ext.Ajax.request({
        url:'testdata.xml',
        success:function(response,opts){
            var reader =new Ext.data.XmlReader({
                totalProperty:'results',
                record:'row',
                idProperty:'id',
                messageProperty:'msg'
            },Ext.data.Record.create([
            {name:'name'},{name:'occupation'}
            ]));
            alert(Ext.encode(reader.read(response)));
        },
        failure:function(){
            alert('加载数据失败 ');
        }
    });
}

function sendReq(){
    var result;
    var successHandler=function(response,opts){
        result=response.responseText;
    }
    var failureHandler=function(response,opts){
        alert('加载数据失败');
    }
    Ext.Ajax.request({
        url:'http://www.google.com.hk',
        success:successHandler,
        failure:failureHandler
    });
    
}


function loadImg(){
    var img=document.createElement('img');
    img.width=700,
    img.height=700,
    img.src='images/XX.jpg',
    document.body.appendChild(img);
}

function loadJs(){
    var headTag=document.getElementsByTagName('HEAD')[0];
    var scriptTag=document.createElement('script');
    scriptTag.type='text/javascript';
    scriptTag.src='basejs/study/DynamicLoad.js',
    headTag.appendChild(scriptTag);
}
function insertScript(source){
    var headTag=document.getElementsByTagName('HEAD')[0];
    var scriptTag=document.createElement('script');
    scriptTag.type='text/javascript';
    scriptTag.text=source,
    headTag.appendChild(scriptTag);
}
function ajaxInsertScript(){
    Ext.Ajax.request({
        url:'basejs/study/DynamicLoad.js',
        success:function(response,opts){
            var result=response.responseText;
            insertScript(result);
        },
        failure:function(){
            alert('加载失败');
        }
    });
}

function extMsgts1(){
    var fn=function(){
    //alert('导致脚本挂起，后续代码无法运行');
    Ext.Msg.alert('友情提示','Ext.Msg不会导致脚本挂起');
    Ext.DomHelper.insertHtml('beforeEnd',Ext.getBody().dom,'执行到这里没有');
    }
    fn();
}
function extMsgts2(){
    Ext.Msg.show({
        title:'提示',
        msg:'此操作无法回退，是否继续',
        buttons:Ext.Msg.YESNO,
        fn:function(btnId,text,opt){
            if(btnId=='yes'){
                Ext.DomHelper.insertHtml('beforeEnd',Ext.getBody().dom,'您选择的继续操作');
            }else if(btnId='no'){
                Ext.DomHelper.insertHtml('beforeEnd',Ext.getBody().dom,'取消操作');
            }
        },
        icon:Ext.Msg.WARNING
    });
}
function extMsgts3(){
    Ext.Msg.show({
        title:'提示',
        msg:'您的姓名是',
        buttons:Ext.Msg.OK,
        prompt:true,
        fn:function(btnId,text,opt){
            Ext.DomHelper.insertHtml('beforeEnd',Ext.getBody().dom,'您的名字是'+text);
        },
        icon:Ext.Msg.QUESTION,
        width:300
    });
}

function extProgressBarts1(){
    var pbar=new Ext.ProgressBar({
        id:'pbar',
        width:300,
        renderTo:Ext.getBody()
    });
    
    pbar.wait({
        interval:200,
        increment:15,
        duration:5000,
        text:'加载中，请稍后...'
    });
}
function extProgressBarts2(){
    var pbar=new Ext.ProgressBar({
        id:'pbar',
        width:300,
        renderTo:Ext.getBody()
    });    
    var i=0;
    var task={
        run:function(){
            i+=0.1;
            pbar.updateProgress(i,'加载进度：'+Math.round(i*100)+'%');
            if(Math.round(i*100)==100){
                pbar.updateText('加载完成');
                Ext.TaskMgr.stop(task);
            }
        },
        interval:500
    }
    Ext.TaskMgr.start(task);
}

function extBarts1(){
    var win=new Ext.Window(    {
        title:'测试工具条',
        width:400,
        height:300,
        bbar:['->',{text:'被靠右了'}]
    });
    win.show();
}


function extPanelts1(){
    var contentWin=null;
    var panel=new Ext.Panel({
        title:'基础Panel',
        width:400,
        height:300,
        collapsible:true,
        html:'问渠哪得清如许，为有源头活水来',
        renderTo:Ext.getBody(),
        bbar:[{
            text:'诗歌内容',
            handler:function(){
                if(!contentWin){
                    contentWin=new Ext.Window({
                        //id:'poeamWin',
                        title:'诗歌内容',
                        width:400,
                        height:300,
                        closeAction:'hide',
                        maximizable:true,
                        minimizable:true,
                        constrain:true,
                        plain:true,
                        html:panel.body.dom.innerHTML
                    });                    
                }

                contentWin.show();
            }
        }]
    });
}

function extTabPanel(){
    var nodes={
        text:'日月神教',
        expanded:true,
        leaf:false,
        children:[
        {id:'boss',text:'任我行',leaf:true},
        {id:'gg',text:'令狐冲',leaf:true},
        {id:'mm',text:'任盈盈',leaf:true}
        
        ]
    };

    
    var rightTab=new Ext.TabPanel({
        id:'rightTab',
        region:'center'
    });
    
    var loadNodeInfo=function(node,e){
        var id=node.attributes.id;
        if(!id){
            Ext.Msg.alert('提示信息','节点必须设置唯一的id');
            return;
        }
        var comp=rightTab.getComponent(id);
        if(!comp){
            comp=new Ext.Panel({
                id:id,
                title:node.attributes.text||'',
                html:node.attributes.text
            });
            rightTab.add(comp);
        }
        rightTab.setActiveTab(comp);
        rightTab.setAutoScroll(comp);
    }
    
    var leftTree=new Ext.tree.TreePanel({
        id:'leftTree',
        title:'左侧树',
        region:'west',
        root:nodes,
        width:200,
        autoScroll:true,
        split:true,
        rootVisible:true,
        collapsible:true,
        listeners:{'click':loadNodeInfo}
    });
    
    var vp=new Ext.Viewport({
        layout:'border',
        items:[leftTree,rightTab]
    });
}
function extTabPanel2(){
    var nodes={
        text:'日月神教',
        expanded:true,
        leaf:false
    };

    
    var rightTab=new Ext.TabPanel({
        id:'rightTab',
        region:'center'
    });
    
    var loadNodeInfo=function(node,e){
        var id=node.attributes.id;
        if(!id){
            Ext.Msg.alert('提示信息','节点必须设置唯一的id');
            return;
        }
        var comp=rightTab.getComponent(id);
        if(!comp){
            comp=new Ext.Panel({
                id:id,
                //autoLoad:{url:'login.jsp'},
                title:node.attributes.text||'',
                //html:'<iframe src="upload.jsp" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>'
                html:'<iframe src="'+node.attributes.page+'" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>'
            });
            rightTab.add(comp);
        }
        rightTab.setActiveTab(comp);
        rightTab.setAutoScroll(comp);
    }
    
    var leftTree=new Ext.tree.TreePanel({
        id:'leftTree',
        title:'左侧树',
        region:'west',
        root:{text:'日月神教',expanded:true,leaf:false},
        dataUrl:'tree.jsp',
        width:200,
        autoScroll:true,
        split:true,
        rootVisible:true,
        collapsible:true,
        listeners:{'click':loadNodeInfo}
    });
    
    var vp=new Ext.Viewport({
        layout:'border',
        items:[leftTree,rightTab]
    });
}

function extRecord(){
        var store=new Ext.data.ArrayStore({
        fields:[
            {name:'userName'},
            {name:'age'},
            {name:'date'},
            {name:'addr'}
        ]
    });
    
    var grid=new Ext.grid.GridPanel({
        viewConfig:{forceFit:true},
        store:store,
        columns:[
            {header:'姓名',dataIndex:'userName'},
            {header:'年龄',dataIndex:'age'},
            {header:'出生日期',dataIndex:'date'},
            {header:'地址',dataIndex:'addr'}
        ]
    });
    
    var win=new Ext.Window({
        title:'baseGrid',
        width:600,
        height:400,
        layout:'fit',
        items:grid,
        buttons:[
            {
                text:'newRecord',
                handler:function(){
                    var User=new Ext.data.Record.create([
                        {name:'userName'},
                        {name:'age'},
                        {name:'date'},
                        {name:'addr'}
                    ]);
                    var record=new User({
                        userName:'大漠穷秋',
                        age:'25',
                        date:'1985-10-10',
                        addr:'亚信联创'
                    });
                    store.add(record);
                }
            }
        ]
    });
    win.show();
}

function extRecord2(){
    var data=[
    ['大漠穷秋1',25,'1986-04-02','我不告诉你'],
    ['大漠穷秋2',25,'1985-04-02','我不告诉你'],
    ['大漠穷秋3',25,'1984-04-02','我不告诉你'],
    ['大漠穷秋4',25,'1983-04-02','我不告诉你'],
    ['大漠穷秋5',25,'1982-04-02','我不告诉你']
    ];
    
    var store=new Ext.data.ArrayStore({
        fields:[
        {name:'userName'},
        {name:'age'},
        {name:'date'},
        {name:'addr'}
        ]
    });
    
    store.loadData(data);
    var grid=new Ext.grid.GridPanel({
        viewConfig:{forceFit:true},
        store:store,
        columns:[
        {header:'姓名',dataIndex:'userName'},
        {header:'年龄',dataIndex:'age'},
        {header:'出生日期',dataIndex:'date'},
        {header:'地址',dataIndex:'addr'}
        ]
    });
    
    var win=new Ext.Window({
        title:'CopyRecord',
        width:400,
        height:300,
        layout:'fit',
        items:grid,
        buttons:[{
            text:'CopyRecode',
            handler:function(){
                var record=grid.getSelectionModel().getSelected();
                if(!record){
                    Ext.Msg.alert('友情提示','请选中需要copy的记录')
                    return;
                }
                var newRecord=record.copy();
                //alert(Ext.encode(record));//Uncaught RangeError: Maximum call stack size exceeded
                alert(Ext.encode(newRecord));
            }
        }]
    });
    win.show();
}


function extFormPanel(){
    var data=[
    ['大漠穷秋1',25,'1086-04-02','你猜1',false],
    ['大漠穷秋2',25,'1085-04-02','你猜2',false],
    ['大漠穷秋3',25,'1084-04-02','你猜3',true],
    ['大漠穷秋4',25,'1083-04-02','你猜4',true],
    ['大漠穷秋5',25,'1082-04-02','你猜5',false]
    ];
    var store=new Ext.data.ArrayStore({
        fields:[
        {name:'userName'},
        {name:'age'},
        {name:'date'},
        {name:'addr'},
        {name:'marrage',type:'boolean'}
        ]
    });
    store.loadData(data);
    var grid=new Ext.grid.GridPanel({
        viewConfig:{
            forceFit:true
        },
        border:false,
        store:store,
        sm:new Ext.grid.RowSelectionModel({
            singleSelect:true,
            listeners:{
                rowselect:function(sm,row,rec){
                    Ext.getCmp('fm').getForm().loadRecord(rec);
                }
            }
        }),
        columns:[
        {header:'姓名',dataIndex:'userName'},
        {header:'年龄',dataIndex:'age'},
        {header:'出生日期',dataIndex:'date'},
        {header:'地址',dataIndex:'addr'},
        {header:'婚否',dataIndex:'marrage',
            renderer:function rating(v){
                if(v){
                    return '<span style="color:red;">是</span>';
                }
                return '<span style="color:green;">否</span>';
            }
        }
        ]
    });
    
    var form=new Ext.FormPanel({
        id:'fm',
        border:false,
        bodyStyle:{'padding':'30 10'},
        defaults:{width:120},
        labelWidth:80,
        items:[
        {fieldLabel:'姓名',
            name:'userName',
            hiddenName:'userName',
            xtype:'textfield'
        },{
            fieldLabel:'年龄',
            name:'age',
            hiddenName:'age',
            xtype:'textfield'
        },{
            fieldLabel:'出生日期',
            name:'date',
            hiddenName:'date',
            xtype:'textfield'
        },{
            fieldLabel:'地址',
            name:'addr',
            hiddenName:'addr',
            xtype:'textfield'
        },{
            xtype:'radiogroup',
            columns:'auto',
            fieldLabel:'婚否',
            name:'marrage',
            hiddenName:'marrage',
            items:[
            {
                inputValue:'true',
                boxLabel:'是'
            },{
                inputValue:'false',
                boxLabel:'否'
            }
            ]
        }
        
        ]
    });
    
    var win=new Ext.Window({
        title:'RecordAndForm',
        width:600,
        height:400,
        layout:'column',
        layoutConfig:{
            padding:'5',align:'middle'
        },
        items:[
        {
            columnWidth:0.60,
            height:400,
            layout:'fit',
            items:[grid]
        },{
            columnWidth:0.40,
            height:400,
            layout:'fit',
            items:[form]
        }
        ]
    });
    win.show();
}


function extStoreFilter(){
    var data=[
    ['大漠穷秋',25,'1985-04-02','我不告诉你'],
    ['漠漠',26,'1984-04-02','我不告诉你'],
    ['月光漠利亚',27,'1983-04-02','我不告诉你'],
    ['桃花岛|漠漠',28,'1982-04-02','我不告诉你']
    ];
    var store=new Ext.data.ArrayStore({
        fields:[
        {name:'name'},
        {name:'age'},
        {name:'date'},
        {name:'addr'}
        ]
    });
    store.loadData(data);
    var grid=new Ext.grid.GridPanel({
        viewConfig:{forceFit:true},
        store:store,
        columns:[
        {header:'姓名',dataIndex:'name'},
        {header:'年龄',dataIndex:'age'},
        {header:'出生日期',dataIndex:'date'},
        {header:'地址',dataIndex:'addr'}
        ]
    });
    
    var singleFn=function(){
        var val=Ext.getCmp('name').getValue();
        if(!val){
            store.clearFilter();return;
        }
        store.filter('name',val,true,true);
    }
    var multiFn=function(){
        var name=Ext.getCmp('name').getValue();
        var age=Ext.getCmp('age').getValue();
        store.filter([
        {property:'name',value:name,anyMatch:true,caseSensitive:true},
        {property:'age',value:age}
        ]);
    }
    var win=new Ext.Window({
    
        title:'过虑记录',
        width:600,
        height:400,
        layout:'fit',
        items:grid,
        buttons:[
        {xtype:'label',text:'姓名'},
        {xtype:'textfield',id:'name',width:80},
        {xtype:'label',text:'年龄'},
        {xtype:'textfield',id:'age',width:80},
        {handler:singleFn,text:'按姓名过滤'},
        {handler:multiFn,text:'联合过滤'},
        {handler:function(){store.clearFilter();},text:'重置'}
        ]
    });
    
    win.show();
}


function extTreets(){
    var tree={
        id:'001',
        text:'根',
        children:[
        {id:'002',text:'c1'},
        {id:'003',text:'c2'},
        {id:'004',text:'c3',
            children:[{id:'005',text:'s1'},{id:'006',text:'s2'}]
        }
        ]
    };
    
    function println(msg){
        var p=document.createElement('p');
        p.innerHTML=msg;
        document.body.appendChild(p);
    }
    
    function visit(node){
        println(node.id+"-->"+node.text);
        if(node.children&&node.children.length){
            for(var i=0;i<node.children.length;i++){
                visit(node.children[i]);
            }
        }
    }
    
    visit(tree);
}

function extTreets2(){
    var tree={
        id:'001',
        text:'根',
        children:[
        {id:'002',text:'子1'},
        {id:'003',text:'子2'},
        {id:'004',text:'子3',
            children:[{id:'005',text:'孙1'},{id:'006',text:'孙2'}]
        }
        ]
    };
    
    function println(msg){
        var p=document.createElement('p');
        p.innerHTML=msg;
        document.body.appendChild(p);
    }
    
    function doFind(node,name,value,result){
        if(node[name]==value){
            result.push(node);
            return;
        }if(node.children&&node.children.length){
            for(var i=0;i<node.children.length;i++){
                doFind(node.children[i],name,value,result);
            }
        }
    }
    function find(name,value){
        var result=[];
        doFind(tree,name,value,result);
        return result[0];
    }
    var node=find('text','孙1');
    println(node.text);
}
function extTreets3(){
    var nodes=[
    {text:'任我行',leaf:true},
    {text:'令狐冲',leaf:true},
    {text:'任盈盈',leaf:true}
    ];
    var treePanel=new Ext.tree.TreePanel({
        border:false,
        autoScroll:true,
        root:{text:'日月神教',leaf:false,expanded:true,children:nodes},
        rootVisible:true
    });
    var win=new Ext.Window({
        title:'树',
        width:200,
        height:400,
        layout:'fit',
        items:[treePanel],
        buttons:[
        {
            text:'增加',
            handler:function(){
                var newNode=new Ext.tree.TreeNode({
                    text:'新节点'+(treePanel.root.childNodes.length+1),
                    leaf:true
                });
                treePanel.root.appendChild(newNode);
            }
        },{
            text:'移动',
            handler:function(){
                var ryy=treePanel.root.childNodes[2];
                treePanel.root.appendChild(ryy);
            }
        }
        ]
    });
    win.show();
}


function uploadts2(){
var formPanel = new Ext.form.FormPanel({
            renderTo:Ext.getBody(),
            labelAlign : 'right',
            labelWidth : 60,
            frame : true,
            border : false,
            fileUpload : true,
            width:300,
            height:100,
            items : [{
                        xtype : 'textfield',
                        inputType : 'file',
                        name:'file'
                    }],
            buttons : [{
                        text : '上传',
                        iconCls : 'icon_uploading',
                        handler : function() {
                            if (!formPanel.getForm().isValid()) {
                                Ext.MessageBox.alert("信息", "表单输入验证失败，请正确填写完整！");
                                return;
                            }

                            formPanel.form.submit({
                                        waitMsg : 'Uploading ....',
                                        url : 'struts_fileupload.do',
                                        method : "POST",
                                        success : function(form, action) {
                                            Ext.Msg.alert('success');
                                        },
                                        failure : function(form, action) {
                                            Ext.Msg.alert('error');
                                        }
                                    });

                        }
                    }]
        });
        
    var win=new Ext.Window({
        width:300,
        height:100,
        layout:'fit',
        items:[formPanel]

    });
    win.show();        
}










//************************************