`

Extjs中的小技巧

    博客分类:
  • ext
ext 
阅读更多
一、从form中获取field的三个方法:

1、Ext.getCmp('id');

2、FormPanel.getForm().findField('id/name');

3、Ext.get('id/name');//前提是FormPanel在界面上显示出来了。



二、ExtJS如何给textfield赋值的三个方法:

var value="值";

1、 fs.form.findField(id/name).setValue(value);

2、 Ext.get(id/name).setValue(value);

3、 Ext.getCmp(id).setValue(value);



三、Ext grid中得到选择行的方法



在Ext grid中假设有一个名称为grid的对象。

(1)grid.getStore().getRange(0,store.getCount());//得到grid所有的行

(2)grid.getSelectionModel().getSelections()//得到选择所有行

(3)grid.selModel.selections.items;//得到选择所有行

(4)grid.getSelectionModel().getSelected();//得到选择行的第一行



四、formPanel组件load数据时combo的自动赋值

  combo有个hiddenName这个属性,这个属性是真正提交的值,在加载的时候你将这个属性的设置到reader中,就可以自动选择到指定的值了,比如说:hiddenName:'value',那么你的reader中就应该有一个 {name:'value'}.



五、ExtJS 重置表单的方法:

有三种方法能实现form表单的重置,假设var fs=new Ext.form.FormPanel({...});
(1)fs.form.reset();//重置form
(2)fs.getForm().getEl().dom.reset();//重置form
(3)Ext.getCmp('fs').form.reset();

// 添加页头工具栏
var gridHead = grid.getView().getHeaderPanel(true);
var tbHead = new Ext.Toolbar(gridHead);
// 在页头工具栏右侧添加按钮
Ext.get(Ext.get(tbHead.addSpacer().getEl()).dom.parentNode).setStyle('width','100%');
tbHead.addButton(...);
// 页头双工具栏
var tbar2container = Ext.DomHelper.append(tbHead.el,{tag:'div',id:Ext.id()},true);
var tbar2 = new Ext.Toolbar(tbar2container);
tbar2.add("Second row:",{text:"Button 3"},'-',{text:"button 4"});

Extjs中的两个小技巧

首先要说的是一个BUG,其实,严格来说不算是一个真正意义上的BUG。当我们在FormPanel里面添加items的元素的时候,多数人会直接new,比如这样。

                             items : [new Ext.form.TextField({
                                                fieldLabel : '姓名',
                                                anchor : '100%',
                                               name : 'student.name'
                                    })]

        有时候这个输入框或者下拉框在外面需要使用,我们就必须将它定义到外面来,items[cfg.owner.txtName]就是这样了,这个时候,我们就会遇到这个BUG,如果你的这个FormPanel是放在window上,是通过点击按钮new出来一个window来实现,BUG就出现了,我关闭掉这个window,然后再点击按钮的话,就不会出现window了。原因是txtName是定义在外面的,类似于一个全局的变量,当关闭window的时候,就将这个全局的变量关掉了,再打开就不可以了,在items里面new的话,每次打开都会new一个全新的对象,也就不会碰到这样的问题了。如果输入框或者下拉框在外面需要使用的话,可以给他们添加一个id属性,通过Ext.getCmp(‘id’)来获得这个控件。

       Extjs的combobox功能很强大,接下来,就是用它来模仿一个百度的功能。

            

       百度能输入英文从而来获取中文提示,现在要做的就是用Extjs的combobox来做这个。在数据库中有这样一张表。

               
      
       前台的Extjs没有什么特别要地方,要注意的就是combobox中的minChars属性,它指的是输入几个字符的时候combobox自动完成,从上面的表中可以看出,我们可以设置为1,也可以设置为2。接下来就是后台的事情了,首先必须知道,combobox传送字符串的键(查Ext的API可以知道是"query"),从而获得输入的值。

                      String pinyin = request.getParameter("query");
                      List gradeList;
                      if(null == pinyin || ("").equals(pinyin)){
                                gradeList = gradeService.selectAll();
                      }else{
                                gradeList = gradeService.selectByPinYin(pinyin);
                      }
                      request.setAttribute("gradeList", gradeList);
                      return mapping.findForward("gradeXml");

               

        这样我们就实现了这个功能。还有一点要说的,如果数据库中有大量的中文,我们不可能给每条数据添加拼音缩写,这个时候就可以使用java的第三方包pinyin4j-2.5.0.jar来实现中文转成拼音。
extjs-grid

1)表格在进入下一层的时候无法高亮显示的解决办法
grid中,deferRowRender:false     //渲染行高亮显示

2)grid,checkbox
this.ssm = new Ext.grid.CheckboxSelectionModel();
this.ssm.handleMouseDown = Ext.emptyFn;//这个方法可以在点击行的时候不会选择checkbox,点击checkbox的时候不会选择行,然后再增加rowclick事件

3)grid,column,hide
隐藏:grid.getColumnModel().setHidden( 列索引, true);
显示: grid.getColumnModel().setHidden( 列索引, false);


http://blog.sina.com.cn/s/blog_894de61a0100t8zi.html
 
分享到:
评论

相关推荐

    extjs4中文文档

    通过学习这份文档,开发者可以掌握EXTJS4的基本用法和高级技巧,从而高效地开发出功能丰富的Web应用。同时,文档还可能涵盖了EXTJS4的升级、调试、性能优化等相关内容,帮助开发者解决实际开发过程中遇到的问题。

    extjs4 自己写的webdesktop小实例,更新中

    这个"webdesktop1.0"压缩包包含了一个基于ExtJS4实现的Web桌面小实例,旨在帮助开发者了解如何利用ExtJS4构建类似桌面环境的Web应用。 在ExtJS4中,Web桌面通常指的是一个模仿传统桌面操作系统界面的Web应用框架,...

    Extjs自动最大化panel

    在EXTJS中,"Extjs自动最大化panel"是一种高级布局技术,它允许用户创建一个能够自动适应并填充其容器的面板(Panel)。这种特性对于构建响应式和自适应的用户界面至关重要,尤其在现代Web应用中,用户期望界面能够...

    Extjs3.0 cookbook

    **EXTJS 3.0 COOKBOOK:深入理解与实战应用** ...这本书不仅涵盖了EXTJS的基本用法,还探讨了如何在实际项目中应用EXTJS,以解决各种前端挑战。无论是初学者还是有经验的开发者,都能从中获益,提升EXTJS开发能力。

    资料:包括extjs2.0源码

    通过深入EXTJS 2.0的源码,开发者不仅可以提升EXTJS的使用技巧,还能学习到JavaScript编程的最佳实践,对于前端开发者来说是一份宝贵的资源。不过,由于EXTJS后续版本(如EXTJS 4.x、6.x及更高版本)引入了许多新...

    Extjs+Designer+Preview 官方的extjs可视化IDE设计工具3.0 汉化版

    4. **代码生成**:Designer会自动生成基于所见即所得的设计的ExtJS代码,开发者可以直接将这些代码整合到项目中。 5. **实时预览**:Preview功能允许开发者在设计过程中实时查看界面效果,确保设计的准确性和用户...

    Extjs in action

    - **基础组件**:介绍了ExtJS中最基本的组件类型,例如按钮、文本框等。 - **容器组件**:解释了如何利用容器来组织和布局其他组件。 - **事件处理**:详细讲解了如何处理组件的点击、拖拽等事件。 ### 三、创建一...

    ExtJS桌面化(desktop)插件Demo项目

    在本项目中,"ExtJS桌面化(desktop)插件Demo项目"展示了如何利用ExtJS的桌面化功能创建一个类似于传统桌面应用的用户界面。这个Demo项目的核心在于对"desktop"插件的定制和应用,该插件提供了构建桌面样式的应用程序...

    extjs 6 gettng started

    ### ExtJS 6 入门知识点 #### 一、ExtJS 6 概览 - **版本背景**:ExtJS 6 是 Sencha 公司旗舰框架的...无论是初学者还是经验丰富的开发者,都可以从这本书中找到有价值的信息,帮助他们更好地掌握和运用这一框架。

    extjs实现登陆验证

    在IT领域,特别是Web开发中,使用ExtJS框架进行用户登录界面的前端验证是一个常见的需求。...理解这些代码背后的逻辑,不仅能够帮助开发者快速搭建登录界面,还能够深入掌握ExtJS框架的使用技巧,提升前端开发效率。

    EXTJS2.0中文教程 实用开发指南

    这个"EXTJS2.0中文教程 实用开发指南"是一份非常适合初学者的资源,它详细介绍了EXTJS2.0的基础知识、核心组件以及实际开发中的应用技巧。 教程首先会引导你了解EXTJS2.0的基本概念,包括MVC架构、事件处理机制以及...

    EXTJS开发总结.pdf

    EXTJS是一种专为Rich Internet Applications (RIA)设计的前端JavaScript框架,它的主要定位与Prototype、jQuery...在实际项目中,结合良好的代码管理和调试技巧,EXTJS能够帮助企业构建出高效、用户体验优秀的Web应用。

    ExtJS编写的youtube视频播放组件 示例

    ExtJS 是一个强大的JavaScript库,主要用于构建富客户端的Web应用程序...5. 将外部API(如YouTube API)集成到ExtJS组件中的技巧。 通过深入研究这个示例,开发者可以进一步提升在ExtJS环境中构建复杂Web应用的能力。

    ExtJs GridPanel延时加载.rar

    在给定的"ExtJs GridPanel延时加载.rar"文件中,主要涉及的核心概念是ExtJs中的GridPanel组件以及延时加载技术。GridPanel是ExtJs中一个非常重要的组件,它用于展示表格数据,而延时加载则是一种优化大量数据处理的...

    ExtJs搜索控件、插件

    ExtJS是一个强大的JavaScript框架,主要用于构建富客户端应用。在ExtJS中,搜索控件和插件是提升用户体验...记得持续关注社区资源,如博客链接中提到的`kangsoft.iteye.com/blog/785141`,以便获取更多实践经验和技巧。

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

    作者在笔记中也提到了Extjs4的一些小技巧和心得,这些都是在实际开发过程中积累下来的宝贵经验。 最后,Extjs4框架允许开发者利用面向对象的编程方法来进行开发,MVC(Model-View-Controller)模式的采用,使得代码...

    extjs4 开发的部分纯静态页面

    博文链接指向的是一个ITEYE博客文章,虽然具体内容无法在当前环境中查看,但我们可以推测博主可能分享了关于如何使用ExtJS 4开发静态页面的技巧、示例代码或者常见问题解决方案。 在压缩包的文件名称列表中,我们有...

Global site tag (gtag.js) - Google Analytics