MessageBox組件

//Ext.onReady 準備函數 類似于window.onload Ext.onReady(function(){//提示信息 // Ext.MessageBox.alert('我是標題!' , 'Hello World!' , function(){ // console.info(this); // alert('我是回調函數!'); // } , this); // Ext.Msg.alert('提示信息','ExtJS!!!'); // alert('執行');//詢問框 // Ext.Msg.confirm('提示信息','確認刪除該條記錄么?',function(op){ // // yes on // if(op == 'yes'){ // alert('確認了!'); // } else { // alert('取消了!'); // } // });//輸入框//String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] // Ext.Msg.prompt('我是標題!','請輸入姓名:' , function(op , val){ // //op ok cancel // console.info(op); // console.info(val); // } , this , true , '張三');//等待框 // Ext.Msg.wait('提示信息','我是內容' ,{ // interval: 400, //循環定時的間隔 // duration: 2000, //總時長 // increment: 5, //執行進度條的次數 // text: '更新中,請稍后...', //進度條上的文字 // scope: this, // fn: function(){ // alert('更新成功!'); // }, // animate:true //更新渲染時提供一個動畫效果 // });//show方法 // Ext.Msg.show({ // title:'我是自定義的提示框!!' , // msg:'我是內容!!' , // width:300 , // height:300 , // buttons:Ext.Msg.YESNOCANCEL , // icon:Ext.Msg.WARNING // ERROR INFO QUESTION WARNING // });});

window組件

Ext.onReady(function(){//Ext.create方法相當于創建一個實例對象Ext.create('Ext.window.Window',{title:'我的第一個組件,window' ,width:400 , //Number型 也可以是字符串類型 width: '90%'height:300 ,layout:'fit' ,constrain:true , //限制窗口不超出瀏覽器邊界modal:true , //設置一個模態窗口//plain:true ,icon:'js/extjs/icons/used/browser_window.png', //字符串參數,圖片的路徑//iconCls:'' , //CSS樣式x:50 ,y:50 ,autoScroll:true, //添加滾動條html:'<div style=width:200px;height:200px>我是一個div</div><div style=width:200px;height:200px>我是第二個div</div>' ,//constrainHeader:true, //不允許該窗口的title超出瀏覽器邊界renderTo:Ext.getBody() //新創建的組件 渲染到什么位置}).show();}); Ext.onReady(function(){//ex001:點擊一個按鈕 ,打開一個新的窗體 window重復創建的問題//第一種實現//JQuery code: var btn = $('#btn'); var dombtn = btn.get(0);var btn = Ext.get('btn'); //這個元素是經過Ext包裝的一個Ext的Dom對象//alert(btn.dom.value);btn.on('click',function(){if(!Ext.getCmp('mywin')){Ext.create('Ext.window.Window',{id:'mywin' , //如果你給組件加了一個id 那么這個組件就會被Ext所管理title:'新窗體' , height:300 ,width:400 ,renderTo:Ext.getBody() //,//modal:true}).show(); }});//第二種實現 // var win = Ext.create('Ext.window.Window',{ // title:'新窗體' , // height:300 , // width:400 , // renderTo:Ext.getBody() , // closeAction:'hide' //closeAction默認是destroy // }); // // Ext.get('btn').on('click',function(){ // win.show(); // });}); Ext.onReady(function(){//ex002 : 在組件中添加子組件 ,并進行一系列針對于組件的操作//在組件中添加子組件： // var win = new Ext.window.Window({ // title:"添加子組件實例" , // width:'40%' , // height:400 , // renderTo:Ext.getBody() , // draggable:false , //不允許拖拽 // resizable:false , //不允許改變窗口大小 // closable:false, //不顯示關閉按鈕 // collapsible:true , //顯示折疊按鈕 // bodyStyle: 'background:#ffc; padding:10px;' , // 設置樣式 // html:'我是window的內容!!' , // //Ext items(array) 配置子組件的配置項 // items:[{ // //Ext的組件 給我們提供了一個簡單的寫法 xtype屬性去創建組件 // xtype:'panel', // width:'50%', // height:100 , // html:'我是面板' // }, // new Ext.button.Button({ // text:'我是按鈕' , // handler:function(){ // alert('執行!!'); // } // }) { xtype:'button' , text:'我是按鈕', handler:function(btn){ alert('我被點擊了'); alert(btn.text); } } // ] // // }); // win.show(); var win = new Ext.Window({id:'mywin' ,title:'操作組件的形式' ,width:500 , height:300 , renderTo:Ext.getBody() , //表示在當前組件的top位置添加一個工具條tbar:[{ //bbar(bottom) lbar(leftbar) rbar(rightbar) fbar(footbar)text:'按鈕1' ,handler:function(btn){//組件都會有 up、down 這兩個方法(表示向上、或者向下查找) 需要的參數是組件的xtype或者是選擇器alert(btn.up('window').title);}},{text:'按鈕2' , handler:function(btn){//最常用的方式alert(Ext.getCmp('mywin').title);}},{text:'按鈕3' ,handler:function(btn){//以上一級組件的形式去查找 OwnerCt//console.info(btn.ownerCt);alert(btn.ownerCt.ownerCt.title);} }] });win.show();}); Ext.onReady(function(){//ex003:用windowGroup對象去操作多個window窗口var wingroup = new Ext.WindowGroup();for(var i = 1 ; i <=5;i++){var win = Ext.create('Ext.Window',{title:'第' + i + '個窗口' , id:'win_' + i , width:300 , height:300 ,renderTo:Ext.getBody()});win.show();wingroup.register(win); //把窗體對象注冊給ZindexManger}var btn1 = Ext.create('Ext.button.Button',{text:'全部隱藏' , renderTo:Ext.getBody(),handler:function(){wingroup.hideAll(); //隱藏所有被管理起來的window組件}});var btn2 = new Ext.button.Button({text:'全部顯示' , renderTo:Ext.getBody(),handler:function(){wingroup.each(function(cmp){cmp.show();});} });var btn3 = new Ext.button.Button({text:'把第三個窗口顯示在最前端' , renderTo:Ext.getBody(),handler:function(){wingroup.bringToFront('win_3'); //把當前的組件顯示到最前端} }); var btn4 = new Ext.button.Button({text:'把第五個窗口顯示在最末端' , renderTo:Ext.getBody(),handler:function(){wingroup.sendToBack('win_5'); //把當前的組件顯示到最后} }); });

總結

以上是生活随笔為你收集整理的ext.js组件的基本操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。