ExtJS 开发总结 (转)

Ext JS 不知不觉2008已经走到了尽头,在这近一年中,一直不断的尝试用ExtJS做项目,从1.1到现在的2.2,吃了不少苦头,也有不少收获,总结一下,一起分享!

1. ExtJS的定位是RIA,和Prototype、jQuery等类库的定位不同。使用ExtJS做开发,就是意味着以客户端开发为主,不然就不叫RIA框架了,而Prototype、jQuery等只是辅助性的客户端框架,和ExtJS不在同一条起跑先上。如果一定要和其它的框架做比较的话,应该和Isomorphic SmartClientBackbase Enterprise Ajax之类的框架做比较,当然,和他们相比,ExtJS还是有很大的优势的。

2. 使用ExtJS时需要解决如何服务端通信的问题。由于ExtJS只是一个客户端的框架,和服务端技术没有关系,也就没有相应的服务端的适配层,因此客户端如果要用ExtJS,则必须提供它需要的数据结构。ExtJS主要通过这几种方式和服务端进行通信:

  • Ext.Ajax.request 做普通的异步请求,服务端可以根据实际情况返回JSON形式数据或者HTML片段;
  • Ext.tree.TreeLoader 加载树形结构,服务端必须返回JSON形式数据,而且要符合Ext.tree.TreeNode的配置要求,否则自己做转换;
  • Ext.data.Store及其派生类 加载表格形式的数据,服务端可以根据实际情况返回JSON形式数据或者XML形式数据,如果没有特殊要求,推荐返回JSON格式的数据;
  • Ext.Element.update 局部更新,这个方法最总还是要调用Ext.Ajax.request方法,之所以把它单独列出来,是因为这种方式比较容易被忽视,但是在某些情况下还是挺有用的,比如调用Ext.Panel.body.update()对某个Ext.Panel的内容进行局部更新,如果使用这种方式,那么服务端只能相应的返回HTML片段了;

3. 使用ExtJS时的注意事项。ExtJS和其它的辅助性类库(Prototype、jQuery等)相比显得非常庞大,让很多很多初学者望而却步。经过近一年的学和用,对于ExtJS的使用,我总结了一下几个注意事项:

  • 尽量使用ExtJS的方言。 ExtJS提供了很多有用的方法,解决客户端JavaScript常见的开发任务,常见的有查询HTMLDom,创建HTML元素,为HTML元素注册事件响应函数等,这些大可以全部使用ExtJS提供的方法,使自己代码构建与ExtJS之上,举几个例子:
    • 查询ID为container的DIV下所有的checkbox,可以使用:Ext.fly(‘container’).select(‘input[type=checkbox]’);
    • 在ID为container的DIV内创建一个按钮,可以使用:Ext.fly(‘container’).createChild({ tag: ‘input’, type: ‘button’});
    • 为ID为container的DIV的click事件注册处理函数,使用:Ext.fly(‘container’).on(‘click’, handlerFn, scope);
  • ExtJS的自定义事件很好用,可以实现一对多的通知,而且任何自定义事件都可以中途停止,只要有一个处理函数返回false。
  • Store合并成一个文件 用ExtJS显示数据,自然就需要用到Ext.data.Store及其派生出来的类,可以考虑所有的Store合并到一个文件,这样对重用有很大的帮助。
  • 脚本文件管理 尽可能的每个模块做成一个类,一个类一个文件,类似与Java或C# 的文件处理方法,每个文件注明其作用,依赖的文件等,如果太多的话可以考虑写一个配置文件,通过读配置文件来输出脚本到客户端。
  • 调试和部署分别加载Debug和Release版本的脚本 ExtJS附带的例子中没有使用完整Debug版本的例子,所以很多人找不到完整的Debug版本的引用顺序,通过对Source文件夹下的ext.jsb文件进行分析,就可以得到正确的加载顺序,如下:
    • Debug
      1. /ext-path/source/core/ext.js
      2. /ext-path/source/adapter/ext-base.js
      3. /ext-path/ext-all-debug.js
    • Release
      1. /ext-path/adapter/ext/ext-base.js
      2. /ext-path/ext-all.js
  • 对Script进行压缩 对项目中有大量的JavaScript的话,对其进行压缩是很有必要的,这里我推荐的是ExtJS的论坛提供的JS Builder,可以通过配置文件来对Script和CSS进行压缩,据说ExtJS就是用这个工具进行压缩的,不过有一个缺点,就是不支持UTF-8编码。

 

