Extjs基础常用应用

[javascript][/javascript]

  1. //ext提示框
  2. function check1(){
  3.     Ext.MessageBox.alert(‘提示’,‘Hello word!’);
  4. }
[javascript][/javascript]


  1. //调用回调函数  
  2. function check2() {  
  3.     Ext.MessageBox.alert(‘提示’,‘弹出对话窗’,function(){  
  4.         document.write(“调用回调函数”);  
  5.     });  
  6. }  
[javascript][/javascript]


  1. //对按钮进行判断  
  2. function check3() {  
  3.     Ext.MessageBox.alert(‘提示’,‘判断按钮’,function(e){  
  4.         if(e == ‘ok’) {  
  5.             Ext.MessageBox.alert(‘提示’,‘你单击了确定按钮’);  
  6.         } else if(e == ‘cancel’){  
  7.             Ext.MessageBox.alert(‘提示’,‘你单击了取消按钮’);  
  8.         }  
  9.     });  
  10. }  
[javascript][/javascript]


  1. //ext获取接到id  
  2. Ext.onReady(function(){  
  3.     //ext get获取id节点,on添加事件  
  4.     Ext.get(“button5”).on(“click”,function(){  
  5.         Ext.MessageBox.alert(‘提示’,‘你添加了click方法’);  
  6.     });  
  7. });  
[javascript][/javascript]


  1. //ext是否提示框  
  2. function check4() {  
  3.     Ext.MessageBox.confirm(‘保存’,‘是否保持文件?’,function(e) {  
  4.         if(e == “yes”) {  
  5.             Ext.MessageBox.alert(“提示”,“保存文件”);  
  6.         } else if(e == “no”) {  
  7.             Ext.MessageBox.alert(“提示”,“不保存文件”);  
  8.         }  
  9.     });  
  10. }  
[javascript][/javascript]

  1. //提示输入框测试  
  2. function check6() {  
  3.     Ext.MessageBox.prompt(“提示”,“请输入用户名。”);  
  4. }  
[javascript][/javascript]


  1. //输入多行  
  2. function check7() {  
  3.     Ext.MessageBox.prompt(“提示”,“请输入用户信息”,null,null,true,“请在此输入内容。”);  
  4. }  
[javascript][/javascript]


  1. function check8() {  
  2.     Ext.MessageBox.prompt(“提示”,“请输入用户名”,function(e,text){  
  3.         if(e == “ok”) {  
  4.             Ext.MessageBox.alert(“提示”,“你输入内容为”+text);  
  5.         }  
  6.     });  
  7. }  
[javascript][/javascript]


  1. //自己创建对象show()  
  2. function check9(){  
  3.     Ext.MessageBox.show({  
  4.         title:“提示”,  
  5.         msg:“测试内容”,  
  6.         buttons:Ext.MessageBox.OKCANCEL,//按钮  
  7.         icon:Ext.MessageBox.INFO,//背景图片  
  8.         prompt:true,//可以输入文本  
  9.         multiline:true,//可以输入多行文本  
  10.         width:400,  
  11.         defaultTextHeight:150,  
  12.         fn:function(e,text) {  
  13.             if(e == “ok”) {  
  14.                 Ext.Msg.alert(“提示”,“你输入的内容为”+text);  
  15.             }  
  16.         }  
  17.     });  
  18. }  
[javascript][/javascript]


  1. //显示进度条  
  2. function check10() {  
  3.     Ext.MessageBox.show({  
  4.         title:“请等待…”,  
  5.         msg:“5s后进入系统”,  
  6.         progress:true//显现进度条  
  7.         width:500,  
  8.         wait:true//显现进度条  
  9.         waitConfig:{  
  10.             interval:500, //每隔0.5秒进度条加载长度  
  11.             duration:5000, //总共加载长度  
  12.             //进度条加载完成后调用方法  
  13.             fn:function(){  
  14.                 Ext.MessageBox.hide();  
  15.                 Ext.MessageBox.alert(“提示”,“加载完成”);  
  16.             }  
  17.         }  
  18.     });  
  19. }  
[javascript][/javascript]


  1. function check11() {  
  2.     var win = new Ext.Window({  
  3.         title:“提示”,  
  4.         width:500,  
  5.         height:300,  
  6.         modal:true//遮挡背后元素  
  7.         items:[{  
  8.             xtype:“panel”,//窗口中包含一个面板  
  9.             width:400,  
  10.             height:220,  
  11.             x:50,//在窗口中的位置  
  12.             y:40,  
  13.             //面板顶部的工具条  
  14.             tbar:[{  
  15.                 text:“提示框”,  
  16.                 handler:function(){  
  17.                     Ext.Msg.alert(“提示”,“一个对话框”);  
  18.                 }  
  19.             }]  
  20.         }]  
  21.     });  
  22.     win.show();  
  23. }  
