《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 , 结果
