《extjs学习笔记》由会员分享,可在线阅读,更多相关《extjs学习笔记(29页珍藏版)》请在金锄头文库上搜索。
1、ExtJs学习笔记最简单的例子 应用extjs需要在页面中引入extjs的样式及extjs库文 件。所以在使用Extjs框架的页面一般需要包括下边 几句: 最简单的例子 接下来写一个最简单的例子,在html中 除了上边引用的三个文件 还要引用自己 写的hello.js.最简单的例子 Hello.js代码: Ext.onReady(function() Ext.MessageBox.alert(“hello“,“hello,e sayjf open source“); )最简单的例子结果:最简单例子上边显示了结果,进一步我们可以在页面显示一个窗口代码如下: Ext.onReady(functio
2、n() var win=new Ext.Window(title:“hello“, width:300, height:200, html:“Hello,easyjf open source“ ); win.show(); )最简单的例子 结果:Ext.Panel Panel示例: var panel1; function newPanel1()var config1=title:这是标题栏,width:300,height:300,floating:true,renderTo:Ext.getBody(),draggable:insertProxy: false,onDrag : functi
3、on(e)var pel = this.proxy.getEl();this.x = pel.getLeft(true);this.y = pel.getTop(true);Ext.Panel, endDrag : function(e)this.panel.setPosition(this.x, this.y);,tools:id:close,handler:function(event, toolEl, panel)panel.hide();,layout:border,Ext.Panelitems: title: 左边栏,region: west,height: 100,width:20
4、0,minSize: 75,maxSize: 250,margins: 5 0 5 5,title: 中间主体部分,region:center,margins:5 5 5 0,minSize: 100,Ext.Paneltbar:请输入关键字:,xtype:textfield,width:80,-,text:点一下 ,handler:function()alert(“你刚才点了此 按钮!“);,collapsible:true,shadow:false;Ext.Panelpanel1=new Ext.Panel(config1);panel1.setPosition(0,0);var resi
5、zer=new /Ext.Resizable(panel1.getEl(),handlers:all);/resizer.on(resize,function()panel1.updateBox (panel1.getSize();); Ext.onReady(newPanel1); 显示结果如下:结果显示:布局absolute 绝对定位布局,通过定位子元素在容器内部的坐标决定子元素的位置 accordion手风琴布局,收缩式的类似菜单样式,包含多个面板,只显示其中一个 anchor定位式布局,相对于容器四周的尺寸大小,对其包含在内的元素进行定位 auto Default border car
6、d卡片式布局,标签和向导两种 Column 列布局 fit form Hbox 纵向切分布局 Menu 菜单布局,仅用于菜单组件 (Ext.menu.Menu) table toolbar工具栏布局,仅用于工具栏组件 (Ext.Toolbar) Vbox 横向切分布局Ext.Panel Ext.Panel有五个部分,即:header、 body、tbar、bbar、footer。在创建了 panel的实例后,这五个对象就能被引用 了,它们分别指向panel五个最重要的部 分,tbar就是上面的工具栏,bbar就是 下面的工具栏,footer就是放buttons 的地方,它处于最下面。body就
7、是整个 panel的主体部分了。 Ext.Panel遇到问题 一、显示的问题 我写了一行这样的代码,但是没有任何结果:var panel=new Ext.Panel(width:300,height:300,title:标题栏 ); 这是什么原因呢?if(this.applyTo)this.applyToMarkup(this.applyTo);delete this.applyTo;else if(this.renderTo)this.render(this.renderTo);delete this.renderTo;Ext.Panel 这几行代码是写在Ext.Component的构造 函
8、数中的。它标示如果applyTo、 renderTo有值,就会在对象创建的时候 直接呈现,如果这两值都没有,那就只 能手工调用render函数了。 Ext.PanelapplyTo与renderTo 区别 renderTo:对应x-panel所在div的父元 素; applyTo:对应x-panel所在div本身。使Panel的标题栏隐 藏 header:false 如何使Panel能被拖动floating:true, draggable:/insertProxy: false,onDrag : function(e)var pel = this.proxy.getEl();this.x =
9、pel.getLeft(true);this.y = pel.getTop(true);var s = this.panel.getEl().shadow;if (s) s.realign(this.x, this.y, pel.getWidth(), pel.getHeight();,endDrag : function(e)this.panel.setPosition(this.x, this.y);,Ext.data.JsonStore 一个基本的jsonstore应该包含一下的一些基本配置: var store = new Ext.data.JsonStore( url: get-im
10、ages.php, id: myStore, root: images, fields: name, url, name:size, type: float, name:lastmod, type:date ); Ajax 我总结一下用ExtJs访问php service的要点: 一、Url的写法:php地址+/+方法名 二、method:post(也可以是get,这样,传参数 就得用params,用post的话呢就用jsonData) 三、success:function(response,options),其中 response.responseText如果是一个json字符串,那 么就要
11、转化,如果只返回一个结果,那么,所得的 json对象默认有一个d成员,结果就在它里面。Grid学习 一个grid包括一些行和列,在extjs里边 ,列由Ext.grid.ColumnModel来管理, 我们来看看如何创建一个ColumnModel 对象: 代码如下:var cm = new Ext.grid.ColumnModel( id:company,header: “Company“, width: 160, sortable: true, dataIndex: company, header: “Price“, width: 75, sortable: true, dataIndex:
12、 price, header: “Change“, width: 75, sortable: true, dataIndex: change, header: “% Change“, width: 75, sortable: true, dataIndex: pctChange, header: “Last Updated“, width: 85, sortable: true, dataIndex: lastChange ); 有了列,我们还需要一些数据来填充行,构造一个数组: 代码如下: var myData = 3m Co,71.72,0.02,0.03,9/1 12:00am, Alc
13、oa Inc,29.01,0.42,1.47,9/1 12:00am, Altria Group Inc,83.81,0.28,0.34,9/1 12:00am, American Express Company,52.55,0.01,0.02,9/1 12:00am 接下来就是把它们组装成一个gridvar grid = new Ext.grid.GridPanel( renderTo: “grid“, store: new Ext.data.ArrayStore( fields: name: company , name: price, type: float , name: change
14、, type: float , name: pctChange, type: float , name: lastChange, type: date, dateFormat: n/j h:ia , data:myData ), cm: cm, stripeRows: true, autoExpandColumn: company, height: 350, width: 600, title: Array Grid ); 结果当我们需要将grid中各个单元格按照一定规律显示 不同结果,可以在列里面增加renderer例如,将前面的change列中元素大于0的显示绿色 ,小于0的显示红色,那我们首先添加函数显示颜色 : function change(val) if (val 0.1) return + val + ; else if (val + val + ; return val; 然后在header中添加renderer header: “Change“, width: 75, sortable: true, dataIndex: change, renderer: change , 结果