`

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高级技巧

      开发过程中总结ExtJs3.1一些技巧.

      ExtJS入门教程 超级详细

      ext是强大的js类库 它提供了丰富的,非常漂亮的外观体验,成为众多界面层开发人员的追捧!其核心的组件基本覆盖了我们构建富客户端的常用的组件。该文档超级详细,是学习ext的法宝!

      ExtJS4中文教程2 开发笔记 chm

      JavaScript对象与继承教程之内置对象(下) JavaScript对象及继承教程(上) javascript正则表达式(一) javascript正则表达式(二) JavaScript的10种跨域共享方法 JavaScript类型总览 JavaScript获取文本框光标的像素...

      深入浅出ExtJS PDF 扫描版

      不仅全面地阐述了ExtJS的基础知识,而且深入浅出地讲解了ExtJS开发中的高级技巧,同时还给出了大量专家级的建议。通过学习本书,读者将感受到ExtJS的无穷魅力和Ajax技术带来的完美体验。 本书适合有一定CSS和HTML...

      深入浅出ExtJS学习PDF 文档下载

      不仅全面地阐述了ExtJS的基础知识,而且深入浅出地讲解了ExtJS开发中的高级技巧,同时还给出了大量专家级的建议。通过学习本书,读者将感受到ExtJS的无穷魅力和Ajax技术带来的完美体验。 本书适合有一定CSS和HTML...

      Extjs4开发笔记(收集整理).pdf

      Extjs4开发笔记,自己学习Extjs4的一些心得体会和小技巧

      ssh+extjs设计的订单管理系统

      该系统结合struts+hibernate+spring使用四层架构设计, 采用extjs设计界面,实现用户登录及grid的搜索显示功能, 该系统没有完全开发完成, 实现了部分功能, 仅供参考者学习一些项目的设计思路和extjs的使用技巧....

      精通JS脚本之ExtJS框架.part2.rar

      3.1.3 ExtJS与常见JavaScript库的介绍与对比 3.2 创建第一个程序 3.2.1 下载ExtJS 3.2.2 部署到开发工具中 3.2.3 编写HelloWorld.html 3.2.4 运行调试ExtJS 3.3 辅助开发 3.3.1 调试工具Firebug 3.3.2 开发...

      ExtJs获取表单元素的值

      通过多级的代码来获取组件当中表单元素值的一些技巧

      ajax框架extjs开发指南

      extjs开发介绍和帮助,详细介绍了extjs的功能和开发技巧

      ExtJS 开发

      ExtJS开发资料 公司内部培训使用 ExtJS的常用对象的介绍及其使用技巧 以及 在开放中常见问题及其解决方案

      EXTJS学习笔记

      浅显易懂的Extjs的学习 归纳一些常用的开发技巧

      JavaScript凌厉开发:ExtJS3详解与实践

      资源名称:JavaScript凌厉开发:Ext JS 3详解与实践内容简介:本书详细介绍Ext JS框架体系结构,以及利用HTML/CSS/Javascript进行前端设计的方法和技巧。作者为Ext中文站站长领衔的三个国内Ext JS先锋,在开发...

      extjs实用开发指南

      extjs实用开发指南,该指南详细的介绍了ext开发技巧以及案例

      基于Extjs的开源控件库ExtAspNet

      注:ExtAspNet 基于一些开源程序,比如ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor. 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 开源网址:...

      精通JS脚本之ExtJS框架.part1.rar

      3.1.3 ExtJS与常见JavaScript库的介绍与对比 3.2 创建第一个程序 3.2.1 下载ExtJS 3.2.2 部署到开发工具中 3.2.3 编写HelloWorld.html 3.2.4 运行调试ExtJS 3.3 辅助开发 3.3.1 调试工具Firebug 3.3.2 开发...

      Extjs实用开发指南

      《Ext JS实用开发指南》有两大特点:第一,授人以鱼,根据Ext JS的构成体系全面系统地讲解了其开发方法与技巧,每个知识点都辅之以翔实的案例,同时包含大量最佳实践,适合系统学习和开发参考;第二,授人以渔,宏观...

      Ext Js权威指南全套(1-3)

      ExtJs权威指南全套、中文、PDF、非扫描、高清电子书籍、全面讲解EXTJS的语法规则、开发方式和技巧

      EXTJS总结.txt

      17.is 测试当前元素是否与传入的选择符相符一致。 复制代码 代码如下: var el = Ext.get('elId'); if (el.is('p.myCls')) { // 条件成立 } 18.findParent 定位于此节点,以此节点为起点,向外围搜索外层的父...

      extjs4图表绘制之折线图实现方法分析

      主要介绍了extjs4图表绘制之折线图实现方法,结合实例形式分析了extjs4绘制折线图的相关操作技巧、实现方法与相关注意事项,需要的朋友可以参考下

    Global site tag (gtag.js) - Google Analytics