`
exceljava
  • 浏览: 160270 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

ext FormPanel的显示问题

阅读更多

开始摸索着将ext整合到项目当中,点击超连接打开的FormPanel老是问题不断,主要问题有二:

1,显示不正常。点击前三次,出现不同的效果,当点击次数>=3以后,显示正常。三次显示效果如下:

2,在firefox下第一次,第二次点击都没效果,第三次点击才显示。并且,firefox下鼠标无法进入输入框。相当于输入框都禁用了。

相关代码如下:

 

 //增加form,window开始
      Ext.get("add").on('click',function() {
      var winlist;
      if(!winlist){  
                   var innerForm=new Ext.FormPanel({  
                    labelWidth: 125, // label settings here cascade unless overridden  
                    url:'<%=basePath%>add.ext',  
                    frame:true,  
                    // title: 'Simple Form',  
                    bodyStyle:'padding:5px 5px 0',  
                    width: 450,  
                    defaults: {width: 230},  
                    layout:'form',  
                    defaultType: 'textfield',  
                    items: [{  
                             fieldLabel: '姓名',  
                             name: 'name',  
                             allowBlank:false 
                           },{  
                             inputType:'password',
                             fieldLabel: '密码',  
                             name: 'password', 
                             allowBlank:false
                           },{
                             xtype:'combo',
                             store: new Ext.data.SimpleStore({

                                          fields: ["retrunValue", "displayText"],
                                          data: [[1,'男'],[2,'女']]

                                         }),

                                         valueField :"retrunValue",
                                         displayField: "displayText",
                                         mode: 'local',

                                         forceSelection: true,

                                         blankText:'请选择性别',

                                         emptyText:'选择性别',

                                         hiddenName:'sex',

                                         editable: false,

                                         triggerAction: 'all',

                                         allowBlank:false,
                                         fieldLabel: '性别',
                                         name: 'sex',
                                         anchor:'90%'},
                                         {  
                             fieldLabel: '电子邮件',  
                             name: 'email',
                             allowBlank:false,
                             vtype:'email'  
                           },  
                          
                           {  
                             fieldLabel: '手机',  
                             name: 'tel',
                             allowBlank:false
                            //vtype:'email'  
                           }, {  
                             fieldLabel: '电话',  
                             name: 'phone',
                             allowBlank:false
                            //vtype:'email'  
                           } , {  
                             fieldLabel: '联系地址',  
                             name: 'address',
                             allowBlank:false
                            //vtype:'email'  
                           }    
                          ]  
                    });  
                    winlist=new Ext.Window({  
                        title:'信息添加',
                        layout:'fit',  
                        width:450,  
                        height:400,  
                        closeAction:'hide',  
                        plain: true,  
                        buttonAlign:'center',  
                        buttons: [{  
                           text:'保存',  
                           scope:'DataType',  
                           type:'submit',  
                           disabled:false,  
                           handler:function(){  
                           innerForm.getForm().submit({  
                                method:'POST',  
                                waitMsg:'保存中,请稍候.....',   
                                      success:function(form,action){   
                                     grid.getView().refresh();  
                                    form.reset();  
                                    Ext.Msg.alert('信息增加','保存成功!');  
                                    this.disabled=false;   
                                    winlist.hide();   
                                                             

                           },  
                                failure:function(){  
                                    Ext.Msg.alert('信息增加','保存失败!');  
                                    this.disabled=false;  
                                }  
                             }  
                            );  
                           }  
                              },{  
                           text: '关闭',  
                           handler: function(){  
                              winlist.hide();  
                               }  
                          },{  
                            text:'重置',  
                            handler:function(){  
                                innerForm.getForm().reset();  
                            }  
                          }  
                          ]  
                    });  
                    winlist.add(innerForm);  
                      
                }  
                winlist.show(this);
                 }); 

由于刚刚接触ext,上面的代码也是借鉴拼凑过来的。出先这样的问题,是在不知道如何解决。

  • 描述: 第三次显示
  • 大小: 20.6 KB
  • 描述: 第二次显示
  • 大小: 14.4 KB
  • 描述: 第一次显示
  • 大小: 20.7 KB
分享到:
评论
4 楼 e-jyj 2009-02-18  
我的博客有解决方法,http://lyjing.iteye.com/admin/blogs/335031
3 楼 ill1224 2008-11-30  
每个表单给个id就可以了。
2 楼 shileishmily 2008-08-28  
谁知道,也告诉我一声。谢谢 shileibrave@163.com
1 楼 fjjllzd 2008-08-23  
我也遇到类似问题,都是出现在formpanel与window共用的情况下,怀疑是bug。

相关推荐

    Ext table布局实例 formpanel的table布局

    本文将深入探讨“Ext table布局实例”以及“formpanel的table布局”,帮助开发者更好地理解和运用这两种布局方式。 首先,我们要理解什么是Ext table布局。Ext table布局主要用于显示数据,它基于HTML的`&lt;table&gt;`...

    Ext 添加功能form表单实例

    在这个例子中,通过`new Ext.FormPanel`来创建了一个表单面板,并设置了一些关键属性: - `frame`: 设置为`true`,表示表单周围有一个边框。 - `width` 和 `height`: 分别设置了表单的宽度和高度。 - `layout`: ...

    ExtJs 动态添加表单

    var formPanel = Ext.create('Ext.form.Panel', { layout: 'form', items: [] }); ``` 2. **定义表单字段**: 根据需求,我们可以定义各种类型的字段。例如,添加一个文本字段: ```javascript var ...

    extJs中关于formPanel动态添加组件的验证问题

    这篇博客将探讨如何解决EXT JS中关于FormPanel动态添加组件的验证问题。 首先,让我们理解EXT JS FormPanel的基本结构。一个FormPanel由多个字段(field)组成,每个字段都有自己的验证规则。这些规则可以是简单的...

    Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别

    在EXTJS框架中,`Ext.FormPanel`和`Ext.Ajax.request`提供了两种不同的异步提交方法,它们各自有其特点和适用场景。下面我们将详细探讨这两种方式的区别。 1. **Ext.FormPanel的异步提交** `Ext.FormPanel` 是...

    ext几个实例

    【EXTJS】Ext.AJAX与FormPanel在登录案例中的应用 EXTJS是一个强大的JavaScript库,主要用于构建富客户端Web应用程序。在EXTJS中,Ext.AJAX和Ext.FormPanel是两个核心组件,它们分别用于异步与服务器进行数据交互和...

    .archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc

    首先,Ext.FormPanel是ExtJS中用于创建表单的主要组件,它允许我们构建复杂的表单布局并处理用户输入的数据。 1. **Checkbox简单示例** Checkbox在ExtJS中用于创建复选框,可以用来让用户选择多个选项。在示例中,...

    asp.net+ext上传图片并显示

    在ASP.NET框架中,结合EXT库创建一个上传图片并实时显示的功能是一项常见的需求。EXT库是一个强大的JavaScript UI框架,提供了丰富的组件和交互效果,而ASP.NET则是微软开发的服务器端Web应用程序框架。以下是对这个...

    Ext上传文件 Demo

    5. **进度条显示**: 为了让用户了解上传进度,可以使用Ext的ProgressBar组件配合Ajax请求的事件监听。当文件上传过程中,根据服务器返回的进度信息更新进度条的状态。 6. **错误处理和验证**: 无论是前端还是后端,...

    EXT上传附件

    在EXT应用中实现文件上传,通常会涉及EXT的FormPanel组件和Ajax提交方式。 首先,你需要在EXT应用中创建一个FormPanel,这是一个包含表单元素的容器。在表单中,你可以添加一个FileField组件,它是一个特殊的输入...

    EXT3.0 登录实例

    6. **响应处理**:服务器端验证成功后,会返回一个响应,EXT3.0会处理这个响应,可能包括显示登录成功消息、重定向到其他页面或者在验证失败时显示错误信息。 7. **源码分析**:EXT3.0的源码提供了学习EXT组件用法...

    Ext教程表单表格的使用

    【EXT表单FormPanel】 EXT表单FormPanel是EXT JS框架中用于创建复杂表单的组件,它允许用户输入、编辑和验证数据。在上述代码中,`sampleFormPanel`是一个FormPanel实例,包含了多个配置属性,用于定制表单的行为和...

    EXT3.0 JSP上传

    总结来说,“EXT3.0 JSP上传”涉及到EXT3.0的FormPanel和FileUploadField组件来构建前端文件选择和上传界面,使用EXT3.0的Ajax请求功能发送文件数据到服务器。在服务器端,JSP接收文件数据并将其保存。整个过程需要...

    ext表单

    EXT表单,是一种基于JavaScript和Ajax技术的富客户端(Rich Client)表单处理技术,它源自EXT JS库,专门用于构建交互性强、用户体验...同时,对EXT JS的源码探索和使用相关工具,有助于提升开发技能和解决问题的能力。

    ExtJs4.0 表单提交Demo

    在“ExtJs4.0 表单提交Demo”中,我们将深入探讨如何在ExtJs 4.0环境下,通过Ext Ajax模块实现表单的数据提交,同时实现显示层和控制层的分离,提升代码的可维护性和可扩展性。 1. **ExtJs 4.0 表单基础** ExtJs ...

    ext TreeFilter ext 写的快速检索

    例如,用户可以在FormPanel中输入检索条件,然后将结果显示在一个配置了TreeFilter的EXT Tree中。这样的设计为用户提供了直观且高效的检索界面。 总的来说,EXT TreeFilter是EXT JS框架中用于提升树形数据检索效率...

    EXT和JAVA例子

    EXT JS提供了丰富的UI组件,如GridPanel(表格),FormPanel(表单),Window(弹出窗口),TabPanel(选项卡)等,这些都是构建用户界面的基础。开发者可以通过配置对象定义组件的属性,如大小、颜色、样式等,并...

    EXT3.2 多选下拉框

    var formPanel = new Ext.form.FormPanel({ items: [multiSelectComboBox], renderTo: Ext.getBody() }); ``` 在上述代码中,我们创建了一个JSON数据存储,并将其与ComboBox关联。设置`multiSelect: true`后,...

    EXT.form组件

    1. `form`:`Ext.FormPanel`是EXT JS中的表单面板,它是一个容器,可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交行为以及处理表单数据的方法。 2. `checkbox`:`Ext.form.Checkbox`是用于创建复选...

    ExtJs中处理后台传过来的date对象显示到页面上

    `renderer`参数接收一个日期格式化函数,`Ext.util.Format.dateRenderer('Y-m-d H:i:s')`表示日期将以'年-月-日 时:分:秒'的格式显示。 4. **创建GridPanel**: 最后,创建GridPanel并附加到ColumnModel和Store:...

Global site tag (gtag.js) - Google Analytics