4. ExtJS的优点和缺点总结。经过近一年的尝试,ExtJS的优缺点总结如下:

  • 优点
    • 一致的类库 这点在1.1版本时还不是很完善,但是到了2.0以后,ExtJS内部经过了翻天覆地的变化,特别是UI组件,有统一的基类,给人的感觉很像是一个运行在浏览器上的运行时框架,这一点只有在对ExtJS熟练了之后才能体会到。
    •  托管页面呈现 ExtJS在发展到2.0之后,不仅UI类库一致了,而且渲染方式也是统一的,用官方的话说,是Managed Rendering,这一点使得UI的扩展也比较一致,有利于以后的维护与发展。
    • 相对丰富的文档和示例 毫无疑问,刚刚接触到ExtJS的人多数都是被它附带的例子和开发文档吸引过去的,它的文档做的确实不错。
    • 华丽而成熟的界面 ExtJS在2.0之后的界面真的是没得说,不仅华丽,而且相对很成熟。
  • 缺点
    • 没有合适的开发利器 毫无疑问,一个好的开发工具可以大大的提高编码的速度,但是对于ExtJS,始终没有一个完美的开发工具,可以推荐的有Aptana StudioSpket IDE,和Spket 提供的提示文件,但是都是各有优缺点,都不完美,只能一边看SDK一边写代码。
    • 没有界面设计工具 虽然有人提供了一个在线的界面设计工具,但是和Visual Studio提供的ASP.Net设计工具来说,真的可以说是天壤之别。因此,只能一边预览,一边写代码。
    • 文档不全 虽然ExtJS提供的文档很丰富,但是还是跟不上源代码的更新速度,所以,经常要通过看源代码,调试才能真正解决问题。
    • 不能编译 这一点可以说是JavaScript的缺点(如果能编译,就不叫JavaScript了),在实际的开发中,经常会敲错一些代码,比如大小写错误等,不能通过编译得到反馈,只能在运行时排错,导致开发的效率比较低下。

