在自己的隨筆中關於Ext Js的文章是針對Ext Js的3.4.0版的API腳本庫。
1.對於alert和prompt的創建使用
function TestMsg() { //可以比較一下顯示效果 //alert(confirm("是否確認退出？")); //Ext.MessageBox.alert("消息", "ExtJs提示框"); Ext.Msg.alert("信息提示", "這樣處理是否成功？", function () { alert('TT!') }); //彈出輸入內容的對話框 Ext.Msg.prompt("AA", "PSPSPSPS", function (btn, text) { if (btn == "ok") { alert(text); } else { alert("Not:" + text); } }); }
2.對於Ext.MessageBox.show的創建使用
function TTMsgShow() { Ext.MessageBox.show({ title: '提示', msg: '信息內容顯示', width: 400, icon: Ext.MessageBox.QUESTION, //ERROR\INFO\WARNING\QUESTION buttons: Ext.MessageBox.YESNOCANCEL,//YESNOCANCEL\OKCANCEL animate: true, //是否有動畫效果 multiline: true, //顯示輸入的多行數據 //buttons: { "yes": "<h2>yeah!<h2/>", "no": "<h2>oh no!<h2/>", "cancel": "<h2>X<h2/>" },//自定義的buttons顯示 fn: function (btn) { switch (btn) { case 'ok': Ext.MessageBox.alert('信息提示', '你點的是'+btn+'按鈕'); break; case 'cancel': Ext.MessageBox.alert('信息提示', '你點的是Cancel按鈕'); break; case 'yes': Ext.MessageBox.alert('信息提示', '你點的是YES按鈕'); break; case 'no': Ext.MessageBox.alert('信息提示', '你點的是No按鈕'); break; default:Ext.MessageBox.alert('信息提示', '你點的是'+btn+'按鈕'); break; } } }); }
3.對於ToolTip的創建使用
//簡單ToolTip一些效果配置 function toolTipTest() { new Ext.ToolTip({ target: 'divTest', //指向區域 title: 'TT', closable: true, //是否關閉顯示 autoHide: false, //是否自動隱藏 draggable: true, //是否隨意拖放 showDelay: 10, //顯示延遲,默認500 trackMouse: true, //鼠標划過,隨鼠標移動 html: '<h1>測試信息學想你想你想你想</h1>' }).show(); } //簡單ToolTip顯示位置配置 function toolTipTT() { new Ext.ToolTip({ target: 'divTest', //指向區域 title: '<a href="#">ToolTip Title<\a>', closable: true, //是否關閉顯示 autoHide: false, //是否自動隱藏 anchor: 'top', //位置為top\buttom\right anchorOffset: 50, //位置偏移量 contentEl: 'tipContent', //一個已存在的HTML元素，或者一個已存在HTML元素的 id html: '<h1>測試信息學想你想你想你想</h1>' }).show(); }
4.對於Window的創建使用
//簡單window頁面 function getTestWin() { var win = new Ext.Window({ title: "ExtWindow", width: 300, height: 500, renderTo:Ext.getBody(), html: '<h1><font>Hello ExtJS!</font></h1>', items: [ new Ext.Button({ text: "通過New Button添加的對象" }), new Ext.Button({ text: "items下添加2個New Button" }), { xtype: "button", text: "通過xtype設置屬性新Button" }, { xtype: "colorpalette", width: 150, height: 100 } ] }); win.show(); }
5.對於FormPanel的創建使用(對於表單一些常用對象的創建也在里面了)
//創建表單 function createForm() { //初始化單例。任何基於標簽的快速提示開始工作。 Ext.QuickTips.init(); //初始化所有quickTips的所有提示信息 var fromTest = new Ext.FormPanel({ layout: 'form', autoHeight: true, frame: true, renderTo: Ext.getBody(), width: 300, height: 500, //frame是否渲染表單 title: '<center bgcolor="Yellow" onclick="window.location.reload()">表單練習</center>', style: 'margin-left:auto,margin-top:50px,width:500px,background-color: Yellow', labelAlign: 'left', labelWidth: 80, buttonAlign: 'center', defaults: { width: 180 }, //標簽對齊方式、標簽寬度、元素對齊、默認屬性 items: [ { xtype: 'textfield', fieldLabel: '文本框控件', id: 'txtContent', name: 'TextBox' }, { xtype: 'textfield', fieldLabel: '文本框', id: 'txt', readOnly: true, emptyText: '請輸入內容' }, //allowDecimals:允許小數;allowNegative：允許負數 {xtype: 'numberfield', fieldLabel: '輸入數字', id: 'txtNum', allowDecimals: false, allowNegative: false, maxValue: 1000, minValue: 0 }, { xtype: 'combo', fieldLabel: '下拉框控件', id: 'combTest', mode: 'local', displayField: 'Name', valueField: 'Id', editable: false, typeAhead: true, forceSelection: false, triggerAction: 'all', selectOnFocus: true, //forceSelection:必選一項;triggerAction:匹配所有 store: new Ext.data.SimpleStore({ fields: ['Id', 'Name'], data: [['1', '李白'], ['2', '李杜'], ['3', '李麗']] }) }, { xtype: 'datefield', fieldLabel: '日歷控件', id: 'dateTest', format: 'Y-m-d', editable: false, value: new Date().format('Y-m-d') }, //默認日期 {xtype: 'radiogroup', fieldLabel: '單選按鈕', id: 'rabs', name: 'Radios', width: 100, items: [ { name: 'Radios', boxLabel: '嫁人', inputValue: '1', checked: true }, { name: 'Radios', boxLabel: '娶人', inputValue: '0' } ] }, { xtype: 'checkboxgroup', fieldLabel: '復選控件', columns: 2,//復選框組 items: [ { boxLabel: '香蕉', inputValue: 'A', id: 'chekA' }, { boxLabel: '蘋果', inputValue: 'B', id: 'checkB' }, { boxLabel: '橘子', inputValue: 'C', id: 'checkC' }, { boxLabel: '桃子', inputValue: 'D', id: 'checkD' } ] }, { xtype: 'timefield', fieldLabel: '時間控件', format: 'H:i', increment: 60, value: new Date().toLocaleTimeString() }, { xtype: 'fieldset', fieldLabel: '標簽頁', autoHeight: true,//標簽頁 items: [{ xtype: 'panel', title: '標簽1', frame: true, height: 50 }, { xtype: 'panel', title: '標簽2', frame: true, height: 30}] }, { xtype: 'htmleditor', fieldLabel: '在線編輯器', width: 200, height: 100 }//在線編輯器 ], buttons: [ { text: '保存', tooltip: '這是保存按鈕', handler: function () { Msg('保存成功') } },//tooltip提示信息 { text: '取消', tooltip: '這是取消按鈕', handler: function () { form1.form.reset(); } } ] }); }
6.對於Panel的創建使用
function createPanel() { var objPro = { title: "Hello Pannel", width: 300, height: 300, html: '<h1>Hello Pannel Source!</h1>' }; var panel = new Ext.Panel(objPro); panel.render("Hello Pannel"); //將面板渲染到Hello Pannel處,為Div的id //此處的render方法后面的參數表示頁面上的div元素id,也可以直接通過屬性renderTo參數來替換render方法,也可以renderTo:Ext.getBody() //例如：new Ext.Panel({renderTo:"hello",title:"Hello Panel",width:300,height:300,html:'<h1>Hello Panel Source!</h1>'}); //對於一個容器控件（組件），支持延遲方式創建子控件，在父控件的items屬性來傳遞數組方式構建 //例如：var tabPanel=new Ext.TabPanel({width:200,height:300;items:[ //{title:"面板1",height:30},{title:"面板2",height:30},{title:"面板3",height:30} //]}); //等價於：var tabPanel=new Ext.TabPanel({width:200,height:300,items[ //new Ext.Panel({title:"面板1",height:30}),new Ext.Panel({title:"面板2",height:30},new Ext.Panel({title:"面板3",height:30})) //]}); //相比而言，前者較好，前者是在初始化時創建的；后者是一開始就創建，前者實現了延遲加載 }
7.API文檔中對於“xtype”的介紹
以下是所有的'xtype'和類的對應關系 xtype Class ------------- ------------------ box Ext.BoxComponent button Ext.Button buttongroup Ext.ButtonGroup colorpalette Ext.ColorPalette component Ext.Component container Ext.Container cycle Ext.CycleButton dataview Ext.DataView datepicker Ext.DatePicker editor Ext.Editor editorgrid Ext.grid.EditorGridPanel flash Ext.FlashComponent grid Ext.grid.GridPanel listview Ext.ListView panel Ext.Panel progress Ext.ProgressBar propertygrid Ext.grid.PropertyGrid slider Ext.Slider spacer Ext.Spacer splitbutton Ext.SplitButton tabpanel Ext.TabPanel treepanel Ext.tree.TreePanel viewport Ext.ViewPort window Ext.Window Toolbar components --------------------------------------- paging Ext.PagingToolbar toolbar Ext.Toolbar tbbutton Ext.Toolbar.Button (過時的；使用 button) tbfill Ext.Toolbar.Fill tbitem Ext.Toolbar.Item tbseparator Ext.Toolbar.Separator tbspacer Ext.Toolbar.Spacer tbsplit Ext.Toolbar.SplitButton (過時的；使用 splitbutton) tbtext Ext.Toolbar.TextItem Menu components --------------------------------------- menu Ext.menu.Menu colormenu Ext.menu.ColorMenu datemenu Ext.menu.DateMenu menubaseitem Ext.menu.BaseItem menucheckitem Ext.menu.CheckItem menuitem Ext.menu.Item menuseparator Ext.menu.Separator menutextitem Ext.menu.TextItem Form components --------------------------------------- form Ext.form.FormPanel checkbox Ext.form.Checkbox checkboxgroup Ext.form.CheckboxGroup combo Ext.form.ComboBox datefield Ext.form.DateField displayfield Ext.form.DisplayField field Ext.form.Field fieldset Ext.form.FieldSet hidden Ext.form.Hidden htmleditor Ext.form.HtmlEditor label Ext.form.Label numberfield Ext.form.NumberField radio Ext.form.Radio radiogroup Ext.form.RadioGroup textarea Ext.form.TextArea textfield Ext.form.TextField timefield Ext.form.TimeField trigger Ext.form.TriggerField Chart components --------------------------------------- chart Ext.chart.Chart barchart Ext.chart.BarChart cartesianchart Ext.chart.CartesianChart columnchart Ext.chart.ColumnChart linechart Ext.chart.LineChart piechart Ext.chart.PieChart Store xtypes --------------------------------------- arraystore Ext.data.ArrayStore directstore Ext.data.DirectStore groupingstore Ext.data.GroupingStore jsonstore Ext.data.JsonStore simplestore Ext.data.SimpleStore (過時的；使用 arraystore) store Ext.data.Store xmlstore Ext.data.XmlStore
是不是應該加上一些截圖看看效果呢？自己不太喜歡寫很長的文章盡量縮減，因為太長的話，大家都會沒有耐心看下去的，雖這樣不是很好，但也考慮一些大家感受。想想如果把代碼注釋的足夠詳細，那么將更容易讓人理解了。只有效果截圖，而沒有代碼注釋，這樣的代碼就相當於不寫，可讀性不好，別人不明白你寫的是什么，良好的注釋還是有必要的。