Ext Js简单常用对象的创建使用
2013-01-23 20:54
375 查看
在自己的随笔中关于Ext Js的文章是针对Ext Js的3.4.0版的API脚本库。
1.对于alert和prompt的创建使用
2.对于Ext.MessageBox.show的创建使用
3.对于ToolTip的创建使用
4.对于Window的创建使用
5.对于FormPanel的创建使用(对于表单一些常用对象的创建也在里面了)
6.对于Panel的创建使用
7.API文档中对于“xtype”的介绍
是不是应该加上一些截图看看效果呢?自己不太喜欢写很长的文章尽量缩减,因为太长的话,大家都会没有耐心看下去的,虽这样不是很好,但也考虑一些大家感受。想想如果把代码注释的足够详细,那么将更容易让人理解了。只有效果截图,而没有代码注释,这样的代码就相当于不写,可读性不好,别人不明白你写的是什么,良好的注释还是有必要的。
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
是不是应该加上一些截图看看效果呢?自己不太喜欢写很长的文章尽量缩减,因为太长的话,大家都会没有耐心看下去的,虽这样不是很好,但也考虑一些大家感受。想想如果把代码注释的足够详细,那么将更容易让人理解了。只有效果截图,而没有代码注释,这样的代码就相当于不写,可读性不好,别人不明白你写的是什么,良好的注释还是有必要的。
相关文章推荐
- Ext Js简单容器常用布局的创建使用
- 《Java编程思想》之对象的创建、使用、生命期(简单比较java与C++的不同之处)
- 易语言中简化了类的创建与使用,使得面对对象编程更简单
- 简单使用JSON,JavaScript中创建 JSON 对象(一)
- SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序
- 简单使用JSON,通过JSON 字符串来创建对象(二)
- 简单属性,方法,对象的创建和使用
- Ext Js简单Data Store创建及使用
- ASP之简化创建关闭记录集对象并创建使用简单的MSSQL存储过程
- vue.js入门(一)创建vue对象和常用指令及使用示例
- [Javascript]:JS创建对象方式、对象使用说明与常用内置对象总结
- 抽象工厂模式:简单工厂模式、工厂方法模式对比;在工厂方法模式中使用反射创建对象实例
- go语言使用go-sciter创建桌面应用(七) view对象常用方法,文件选择,窗口弹出,请求
- 对象的创建方法之三---组合使用构造函数模式和原型模式(最常用的模式)
- JS创建对象最常用的方法就是使用JSON格式的语法
- 简单构建一个xmlhttp对象池合理创建和使用xmlhttp对象
- Ext Js简单面板及工具栏的创建使用
- 无废话Android之listview入门,自定义的数据适配器、采用layoutInflater打气筒创建一个view对象、常用数据适配器ArrayAdapter、SimpleAdapter、使用ContentProvider(内容提供者)共享数据、短信的备份、插入一条记录到系统短信应用(3)
- ASP之简化创建关闭记录集对象并创建使用简单的MSSQL存储过程
- ASP 技巧一则之 简化创建关闭记录集对象并创建使用简单的MSSQL存储过程 By shawl.qiu