Ext Js简单常用对象的创建使用
在自己的随笔中关于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
是不是应该加上一些截图看看效果呢？自己不太喜欢写很长的文章尽量缩减，因为太长的话，大家都会没有耐心看下去的，虽这样不是很好，但也考虑一些大家感受。想想如果把代码注释的足够详细，那么将更容易让人理解了。只有效果截图，而没有代码注释，这样的代码就相当于不写，可读性不好，别人不明白你写的是什么，良好的注释还是有必要的。