[javascript][/javascript]


  1. //window练习  
  2. function check12() {  
  3.     new Ext.Window({  
  4.         //contentEl:hello,  
  5.         width:300,  
  6.         height:300,  
  7.         //closeAction:”hide”,  
  8.         title:“window”,  
  9.         closable:false//隐藏关闭符合  
  10.         constrain:true,  
  11.         plain:true  
  12.     }).show();  
  13. }  
[javascript][/javascript]


  1. //菜单  
  2. function check13() {  
  3.     //初始化提示信息  
  4.     Ext.QuickTips.init();  
  5.     var win = new Ext.Window({  
  6.         //contentEl:hello,  
  7.         width:500,  
  8.         height:500,  
  9.         title:“window”,  
  10.         closable:false,  
  11.         //头部工具栏  
  12.         tools:[  
  13.         {id:“up”},  
  14.         {id:“down”},  
  15.         {id:“left”},  
  16.         {id:“plus”},  
  17.         {id:“search “},  
  18.         {  
  19.             id:“save”,  
  20.             qtip:“保存”  
  21.         },  
  22.         {  
  23.             id:“help”,  
  24.             qtip:“帮助”  
  25.         },  
  26.         {  
  27.             id:“close”,  
  28.             qtip:“关闭”,  
  29.             handler:function(){  
  30.                 //win.hide();  
  31.                 win.close();  
  32.             }  
  33.         }  
  34.         ]  
  35.     });  
  36.     win.show();  
  37. }  
[javascript][/javascript]

  1. //自定义菜单图片  
  2. function check14(){  
  3.     Ext.QuickTips.init();  
  4.     var mywindow = new Ext.Window(  
  5.     {  
  6.         title:“标题”,  
  7.         width:300,  
  8.         height:300,  
  9.         closable:false,  
  10.         tbar:new Ext.Toolbar({  
  11.             height:30  
  12.         })  
  13.     }  
  14.     );  
  15.     mywindow.show();  
  16.     mywindow.getTopToolbar().add(new Ext.Toolbar.Button({  
  17.         icon:“/44.jpg”,  
  18.         cls:‘x-btn-icon’,  
  19.         tooltip:“保存”  
  20.     }))  
  21.     mywindow.getTopToolbar().add(new Ext.Toolbar.Button({  
  22.         icon:“./45.jpg”,  
  23.         cls:‘x-btn-icon’,  
  24.         tooltip:“打开”  
  25.     }))  
  26. }  
[javascript][/javascript]

  1. //添加菜单  
  2. function check15(){  
  3.     Ext.QuickTips.init();  
  4.     var myPanel = new Ext.Panel({  
  5.         width:300,  
  6.         height:300,  
  7.         title:“Panel”,  
  8.         html:“测试Panel”,  
  9.         floating:true,  
  10.         x:300,  
  11.         y:300,  
  12.         //工具栏  
  13.         tools:[  
  14.         {id:“save”,qtip:“保存”},  
  15.         {id:“help”,qtip:“帮助”},  
  16.         {id:“close”,qtip:“关闭”}  
  17.         ]  
  18.     }).show();  
  19. }  
  20. //窗口分组管理  
  21. var i = 1;  
  22. var mygroup;  
  23. function newWindow() {  
  24.     var myWindow  = new Ext.Window({  
  25.         width:300,  
  26.         height:300,  
  27.         title:“window” + i++,  
  28.         closable:false,  
  29.         manager:mygroup  
  30.     });  
  31.     myWindow.show();  
  32. }  
  33.   
  34. function toBack() {  
  35.     mygroup.sendToBack(mygroup.getActive());  
  36. }  
  37.   
  38. function hideAll() {  
  39.     mygroup.hideAll();  
  40. }  
  41.   
  42. Ext.onReady(  
  43.     function() {  
  44.         mygroup=new Ext.WindowGroup();  
  45.         Ext.get(“button16”).on(“click”,newWindow);  
  46.         Ext.get(“button17”).on(“click”,toBack);  
  47.         Ext.get(“button18”).on(“click”,hideAll);  
  48.     }  
  49. );  
  50. //菜单  
  51. function check19(){  
  52.     Ext.QuickTips.init();  
  53.     var myWindow = new Ext.Window({  
  54.     title:“提示”,  
  55.     width:300,  
  56.     height:300,  
  57.     tbar:new Ext.Toolbar({  
  58.         height:30  
  59.     })  
  60.     }).show();  
  61.     var mymeun = new Ext.menu.Menu({  
  62.         items:[  
  63.         {text:“打开”,icon:“44.jpg”},  
  64.         {text:“关闭”,icon:“45.jpg”}  
  65.         ]  
  66.     });  
  67.     myWindow.getTopToolbar().add(  
  68.         new Ext.Toolbar.SplitButton({  
  69.             text:“文件”,  
  70.             meun:mymeun  
  71.         })  
  72.     );  
  73.     myWindow.getTopToolbar().add(new Ext.Toolbar.Separator());    
  74. }  

标签