5. 使用ExtJS做应用的一些建议。多数人认为ExtJS的脚本体积很大,不适合放到互联网上,对于这一点,有如下建议:

  1. 部署到互联网上的Web应用一定要加载Release版本的ExtJS
  2. 可以考虑只加载必须的组件,build目录下脚本文件都是压缩过的,如果项目中用到的ExtJS的组件不是很多,可以只加载用到的
  3. 考虑使用IIS的文件压缩功能
  4. 使用Google的Gears,把所有的静态文件做客户端缓存
  5. 使用ADOBE的AIR,把脚本打包到客户端运行

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一、获取元素(Getting Elements) 1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myElementId')//不需要缓存。 注:享元模式(Flyweight Design Pattern)是一种节省内存的模式,该模式的大概原理是建立单个全体对象然后不断反复使用它。 3.Ext.getDom var elDom = Ext.getDom('elId'); // 依据id来查dom节点 var elDom1 = Ext.getDom(elDom); // 依据dom节点来查dom节点 二、CSS元素 4.addClass Ext.fly('elId').addClass('myCls'); // 加入元素的'myCls'的样式 5.radioClass Ext.fly('elId').radioClass('myCls');//添加一个或多个className到这个元素,并移除其所有侧边(siblings)节点上的同名样式。 6.removeClass Ext.fly('elId').removeClass('myCls'); // 移除元素的样式 7.toggleClass Ext.fly('elId').toggleClass('myCls'); // 加入样式 Ext.fly('elId').toggleClass('myCls'); // 移除样式 Ext.fly('elId').toggleClass('myCls'); // 再加入样式 8.hasClass if (Ext.fly('elId').hasClass('myCls')) {//判断是否已加上这个样式 // 是有样式的…… } 10.replaceClass Ext.fly('elId').replaceClass('myClsA', 'myClsB');//替换样式 11.getStyle var color = Ext.fly('elId').getStyle('color');//返回该元素的统一化当前样式和计算样式。 var zIndx = Ext.fly('elId').getStyle('z-index');//返回该元素的统一化当前样式和计算样式。 12.setStyle Ext.fly('elId').setStyle({ display : 'block', overflow : 'hidden', cursor : 'pointer' });//设置元素的样式,也可以用一个对象参数包含多个样式。 13.getColor Ext.fly('elId').getColor('color');//为指定的CSS属性返回CSS颜色 14.setOpacity Ext.fly('elId').setOpacity(.45, true);//设置元素的透明度。 15.clearOpacity Ext.fly('elId').clearOpacity();//清除这个元素的透明度设置 三、Dom游历 16.Ext.fly('elId').select('li:nth-child(2n)').addClass('red'); 17.is 测试当前元素是否与传入的选择符相符一致。 复制代码 代码如下: var el = Ext.get('elId'); if (el.is('p.myCls')) { // 条件成立 } 18.findParent 定位于此节点,以此节点为起点,向外围搜索外层的父节点,搜索条件必须符合并匹配传入的简易选择符。 Ext.fly('elId').findParent('div'); // 返回dom节点 Ext.fly('elId').findParent('div', 4); // 查找4个节点 Ext.fly('elId').findParent('div', null, true); // 返回Ext.Element 19.findParentNode 定位于此节点的“父节点”,以此节点的“父节点”为起点,向外围搜索外层的“父父”节点,搜索条件必须符合并匹配传入的简易选择符。 Ext.fly('elId').findParentNode('div'); 20.up 沿着DOM,向外围搜索外层的“父父”节点,搜索条件必须符合并匹配传入的简易选择符。 Ext.fly('elId').up('div'); Ext.fly('elId').up('div', 5); // 限5层的内查找 21.select 传入一个CSS选择符的参数,然后依据该CSS选择符从当前元素下面,形成期待匹配子节点的集合,也就是“选择”的操作,最后以一个Ext.CompositeElement类型的组合元素的形式返回。如果以Ext.select()调用表示从document可是搜索。 // 返回结果的CompositeElement Ext.fly('elId').select('div:nth-child(2)'); // 返回数组 Ext.fly('elId').select('div:nth-child(2)', true); // 整个document都会搜索 Ext.select('div:nth-child(2)'); 22.query 进行一次query的查询,返回DOM 节点组成的数组。可选地第二参数设置为查询的起点,如不指定则为 document。 // 返回dom节点组成的数组 Ext.query('div:nth-child(2)'); 23.child 基于送入的选择符,不限定深度进行搜索,符合的话选取单个子节点。 Ext.fly('elId').child('p.highlight'); // 返回的类型是Ext.Element Ext.fly('elId').child('p.highlight', true); // 返回dom节点 24.down 基于该选择符,"直接"选取单个子节点。 Ext.fly('elId').down('span'); // 返回的类型是Ext.Element Ext.fly('elId').down('span', true); // 返回dom节点 25.parent 返回当前节点的那个父节点,可选地可送入一个期待的选择符。 // 返回父节点,类型是Ext.Element Ext.fly('elId').parent(); // 返回父节点,类型是html dom Ext.fly('elId').parent("", true); // 返回父级节点,但一定要是div的,找到就返回,类型是Ext.Element Ext.fly('elId').parent("div"); 26.next 获取下一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。 // 返回下一个侧边节点,类型是Ext.Element Ext.fly('elId').next(); // 返回下一个侧边节点,类型是html dom Ext.fly('elId').next("", true); // 返回下一个侧边节点,但一定要是div的,找到就返回,类型是Ext.Element Ext.fly('elId').next("div"); 27.prev 获取上一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。 // 返回上一个侧边节点,类型是Ext.Element Ext.fly('elId').prev(); // 返回上一个侧边节点,类型是html dom Ext.fly('elId').prev("", true); // 返回上一个侧边节点,但一定要是div的,找到就返回,类型是Ext.Element Ext.fly('elId').prev("div"); 28.first 获取第一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。 // 返回第一个侧边节点,类型是Ext.Element Ext.fly('elId').first(); // 返回第一个侧边节点,类型是html dom Ext.fly('elId').first("", true); // 返回第一个侧边节点,但一定要是div的,找到就返回,类型是Ext.Element Ext.fly('elId').first("div"); 29.last 获取最后一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。 // 返回最后一个侧边节点,类型是Ext.Element Ext.fly('elId').last(); // 返回最后一个侧边节点,类型是html dom Ext.fly('elId').last("", true); // 返回最后一个侧边节点,但一定要是div的,找到就返回,类型是Ext.Element Ext.fly('elId').last("div"); 四、DOM操控(DHTML常见的一项任务就是DOM元素的增、删、改、查) 30.appendChild 把送入的元素归为这个元素的子元素。 var el = Ext.get('elId1'); // 用id指定 Ext.fly('elId').appendChild('elId2'); // Ext.Element添加 Ext.fly('elId').appendChild(el); // 选择符组合地添加 Ext.fly('elId').appendChild(['elId2','elId3']); // 直接添加dom节点 Ext.fly('elId').appendChild(el.dom); // 添加CompositeElement,一组的div Ext.fly('elId').appendChild(Ext.select('div')); 31.appendTo 把这个元素添加到送入的元素里面。 var el = Ext.get('elId1'); // 'elId'添加到'elId2'里面 Ext.fly('elId').appendTo('elId2'); Ext.fly('elId').appendTo(el); // 添加到Ext.Element el 32.insertBefore 传入一个元素的参数,将其放置在当前元素之前的位置。 var el = Ext.get('elId1'); // dom节点在前面插入 Ext.fly('elId').insertBefore('elId2'); //Ext.Element el在前面插入 Ext.fly('elId').insertBefore(el); 33.insertAfter 传入一个元素的参数,将其放置在当前元素之后的位置。 var el = Ext.get('elId1'); // dom节点在后面插入 Ext.fly('elId').insertAfter('elId2'); // Ext.Element el在后面插入 Ext.fly('elId').insertAfter(el); 34.insertFirst 可以是插入一个元素,也可以是创建一个元素(要创建的话请使用“DomHelper配置项对象”作为参数传入),总之,这个元素作为当前元素的第一个子元素出现。 var el = Ext.get('elId1'); // 插入的dom节点作为第一个元素 Ext.fly('elId').insertFirst('elId2'); // 插入的Ext.Element作为第一个元素 Ext.fly('elId').insertFirst(el); // 用DomHelper配置项创建新节点,新节点会作为第一个子元素被插入。 Ext.fly('elId').insertFirst({ tag: 'p', cls: 'myCls', html: 'Hi I am the new first child' }); 35.replace 用于当前这个元素替换传入的元素。 var el = Ext.get('elId1'); // 'elId'去替换'elId2' Ext.fly('elId').replace('elId2'); // 'elId'去替换'elId1' Ext.fly('elId').replace(el); 36.replaceWith 用传入的元素替换这个元素。参数可以是新元素或是要创建的DomHelper配置项对象。 var el = Ext.get('elId1'); Ext.fly('elId').replaceWith('elId2'); // 'elId2'替换掉'elId'. Ext.fly('elId').replaceWith(el); // 'elId1'替换掉'elId' // 用DomHelper配置项创建新节点,并用该节点换掉‘elId'。 Ext.fly('elId').replaceWith({ tag: 'p', cls: 'myCls', html: 'Hi I have replaced elId' }); 五、DomHelper配置项 37.createChild 传入一个DomHelper配置项对象的参数,将其创建并加入到该元素。 var el = Ext.get('elId'); var dhConfig = { tag: 'p', cls: 'myCls', html: 'Hi I have replaced elId' }; // 创建新的节点,放到'elId'里面 el.createChild(dhConfig); // 创建新的节点,居el第一个子元素之前 el.createChild(dhConfig, el.first()); 38.wrap 创建一个新的元素,包裹在当前元素外面。 Ext.fly('elId').wrap(); // div包着elId // 用新建的一个元素来包着elId Ext.fly('elId').wrap({ tag: 'p', cls: 'myCls', html: 'Hi I have replaced elId' }); 六、Html片断 38.insertHtml 插入HTML片断到这个元素。至于要插入的html放在元素的哪里,你可指定beforeBegin, beforeEnd, afterBegin, afterEnd这几种。第二个参数是插入HTML片断,第三个参数是决定是否返回一个Ext.Element类型的DOM对象。 Ext.fly('elId').insertHtml( 'beforeBegin', '<p><a href="anotherpage.html'>点击我</a></p>' ); // 返回dom节点 Ext.fly('elId').insertHtml( 'beforeBegin', '<p><a href="anotherpage.html'>点击我</a></p>', true ); // 返回Ext.Element 39.remove 从DOM里面移除当前元素,并从缓存中删除。. Ext.fly('elId').remove(); // elId在缓存和dom里面都没有 40.removeNode 移除document的DOM节点。如果是body节点的话会被忽略。 Ext.removeNode(node); // 从dom里面移除(HTMLElement) 七、Ajax 41.load 直接访问Updater的Ext.Updater.update()方法(相同的参数)。参数与Ext.Updater.update()方法的一致。 Ext.fly('elId').load({url: 'serverSide.php'}) 42.getUpdater 获取这个元素的UpdateManager。 var updr = Ext.fly('elId').getUpdater(); updr.update({ url: 'http://myserver.com/index.php', params: { param1: "foo", param2: "bar" } }); 八、事件控制Event Handling 43.addListener/on 为此元素加入一个事件处理函数。on()是其简写方式。简写方式作用等价,写代码时更省力。 var el = Ext.get('elId'); el.on('click', function(e,t) { // e是一个标准化的事件对象(Ext.EventObject) // t就是点击的目标元素,这是个Ext.Element. // 对象指针this也指向t }); 44.removeListener/un 从这个元素上移除一个事件处理函数。un()是它的简写方式。 var el = Ext.get('elId'); el.un('click', this.handlerFn); // 或 el.removeListener('click', this.handlerFn); 45.Ext.EventObject EventObject呈现了统一各浏览器的这么一个事件模型,并尽量符合W3C的标准方法。 // e它不是一个标准的事件对象,而是Ext.EventObject。 function handleClick(e){ e.preventDefault(); var target = e.getTarget(); ... } var myDiv = Ext.get('myDiv'); myDiv.on("click", handleClick); // 或 Ext.EventManager.on('myDiv', 'click', handleClick); Ext.EventManager.addListener('myDiv', 'click', handleClick); 九、高级事件功能 46.委托delegation 要使用事件委托的方式代替,在容器身上登记一个事件处理器,按照依附的逻辑选择: Ext.fly('actions').on('click, function(e,t) { switch(t.id) { case ''btn-edit': // 处理特定元素的事件具体过程 break; case 'btn-delete': // 处理特定元素的事件具体过程 break; case 'btn-cancel': // 处理特定元素的事件具体过程 break; } }); 47.委托化delegate 你在登记事件的处理器的时候可以加入配置这个选项。一个简易选择符,用于过滤目标元素,或是往下一层查找目标的子孙。 el.on('click', function(e,t) { // 执行事件具体过程 }, this, { // 对子孙'clickable'有效 delegate: '.clickable' }); 48.翻hover 这是一个Ext的翻菜单的实例: // handles when the mouse enters the element function enter(e,t){ t.toggleClass('red'); } // handles when the mouse leaves the element function leave(e,t){ t.toggleClass('red'); } // subscribe to the hover el.hover(over, out); 49.移除事件句柄removeAllListeners 在该元素身上移除所有已加入的侦听器。 el.removeAllListeners(); 50.是否一次性触发single 你在登记事件的处理器的时候可以加入配置这个选项。true代表为事件触发后加入一个下次移除本身的处理函数。 el.on('click', function(e,t) { // 执行事件具体过程 }, this, { single: true // 触发一次后不会再执行事件了 }); 51.缓冲buffer 你在登记事件的处理器的时候可以加入配置这个选项。若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发,则原处理器句柄将不会被启用,但是新处理器句柄会安排在其位置。 el.on('click', function(e,t) { // 执行事件具体过程 }, this, { buffer: 1000 // 重复响应事件以一秒为时间间隔 }); 52.延时delay 你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后处理函数延时执行的时间。 el.on('click', function(e,t) { // 执行事件具体过程 }, this, { // 延迟事件,响应事件后开始计时(这里一秒) delay: 1000 }); 53.目标target 你在登记事件的处理器的时候可以加入配置这个选项。如果你想另外指定另外一个目标元素,你可以在这个配置项上面设置。这可保证在事件上报阶段中遇到这个元素才会执行这个处理函数。 复制代码 代码如下: el.on('click', function(e,t) { // 执行事件具体过程 }, this, { // 遇到里头的第一个'div'才会触发事件 target: el.up('div') }); 十、尺寸&大小 54.getHeight 返回元素的偏移(offset)高度。 var ht = Ext.fly('elId').getHeight(); 55.getWidth 返回元素的偏移(offset)宽度。 var wd = Ext.fly('elId').getWidth(); 56.setHeight 设置元素的高度。 Ext.fly('elId').setHeight(); 57.setWidth 设置元素的宽度。 Ext.fly('elId').setWidth(); 58.getBorderWidth 返回指定边(side(s))的padding宽度。 var bdr_wd = Ext.fly('elId').getBorderWidth('lr'); 59.getPadding 可以是t, l, r, b或是任何组合。例如,传入lr的参数会得到(l)eft padding +(r)ight padding。 var padding = Ext.fly('elId').getPadding('lr'); 60.clip 保存当前的溢出(overflow),然后进行裁剪元素的溢出部分 - 使用unclip()来移除。 Ext.fly('elId').clip(); 61.unclip 在调用clip()之前,返回原始的裁剪部分(溢出的)。 Ext.fly('elId').unclip(); 62.isBorderBox 测试不同的CSS规则/浏览器以确定该元素是否使用Border Box。 if (Ext.isBorderBox) { // } 十一、定位 63.getX 返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。 var elX = Ext.fly('elId').getX() 64.getY 返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。 var elY = Ext.fly('elId').getY() 65.getXY 返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。 var elXY = Ext.fly('elId').getXY() // elXY是数组 66.setX 返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。 Ext.fly('elId').setX(10) 67.setY 返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。 Ext.fly('elId').setY(10) 68.setXY 返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。 Ext.fly('elId').setXY([20,10]) 69.getOffsetsTo 返回当前元素与送入元素的距离。这两个元素都必须是属于DOM树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。 var elOffsets = Ext.fly('elId').getOffsetsTo(anotherEl); 70.getLeft 获取左边的X坐标。 var elLeft = Ext.fly('elId').getLeft(); 71.getRight 获取元素右边的X坐标(元素X位置 + 元素宽度)。 var elRight = Ext.fly('elId').getRight(); 72.getTop 获取顶部Y坐标。 var elTop = Ext.fly('elId').getTop(); 73.getBottom 获取元素的底部Y坐标(元素Y位置 + 元素宽度)。 var elBottom = Ext.fly('elId').getBottom(); 74.setLeft 直接使用CSS样式(代替setX()),设定元素的left位置。 Ext.fly('elId').setLeft(25) 75.setRight 设置元素CSS Right的样式。 Ext.fly('elId').setRight(15) 76.setTop 直接使用CSS样式(代替setY()),设定元素的top位置。 Ext.fly('elId').setTop(12) 77.setBottom 设置元素CSS Bottom的样式。 Ext.fly('elId').setBottom(15) 78.setLocation 无论这个元素如何定位,设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标(display:none或未加入的elements会当作无效而返回false)。 Ext.fly('elId').setLocation(15,32) 79.moveTo 无论这个元素如何定位,设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标(display:none或未加入的elements会当作无效而返回false)。 Ext.fly('elId').moveTo(12,17) 80.position 初始化元素的位置。如果未传入期待的位置,而又还没定位的话,将会设置当前元素为相对(relative)定位。 Ext.fly('elId').position("relative") 81.clearPositioning 当文档加载后清除位置并复位到默认。 Ext.fly('elId').clearPositioning() Ext.fly('elId').clearPositioning("top") 82.getPositioning 返回一个包含CSS定位信息的对象。有用的技巧:连同setPostioning一起,可在更新执行之前,先做一个快照(snapshot),之后便可恢复该元素。 var pos = Ext.fly('elId').getPositioning() 83.setPositioning 由getPositioning()返回的对象去进行定位。 Ext.fly('elId').setPositioning({ left: 'static', right: 'auto' }) 84.translatePoints 送入一个页面坐标的参数,将其翻译到元素的CSS left/top值。 // {left:translX, top: translY} var points = Ext.fly('elId').translatePoints(15,18);

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值