`
skzr.org
  • 浏览: 367227 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

ExtJS4 textfield msgTagert=side显示和以前不一样

 
阅读更多

 

  1. 问题现象多说无益,有图有真象:)


  2. 详细代码可以看, ExtJS 包中的例子:/examples/form/dynamic.html
    Example: Form 1 - Very Simple
  3. Fixed:请去掉logger.info这一行,这个logger是我自己定义的仿造日志货
    if (Ext.versions.extjs.getMajor() == 4) {
    	Ext.Loader.require('Ext.layout.component.field.Field', function() {
    		logger.info('修复form.Field在msgTarget=side时的width显示变化的bug');
    		
    		Ext.layout.component.field.Field.prototype.errorStrategies.side.getErrorElWidth = function(owner) {
    			if (owner.autoFitErrors && owner.hasActiveError()) return owner.errorEl.getWidth();
    
    			if (!this.errorElWidth) {
    				var errorEl = owner.errorEl,
    	    			display = errorEl.getStyle('display');
    	    		if (display == 'none') errorEl.setDisplayed(true);
    	
    	    		this.errorElWidth = errorEl.getWidth();
    	    		if (display == 'none') errorEl.setDisplayed(false);
    			}
    			
    			return this.errorElWidth;
    		};
    		
    		Ext.layout.component.field.Field.prototype.errorStrategies.side.prepare = Ext.Function.createSequence(
    			Ext.layout.component.field.Field.prototype.errorStrategies.side.prepare,
    			function(owner, info) {
    	            if (info.autoWidth) info.width += this.getErrorElWidth(owner);
    			}
    		);
    			
    		Ext.layout.component.field.Field.prototype.errorStrategies.side.adjustHorizInsets = function(owner, info) {
                info.insets.right += this.getErrorElWidth(owner);
            };
    	});
    	
    }
     

 

  • 大小: 118.9 KB
  • 大小: 121.8 KB
1
3
分享到:
评论
1 楼 skzr.org 2011-07-20  
sencha开发组的解答:
引用

This is a new feature of 4.x. It uses the entire width so the layout looks better but if you use the msgTarget as side it will shrink the field to allow the error icon in there. IMO, this behavior is nice!


不过对于msgTarget=side的这个特性,我感觉 视觉上有点 参差不齐

相关推荐

    ExtJs5 去掉textfield边框

    在给定的描述中,我们看到开发者遇到了一个问题:默认情况下,ExtJs5的`textfield`组件有明显的边框,但通过添加特定的配置项和CSS样式,可以成功移除这些边框。 首先,让我们详细了解一下如何在ExtJs5中配置`...

    extjs 5 textfield 金额控件扩展

    7. **使用示例**:在应用中引入这个扩展,然后像使用普通的Textfield一样使用`Ext.form.field.MoneyField`,但会自动获得金额输入的特性。 通过这个扩展,开发者可以简化金额输入的处理,提高用户体验,同时也保证...

    Extjs4添加tooltip

    Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败。ExtJS4 已完全重新写 grid ...

    学习ExtJS TextField常用方法

    ExtJS 是一个基于 JavaScript 的富互联网应用程序框架,提供了许多实用的控件和方法来帮助开发者快速构建高质量的 Web 应用程序之一就是 TextField,在本文中,我们将详细介绍 ExtJS TextField 的常用方法和属性。...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...

    extjs 进度条的显示

    本文将深入探讨如何在ExtJS中实现进度条的显示,这是一个在数据加载、文件上传或任何需要用户等待的任务中非常实用的功能。通过理解和应用以下知识点,你可以有效地在你的ExtJS项目中集成进度条,提升用户体验。 ##...

    ExtJs消息提示框

    8. **多消息管理**:如果需要同时显示多个消息,`Notification`可以管理这些消息的堆叠和显示顺序。 总之,`Ext.ux.window.Notification`是ExtJs中一个强大的工具,用于创建直观、可定制的用户通知。通过理解和掌握...

    extjs form textfield的隐藏方法

    this.formpanel = new Ext.FormPanel({ items: [{ fieldLabel: ‘代码’, name: ‘FCode’, anchor:’100%’, id: ‘fid’ },{ fieldLabel: ‘名称’, name: ‘FName’, ... 只需将textfield的hidden和hideLabel配

    包含各种类型的extjs小图标,Extjs4小图标

    在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...

    Extjs4的demo

    在本例中,我们假设你已经在MyEclipse中创建了一个新的Web项目,并命名为"Extjs4"。将ExtJS 4.0.7的文件放入Webroot目录,以便于访问。 接下来,你需要设置一个学习环境。确保你的机器上已经安装了MyEclipse和...

    extjs4学习文档

    EXTJS4的学习文档还包括更多关于组件、布局、数据绑定、事件处理等方面的详细内容,这些都是构建EXTJS应用不可或缺的知识。通过深入学习和实践,开发者可以熟练掌握EXTJS4,创建功能丰富的Web应用程序。

    ExtJS4多文件上传,带进度条及管理

    总之,"ExtJS4多文件上传,带进度条及管理"是Web开发中的高级功能,它结合了ExtJS4的组件化开发优势和swfupload的高效上传能力,为用户提供了一流的文件上传体验。开发者需要掌握相关技术和API,才能灵活地实现这一...

    extjs4中文文档

    这个中文文档是EXTJS4的官方文档翻译版,为开发者提供了详细的API参考和教程,帮助理解EXTJS4的各种组件、功能和工作原理。 EXTJS4的核心特性包括: 1. **组件化**:EXTJS4引入了基于MVC(Model-View-Controller)...

    ExtJS4中文教程2 开发笔记 chm

    Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)——MVC构架(下) Extjs4 API文档阅读(四)——Data ExtJS4 Grid组件 Extjs4 TreeGrid Extjs4 TreePanel...

    extjs4-教程

    ### ExtJS4基础教程知识点 #### 1. ExtJS4开发环境搭建 ExtJS4是使用JavaScript进行开发的框架,专门用于构建富互联网应用(RIA)。搭建ExtJS开发环境需要预先安装一些软件和配置开发环境。以下步骤详细介绍了如何...

    extjs4完整下载

    ExtJS4正式版(官方完整下载包):含所有的源代码,html,api文档,示例。官方网站下载现在需要注册,这个仅供爱好者个人学习使用,如果项目中使用请至官方网站购买。

    Extjs4 grid使用例子

    在ExtJS4中,MVC帮助我们分离业务逻辑、视图和控制器,使得代码更易于维护和扩展。在这个例子中,Model定义了数据模型,View负责呈现数据,而Controller作为中间人,处理用户交互和数据更新。 2. **Grid组件**: ...

    ExtJS4之初体验

    ### ExtJS4之初体验 #### 一、准备工作 在开始使用ExtJS4进行开发之前,我们需要做一些基础的准备工作,确保开发环境已经搭建好,并且能够顺利地运行第一个ExtJS4程序。 ##### 1. 浏览器兼容性 ExtJS4支持大部分...

Global site tag (gtag.js) - Google Analytics