ExtJS組件配置方式介紹

　　1.使用逗號分隔參數列表配置組件
?　? 　　首先來看一個簡單的逗號分隔參數列表的例子。這個例子非常簡單，它用來顯示信息提示框。

　　2.使用Json對象配置組件
?　　　　接下來看一個使用Json對象配置組件的例子，很多地方習慣性稱之為配置對象。　　

    <script>Ext.onReady(function () {//使用逗號配置Ext.Msg.alert('提示', '逗號分隔參數列表');//使用Json對象配置var config = {title: '使用Json對象配置',msg:'這里是提示信息！'};Ext.Msg.show(config);});</script>

　　ExtKS開放了大量配置項以滿足程序員在實際項目中的不同需求，熟悉各個配置項的配置方式以及效果是我們快速掌握EXTJS的一個捷徑。

信息提示框組件介紹?

　　 Ext.window.MessageBox是一個工具類，用來生成各種風格的信息提示框。其實例對象可以通過Ext.MessageBox或Ext.Msg來訪問，兩者具有相同的效果，后者提供更簡便的調用方式。
?　　Ext.MessageBox提供的信息對話框顯示的文本不僅支持純文本顯示還支持HTML格式文本，采用HTML格式文本進行排版，效果更加豐富多彩。
?　　Javascript中標準的alert會阻塞瀏覽器腳本的執行，但是Ext.MessageBox不會，它是異步調用。
?　　1.Ext.MessageBox.alert是一個只讀信息提示框，可以為其提供一個回調函數，該函數將在單擊按鈕后被調用（不包括右上角的退出按鈕），所單擊按鈕的ID將作為唯一的參數傳遞到回調函數中。

    <script>Ext.onReady(function () {Ext.Msg.alert('提示',"<b>提示信息</b>");});</script>

?　　2.Ext.MessageBox.confirm確認對話框，支持傳入回調函數，與Ext.MessageBox.alert一致。

    <script>Ext.onReady(function () {Ext.Msg.confirm('提示', '你確定要這樣做嗎',callback);function callback(id) {alert("你點擊了:"+id);}});</script>

?　　3.Ext.MessageBox.prompt顯示用戶輸入信息的對話框。支持傳入回調函數，所單擊的按鈕id以及文本框的內容將作為參數傳遞到回調函數中。

    <script>Ext.onReady(function () {//true表示多行文本輸入框Ext.Msg.prompt("提示", "請輸入信息",callback,true,'默認值');function callback(id, msg) {alert("點擊按鈕:"+id+" 輸入信息:"+msg);}});</script>

　　?4.Ext.MessageBox.wait()顯示一個自動滾動的進度框。它被用在一個耗時的交互操作中，它不能定義一個時間間隔自動關閉，需要手動關閉。

    <script>Ext.onReady(function () {Ext.Msg.wait("請等待", "溫馨提示", {text:'進度條上的文字'});});</script>

?　　5.Ext.MessageBox.show()基于配置顯示新的信息提示框或重置一個已經存在的信息提示框。前面介紹的3個方法內部調用的都是它，盡管調用簡捷，但是它不支持所有的配置項，要建立更加強大、個性化的提示框還需要掌握Ext.MessageBox.show方法做起。配置項太多，礙于篇幅，不列出，需要的人去查閱ExtJSAPI。該提示框是異步執行的，使用時請注意。

<script>Ext.onReady(function () {function callback(id, msg) {alert("點擊的按鈕:"+id+" 信息:"+msg);}Ext.Msg.show({title: '溫馨提示',msg: '三個按鈕和一個文本區',modal: true,//模態prompt: true,//含輸入框value: '請輸入',//輸入框默認值fn: callback,//回調函數buttons: Ext.Msg.YESNOCANCEL,//可用按鈕
                icon:Ext.Msg.QUESTION});});</script>

?

　　6.Ext.MessageBox其他功能
?　　(1) 改變默認的按鈕文字

    <script>Ext.onReady(function () {//okExt.Msg.msgButtons[0].setText('按鈕一');//yesExt.Msg.msgButtons[1].setText('按鈕二');//noExt.Msg.msgButtons[2].setText('按鈕三');//cancelExt.Msg.msgButtons[3].setText('按鈕四');Ext.Msg.show({title: '提示',msg: '防火防盜防校長',modal: true,buttons:Ext.Msg.YESNOCANCEL});});</script>

?　　(2) 動態更新信息提示框

    <script>Ext.onReady(function () {var msgBox = Ext.MessageBox.show({title: '提示',msg: '動態更新的信息文字',modal: true,buttons: Ext.Msg.OK,fn: function () {//回調函數//停止定時任務
                    Ext.TaskManager.stop(task);}});//Ext.TaskManager是一個功能類，用來執行定時程序var count = 1;var task = {run: function () {msgBox.updateText("正在上傳第" + count + "條數據...");count++;},interval:1000};Ext.TaskManager.start(task);});</script>

?　　(3) 更新進度以及提示信息

 <script>Ext.onReady(function () {var msgBox = Ext.Msg.show({title: '顯示',msg: '信息',modal: true,width: 300,progress: true //使用進度條
            });var count = 0;//滾動條刷新的次數var percentage = 0;//進度百分比var progressText = '';//進度條信息var task = {run: function () {count++;//計算進度percentage = count / 10;//生成進度條上的文字progressText = '當前完成度:' + percentage * 100 + '%';//更新信息提示對話框msgBox.updateProgress(percentage, progressText, '當前時間:' + Ext.util.Format.date(new Date(), 'Y-m-d g:i:s A'));//刷新10次關閉信息提示對話框if (count > 10) {Ext.TaskManager.stop(task);msgBox.hide();}},interval:1000};Ext.TaskManager.start(task);});</script>

?

進度條組件介紹

?　　Ext.ProgressBar是一個可更新的進度條組件，該進度條具有手工模式和自動模式。手工模式下，需要自己控制進度條的顯示，自動模式下，只要調用wait方法，進度條就會無限制的滾動下去，它適合為那么耗時長的同步操作進行提示。

    <script>Ext.onReady(function () {var ProgressBar = new Ext.ProgressBar({title: '進度條',width: 300,text:'請等待...',//使用htmlbody作為渲染容器//renderTo:Ext.getBody()renderTo: 'div'});});</script>

?　　手工模式的進度條是通過調用進度條的updateProgress()方法來實現的。手工更新的進度條非常適合可以掌握程序的執行狀態的長時間操作。例如文件的上傳進度，如果有些操作無法實時獲取進度，只能采用自動更新的進度條信息。

 <script>Ext.onReady(function () {var progressbar = new Ext.ProgressBar({width: 300,renderTo:'div'});var count = 0;//滾動條更新次數var percentage = 0;//進度條百分比var progressText = '';//進度條信息
            Ext.TaskManager.start({run: function () {count++;if (count >= 10)progressbar.hide();//計算進度percentage = count / 10;progressText = percentage * 100 + '%';//更新信息 參數含義:百分比,進度條文字,是否使用動畫效果progressbar.updateProgress(percentage,progressText,true);},interval: 1000,//方法執行時間間隔repeat:6 //設置執行次數
            });});</script>

?　　創建一個自動模式的進度條并不復雜，只用調用進度條的wait方法，進行必要的配置即可得到一個理想狀態的自動更新的進度條了。

  <script>Ext.onReady(function () {var ProgressBar = new Ext.ProgressBar({text: '正在處理，請稍后...',width: 300,renderTo: 'ProgressBar'});ProgressBar.wait({duration: 10000,//進度條持續更新10秒interval: 1000,//每1秒更新一次increment: 10,//進度條分10次更新完畢text: 'waiting',//進度條上的文字scope: this,//回調函數的執行fanwfn: function () {Ext.Msg.alert('提示', '更新完畢');}});});</script>

?

　　通過cls配置改變進度條的樣式。

    <style type="text/css">.custom .x-progress-inner{height: 17px;background: #fff;}.custom .x-progress-bar{height: 15px;background: transparent url(images/custom-bar-red.gif) repeat-x 0 0;border-top: 1px solid #BEBEBE;border-bottom: 1px solid #EFEFEF;border-right: 0;}</style><script>Ext.onReady(function () {var ProgressBar = new Ext.ProgressBar({width: 300,//設定進度條的寬度renderTo: 'ProgressBar',cls: 'custom'//使用自定義樣式
            });ProgressBar.wait({duration: 10000,//進度條持續更新10秒鐘interval: 1000,//每1秒鐘更新一次increment: 10//進度條分10次更新完畢
            });});</script>

?

實現工具和菜單欄

　　Ext.toolbar.Toolbar是工具欄的基礎組件，它相當于容器，在其中可以放置各種工具欄元素，主要包括按鈕、文字和菜單組件。

 <script>Ext.onReady(function () {var toolbar = new Ext.toolbar.Toolbar({renderTo: 'toolbar',width: 300});toolbar.add([{text: '新建',//按鈕上的文字handler: function () {alert('新建');},},{text: '打開',handler: function () {alert('打開');}},{text: '保存',handler: function () {alert('');}}]);});</script>

toolbar1

    <script>Ext.onReady(function () {var toolbar = new Ext.toolbar.Toolbar({renderTo: 'toolbar',width:500});toolbar.add({text:'新建'},{text:'打開'},{text:'保存'},{text:'編輯'},'-',{//加入表單元素xtype: 'textfield',hideLabel: true,width:150},'->',//加入一個充滿工具欄的空白元素'<a href=#>鏈接</a>',//加載一個HtmlElement{xtype:'tbspacer',width:50},//加入一個空白元素'靜態文本'//加入一個簡單字符串
                );Ext.get('btnEnable').on('click', function () {//啟用工具欄
                toolbar.enable();});Ext.get('btnDisable').on('click', function () {//啟用工具欄
                toolbar.disable();});});</script>

toolbar2

Ext.menu.Menu菜單

　　作為我們編寫的第一個菜單欄，它以熟悉的文本編輯軟件菜單欄為原型，主要分為文件菜單和編輯菜單，在文件下拉菜單中有3個菜單選項，分別是新建、打開、關閉，在編輯下拉菜單中包含復制、粘帖、剪切。

    <script>Ext.onReady(function () {function onMenuItem(item) {alert(item.text);}var toolbar = new Ext.toolbar.Toolbar({renderTo: 'toolbar',width: 300});var fileMenu = new Ext.menu.Menu({shadow: 'frame',//設置菜單四條邊都有陰影allowOtherMenus: true,items: [new Ext.menu.Item({text: '新建',handler: onMenuItem}),//添加菜單項{ text: '打開', handler: onMenuItem },{ text: '關閉', handler: onMenuItem }]});var editorMenu = new Ext.menu.Menu({shadow: 'drop',//設置菜單在右下有陰影allowOtherMenus: true,items: [{ text: '復制', handler: onMenuItem },{ text: '粘帖', handler: onMenuItem },{ text: '剪切', handler: onMenuItem }]});toolbar.add({text: '文件',menu:fileMenu},{text: '編輯',menu:editorMenu});});</script>

?

　　接下來看多級菜單的實現方式，在以下示例中是通過Ext.menu.Item的menu配置項來完成多級菜單的關聯。

 <script>Ext.onReady(function () {function handleItem(item) {alert(item.text);}var Toolbar = new Ext.toolbar.Toolbar({renderTo: 'toolbar',width: 300});var infoMenu = new Ext.menu.Menu({ignoreParentClicks: true, //忽略父菜單的點擊事件plain: true,items: [{text: '個人信息',menu: new Ext.menu.Menu({ignoreParentClicks: true,items: [{text: '基本信息',menu: new Ext.menu.Menu({items: [{text: '身高',handler: handleItem},{text: '體重',handler: handleItem}]})}]})},{text: '公司信息'}]});Toolbar.add({text: '設置',menu: infoMenu});});</script>

?　　將更多組件加入菜單。再以上2個示例中介紹了簡單菜單和多級菜單的創建，示例中菜單項都是Ext.menu.Menu對象，其表現形式中規中矩，下面演示一下向菜單欄
中添加豐富的組件。

    <style type="text/css">.userManagerIcon{background-image: url(images/userManager.gif) !important;
        }.newIcon{background-image: url(images/new.gif) !important;
        }.openIcon{background-image: url(images/open.gif) !important;
        }.saveIcon{background-image: url(images/save.gif) !important;
        }</style><script>Ext.onReady(function () {var Toolbar = new Ext.toolbar.Toolbar({//創建工具欄renderTo: 'toolbar',width: 300});var fileMenu = new Ext.menu.Menu({//文件創建菜單
                items: [{xtype: 'textfield',//創建表單字段hideLabel: true,width: 100}, {text: "顏色選擇",menu: new Ext.menu.ColorPicker()},{ xtype: 'datepicker' },//添加日期選擇器組件
                    {xtype: 'buttongroup',//添加按鈕組組件columns: 3,title: '按鈕組',items: [{text: '用戶管理',scale: 'large',colspan: 3,width: 170,iconCls: 'userManagerIcon',iconAlign: 'top'}, {text: '新建', iconCls: 'newIcon'}, {text: '打開', iconCls: 'openIcon'}, {text: '保存', iconCls: 'saveIcon'}]}]});Toolbar.add({ text: '文件', menu: fileMenu }//將菜單加入工具欄
            );});</script>

文中示例代碼下載　　

　　示例代碼

?

　　

轉載于:https://www.cnblogs.com/codealone/p/3152375.html

總結

以上是生活随笔為你收集整理的学习ExtJS4 常用控件的全部內容，希望文章能夠幫你解決所遇到的問題。

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