`

ExtJs 的一些技巧与问题

阅读更多
[color=white]
[list=1]
  • 修改列表(grid)里store的加载url
  •  
     grid.getStore().proxy.conn.url = "xxx.jsp";
     grid.getStore().reload();
      
  • Ext.data.Store里baseParams与Store.load({params:{}})的区别:
  •      baseParams里的参数是一直存在的,而params里的参数,只有load时
         才会传递过去,当调用reload时参数就不存在了
  • 使Window以页面的相对大小显示
  •  height: document.body.clientHeight * xx%
     width: document.body.clientWidth * xx%
    

  • Ext.FormPanel load(自动加载) 时的json格式
  • [list]
  • {data:[{a:'a'},{b:'b'}]},其中data是规定的,不能更改名称
  • 假如不为data的话,比如{root:[{a:'a'},{b:'b'}]},那么form
  • 是自动加载不进去的,这时你需要在Ext.FormPanel里添加
    reader属性,如:
    reader: new Ext.data.JsonReader({
               totalProperty: 'totalProperty',
               root: 'root'
            },[
               {name:'a'},
               {name:'b'}
            ])
     这样做的好处是可以手动选择想加载的字段!
    
    

    [/list]
  • 获得iframe的方法
  •  var ifr_window = window.frames["name/id"];  
    
  • 制作表单的时候,经常form组件显示不出来或不正常其中有两个原因
    • id冲突,这个问题经常由重用引起的
    • 布局,form组件只有在'form'布局才显示正常,应添加layout:'form'
  • Ext.WindowGroup 负责把 window 归入一组,方便管理;
  •  var wgroup = new Ext.WindowGroup();
     var win=new Ext.Window({
          title:"窗口"	
          width:400,
          height:300,
          manager:wgroup}); 	
    //接下来就可以利用wgroup对这一组window进行操作啦!如
    1、隐藏全部window
    wgroup.hideAll();
    
  • Js 两个定时器
  • //将执行一次Expression
    setTimeout(Expression,DelayTime)
    //每隔DelayTime,执行一次
    setInterval(expression,delayTime)
    
  • 早上想找一个刷新树的方法,
  • 找了TreePanel,TreeLoader都没找到,
    结果发现只有根结点才有reload方法!
  • 今天测试了一下,Ext除了用html显示图片外还可以用
  •     下面的autoCreate方式在form里显示,代码如下:
    {
     fieldLabel: '海报',
     autoCreate:{
         tag: "input",
         type: "image",
         src: "images/add.gif",
         width: 150,
         height: 200,
         autocomplete: "off"
    }
    
  • Ext 自定义事件三步曲
  • [list]
  • 添加事件addEvents(str)
  •  this.addEvents('eventName');
    
  • 添加事件监听器addListener(eventName,fn,scope);
  •  this.on('eventName',this.fn,scope);
    
  • 激发事件fireEvent(eventName,args...)
  •  this.fireEvent('eventName',arg0,arg1,...);
    //*
      *----------------------------------------
      *添加事件监听器里的执行的方法this.fn里的参数就是
      *由激发事件时提供的,如agr0,agr1,...
      *-----------------------------------------
      */
    

    [/list]
  • Ext reset() 方法刷新时,无法刷新inputType:file的值的解决方法:
  • 不要使用ext Form的刷新方法:
    FormPanel.form.reset()
    

    而是换成使用Dom的刷新方法:
    FormPanel.form.getEl().dom.reset();
    
  • 不断更新中,大家发现什么问题和技巧,欢迎提出,我会在这里更新的
  • [/list]
    [/color]
    分享到:
    评论
    19 楼 qiu768 2009-01-09  
    z_jingwei 写道

    楼主: form显示时确实有些问题,但多可以解决。 layout:form时问题比较少,我们使用时发现用table布局时问题比较多。使用其它布局时,建议用一个panel来包装field,panel使用form布局,而field的hideLabel设置为true。 另外grid在tabPanel中显示时也有些问题


    我目前遇到个很奇怪的问题 就是在form中用了tabPanel后 有些字段值加载不上!就是第一次加载表单的时候有几个字段加载不上,不刷新页面的时候,再次打开表单加载就能加载上。问题应该是出在第一次打开表单的时候有些字段没有渲染上,不知道这个问题如何解决??困扰我很久了,项目就要上线了,很是烦心!!
    18 楼 z_jingwei 2008-12-29  
    楼主:

    form显示时确实有些问题,但多可以解决。
    layout:form时问题比较少,我们使用时发现用table布局时问题比较多。使用其它布局时,建议用一个panel来包装field,panel使用form布局,而field的hideLabel设置为true。

    另外grid在tabPanel中显示时也有些问题
    17 楼 z_jingwei 2008-12-29  
    lims 写道
    EXTJS,前几天,给客户替换了一个功能,用了EXTJS,一个页面有600条数据,显示需要8秒左右的时间,没法忍受了,客户又要换回以前那种table的了。


    这个应该是表格渲染时的耗时,定义了renderer。否则不会这么慢。楼主可以从renderer上考虑一下,比如从server端返回cell的值
    16 楼 wyyacyy 2008-12-25  
    dayone 写道
    jacky9692 写道
    ybb 写道
    在加载grid 表格数据的时候,
    直接写成
    datastroe.load({params:{start:0,limit:15}});

    往往不出现load...提示的小窗,
    改成
    setTimeout(function(){datastroe.load({params:{start:0,limit:PAGE_15}})},1);

    即可出现加载数据的loading...提示


    不需要这样麻烦:直接在定义的grid里面加上属性loadMask:true就可以显示loading...小窗口了!



    loadMask:true  正解

    如果出现loading时候,直接调用:loadMash:true,即可
    15 楼 dayone 2008-12-04  
    jacky9692 写道
    ybb 写道
    在加载grid 表格数据的时候,
    直接写成
    datastroe.load({params:{start:0,limit:15}});

    往往不出现load...提示的小窗,
    改成
    setTimeout(function(){datastroe.load({params:{start:0,limit:PAGE_15}})},1);

    即可出现加载数据的loading...提示


    不需要这样麻烦:直接在定义的grid里面加上属性loadMask:true就可以显示loading...小窗口了!



    loadMask:true  正解
    14 楼 jacky9692 2008-10-10  
    ybb 写道
    在加载grid 表格数据的时候,
    直接写成
    datastroe.load({params:{start:0,limit:15}});

    往往不出现load...提示的小窗,
    改成
    setTimeout(function(){datastroe.load({params:{start:0,limit:PAGE_15}})},1);

    即可出现加载数据的loading...提示


    不需要这样麻烦:直接在定义的grid里面加上属性loadMask:true就可以显示loading...小窗口了!
    13 楼 vishare 2008-10-09  
    # 使Window以页面的相对大小显示
    Java代码 复制代码

       1. height: document.body.clientHeight * xx% 
       2. width: document.body.clientWidth * xx% 

    要是这么写,好像是要语法错的呀
    例如我写成这个样子.loginForm表示window里的一个form组件
    var win = new Ext.Window({
    width: document.body.clientWidth * 80% ,
    height: document.body.clientHeight * 60% ,
    maximizable: true,
    resizable: true,
    title: Mytest,
    closable: true,
    modal: true,
    layout: 'border',
    items: [loginForm],
    closeAction: 'hide'
    });

    要实现那个效果应该怎么写呢?
    12 楼 absolute007 2008-08-07  
    lims 写道
    EXTJS,前几天,给客户替换了一个功能,用了EXTJS,一个页面有600条数据,显示需要8秒左右的时间,没法忍受了,客户又要换回以前那种table的了。

    这种情况当然是分页了,或者使用延时加载,先加载一部分数据,然后根据需要慢慢的加载了。不可能一次性将所有的数据加载完啊,不然的话,你根据一列来排序都需要好久的时间。
    11 楼 chanball 2008-08-06  
    引用
    dimboo 23 小时前
    请问你刷新树的方法找到了吗?
    dianbo.zhu@gmail.com


    tree.root.reload()
    10 楼 dimboo 2008-08-05  
    请问你刷新树的方法找到了吗?
    dianbo.zhu@gmail.com
    9 楼 yixiaotian 2008-07-26  
    谁有EXT和J2EE整合的例子,给小弟一个啊!非常感谢!
    8 楼 cnpollux 2008-07-24  
    http://www.codeproject.com/KB/ajax/AjaxScrollingPagination.aspx,这里有个例子,分批加载数据。是C#代码,但是JS代码还是有参考价值的
    7 楼 kimmking 2008-07-23  
    sp42 写道
    引用
    EXTJS,前几天,给客户替换了一个功能,用了EXTJS,一个页面有600条数据,显示需要8秒左右的时间,没法忍受了,客户又要换回以前那种table的了。

    嗯...这个。。要么分页,要么用LiveGrid

    偶的exreport,
    8s可以显示5w的数据了。

    btw:在想,gridpanel可不能分批的异步加载数据,
    即,100rows,100rows的取,然后加到当前的页面?
    6 楼 sp42 2008-07-23  
    引用
    EXTJS,前几天,给客户替换了一个功能,用了EXTJS,一个页面有600条数据,显示需要8秒左右的时间,没法忍受了,客户又要换回以前那种table的了。

    嗯...这个。。要么分页,要么用LiveGrid
    5 楼 zhangtianqi 2008-07-20  
    楼主很好人!
    4 楼 Saro 2008-07-17  
    formPanel.form.setValues({id:1,name:'aabbcc'});

    这样加载更方便通用点。
    3 楼 ybb 2008-07-17  
    在加载grid 表格数据的时候,
    直接写成
    datastroe.load({params:{start:0,limit:15}});

    往往不出现load...提示的小窗,
    改成
    setTimeout(function(){datastroe.load({params:{start:0,limit:PAGE_15}})},1);

    即可出现加载数据的loading...提示
    2 楼 lims 2008-07-16  
    EXTJS,前几天,给客户替换了一个功能,用了EXTJS,一个页面有600条数据,显示需要8秒左右的时间,没法忍受了,客户又要换回以前那种table的了。
    1 楼 reignile 2008-07-15  
    不错,赞楼主,对我这个初学者很有用,希望继续~

    相关推荐

      extJS 一些简单实例

      在"extJS 一些简单实例"这个主题中,我们将探讨ExtJS的基础知识以及如何通过一些简单的示例来理解和运用它。 首先,ExtJS的核心是它的组件模型。这些组件包括按钮、表格、窗口、菜单等,可以构建出复杂的用户界面。...

      Django1.6与extjs4整合

      **标题:“Django1.6与ExtJS4整合”** **描述:** 本文将深入探讨如何将Django 1.6这一...通过以上知识点的学习,开发者能够了解Django 1.6与ExtJS 4整合的基本步骤和技巧,从而实现高效、功能强大的Web应用开发。

      Extjs6示例中文版

      - **调试技巧**:掌握基本的调试技巧对于定位和解决问题至关重要。例如,使用浏览器的开发者工具查看控制台错误信息或设置断点进行单步调试。 #### 6. 总结 综上所述,《Extjs6示例中文版》不仅提供了详细的ExtJS6...

      ExtJs 实例+ExtJs中文教程(学习extjs必备)

      文件"ExtJS 实用简明教程.pdf"很可能是这个中文教程的一部分,或者是一个独立的简明指南,它可能包含了一些关键概念的快速入门、重要组件的使用方法,以及一些实用技巧。PDF格式使得你可以离线阅读,方便随时查阅。 ...

      ExtJs2.0学习系列

      本系列的学习资料将深入探讨ExtJS 2.0的核心特性与应用技巧。 一、组件系统 ExtJS 2.0的组件系统是其核心部分,包括各种UI元素,如按钮(Button)、表格(Grid)、面板(Panel)、表单(Form)等。这些组件可以独立...

      EXTJS

      在"工具"标签下,我们可以推断这篇博客可能讨论了EXTJS的开发工具、调试技巧或者是使用EXTJS进行项目构建的辅助工具。例如,EXTJS 提供的Sencha CMD是一个命令行工具,用于自动化构建流程,包括编译、压缩、合并代码...

      extjs技术文档资料

      标题“EXTJS技术文档资料”表明这是一份关于EXTJS框架的详细学习资源,可能包含EXTJS的基础知识、进阶技巧、API参考、示例代码等内容。这些文档对于开发者来说是十分宝贵的,可以帮助他们更好地理解和掌握EXTJS的...

      extjs 学习心得笔记

      在探讨《ExtJS学习心得笔记》这一主题时,我们不仅会深入理解ExtJS框架的核心概念与实践技巧,还会从新手的角度出发,提炼出一系列有助于快速上手的学习策略,避免常见的学习陷阱,确保学习过程高效而有成效。...

      EXTJS视频教程说明

      EXTJS视频教程旨在帮助学习者掌握EXTJS的基本概念、组件使用以及实际应用技巧。 在本教程中,讲师通过大量实例详细讲解EXTJS的核心概念和技术,包括如何创建窗口、面板、表单、数据绑定等。教程注重理论与实践相...

      ExtJS与.NET结合开发实例-殷良胜

      《ExtJS与.NET结合开发实例》是一份深入探讨如何将前端框架ExtJS与后端技术.NET相结合的应用实践教程。殷良胜和adyhpq作为主要的贡献者,提供了丰富的示例,帮助开发者理解和掌握这两者的集成技巧。 1. **ExtJS简介...

      extjs资料extjs资料extjs资料

      3. **ExtJS实用开发指南.chm**与**ExtJS实用开发指南.pdf**:这两个文件可能提供了实用的开发技巧和案例,帮助开发者在实际项目中应用ExtJS。它们可能包含了最佳实践、常见问题解决方案以及复杂的组件使用示例,对...

      php+ExtJS 开发实战

      - **进阶指南**: 对于想要进一步提高技能的开发者,书中也提供了一些进阶技巧,比如如何优化代码性能、如何扩展框架功能等。 #### 结语 《php+ExtJS 开发实战》这本书全面介绍了如何利用PHP和ExtJS构建高性能的Web...

      extjs4中文视频下载地址

      ### ExtJS 4.0 技术中文视频知识点解析 #### 一、ExtJS 4.0 概述与 Hello World 程序 - **概述**:ExtJS 是一款基于 JavaScript 的开源前端框架...希望这些知识点能帮助大家更好地理解和掌握 ExtJS 4.0 的使用技巧。

      Extjs 性能优化 High Performance ExtJs

      本文旨在针对具有一定 JavaScript 基础(理解面向对象、继承、作用域等概念)并且熟悉 Extjs 框架(了解组件间继承关系)的开发者,提供一些关于如何对 Extjs 的前台架构进行性能优化的方法。 #### 二、缓存 缓存...

      ExtJs开始之旅

      本讲将带你开启ExtJS的探索之旅,通过四个部分的学习,你将逐步掌握其核心概念和实践技巧。 首先,"初识ExtJS" 部分会介绍ExtJS的基本理念和架构,包括MVC(Model-View-Controller)设计模式的应用,以及如何利用这...

      php与extjs

      7. **错误处理和调试**:在PHP和ExtJS之间如何进行错误处理,以及各自的调试技巧。 8. **性能优化**:如何优化PHP的代码执行效率和ExtJS的资源加载,提升整体应用性能。 通过这样的结合,开发者可以利用PHP的强大...

      Django整合Extjs源码

      **Django整合ExtJS源码解析** 在Web开发领域,Django作为一个强大的Python Web框架,以其高效...通过这个项目,你可以掌握Django与ExtJS的集成技巧,提升前后端协作的能力,为将来开发更复杂的Web应用打下坚实的基础。

      extjs教程word版本

      3. **数据绑定**:ExtJS的数据绑定机制允许开发者将UI组件与数据源直接关联,实现数据的实时更新。教程可能会讲述Store、Model、Proxy等数据相关类的用法。 4. **API详解**:ExtJS提供了一个庞大的API,包括各种类...

      extjs6开发包

      具体来说,如果使用 GPL 版本的 ExtJS 开发的应用也必须采用 GPL 许可证发布源代码,除非该应用与 ExtJS 代码没有进行任何链接或集成。 #### 四、下载地址分析 虽然题目中提供的下载链接已失效,但从描述中我们...

      ExtJs高级技巧

      #### 二、ExtJs GridPanel列内自动换行与CSS调整 在`GridPanel`中,当某列的文本过长时,可能会影响到布局的美观性,此时可以通过以下两种方式解决: 1. **将列的width设为auto**:这种方法会使列宽自动伸展,但...

    Global site tag (gtag.js) - Google Analytics