在自己的随笔中关于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": "yeah!
", "no": "oh no!
", "cancel": "X
" },//自定义的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: '测试信息学想你想你想你想
' }).show();}//简单ToolTip显示位置配置function toolTipTT() { new Ext.ToolTip({ target: 'divTest', //指向区域 title: 'ToolTip Title<\a>', closable: true, //是否关闭显示 autoHide: false, //是否自动隐藏 anchor: 'top', //位置为top\buttom\right anchorOffset: 50, //位置偏移量 contentEl: 'tipContent', //一个已存在的HTML元素，或者一个已存在HTML元素的 id html: '测试信息学想你想你想你想
' }).show();} 4.对于Window的创建使用
//简单window页面function getTestWin() { var win = new Ext.Window({ title: "ExtWindow", width: 300, height: 500, renderTo:Ext.getBody(), html: 'Hello ExtJS!
', 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: ' 表单练习 ', 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: 'Hello Pannel Source!
' }; 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:'Hello Panel Source!
'}); //对于一个容器控件（组件），支持延迟方式创建子控件，在父控件的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.BoxComponentbutton Ext.Buttonbuttongroup Ext.ButtonGroupcolorpalette Ext.ColorPalettecomponent Ext.Componentcontainer Ext.Containercycle Ext.CycleButtondataview Ext.DataViewdatepicker Ext.DatePickereditor Ext.Editoreditorgrid Ext.grid.EditorGridPanelflash Ext.FlashComponentgrid Ext.grid.GridPanellistview Ext.ListViewpanel Ext.Panelprogress Ext.ProgressBarpropertygrid Ext.grid.PropertyGridslider Ext.Sliderspacer Ext.Spacersplitbutton Ext.SplitButtontabpanel Ext.TabPaneltreepanel Ext.tree.TreePanelviewport Ext.ViewPortwindow Ext.WindowToolbar components---------------------------------------paging Ext.PagingToolbartoolbar Ext.Toolbartbbutton Ext.Toolbar.Button (过时的；使用 button)tbfill Ext.Toolbar.Filltbitem Ext.Toolbar.Itemtbseparator Ext.Toolbar.Separatortbspacer Ext.Toolbar.Spacertbsplit Ext.Toolbar.SplitButton (过时的；使用 splitbutton)tbtext Ext.Toolbar.TextItemMenu components---------------------------------------menu Ext.menu.Menucolormenu Ext.menu.ColorMenudatemenu Ext.menu.DateMenumenubaseitem Ext.menu.BaseItemmenucheckitem Ext.menu.CheckItemmenuitem Ext.menu.Itemmenuseparator Ext.menu.Separatormenutextitem Ext.menu.TextItemForm components---------------------------------------form Ext.form.FormPanelcheckbox Ext.form.Checkboxcheckboxgroup Ext.form.CheckboxGroupcombo Ext.form.ComboBoxdatefield Ext.form.DateFielddisplayfield Ext.form.DisplayFieldfield Ext.form.Fieldfieldset Ext.form.FieldSethidden Ext.form.Hiddenhtmleditor Ext.form.HtmlEditorlabel Ext.form.Labelnumberfield Ext.form.NumberFieldradio Ext.form.Radioradiogroup Ext.form.RadioGrouptextarea Ext.form.TextAreatextfield Ext.form.TextFieldtimefield Ext.form.TimeFieldtrigger Ext.form.TriggerFieldChart components---------------------------------------chart Ext.chart.Chartbarchart Ext.chart.BarChartcartesianchart Ext.chart.CartesianChartcolumnchart Ext.chart.ColumnChartlinechart Ext.chart.LineChartpiechart Ext.chart.PieChartStore xtypes---------------------------------------arraystore Ext.data.ArrayStoredirectstore Ext.data.DirectStoregroupingstore Ext.data.GroupingStorejsonstore Ext.data.JsonStoresimplestore Ext.data.SimpleStore (过时的；使用 arraystore)store Ext.data.Storexmlstore Ext.data.XmlStore
是不是应该加上一些截图看看效果呢？自己不太喜欢写很长的文章尽量缩减，因为太长的话，大家都会没有耐心看下去的，虽这样不是很好，但也考虑一些大家感受。想想如果把代码注释的足够详细，那么将更容易让人理解了。只有效果截图，而没有代码注释，这样的代码就相当于不写，可读性不好，别人不明白你写的是什么，良好的注释还是有必要的。