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

Ext 布局问题 下拉框combo

EXT 
阅读更多

在ext formpanel中使用layout table 布局中出现下拉框和日期框选择项偏离正轴,希望哪位高手能够解决解决,相应的panel代码如下:

var FrPost=new Ext.FormPanel({
     width:'1200',
     title:"ext级联",
     bodyStyle:"padding:5px 5px 0",
     submit: function(){
                     this.getEl().dom.action ='ggg',
                     this.getEl().dom.method='POST',
                     this.getEl().dom.submit();
     },
             buttons:[{
  id:"succss",
  name:"succss",
  type : "button",
       
        text:'提交数据',
        formBind:true,
        handler:function(){
           FrPost.getForm().getEl().dom.submit();  
        }
 },
  {
   name:'submit',
   type : "submit",
   text:'提 交',
   formBind:true,
         handler : function(){
                    FrPost.getForm().getEl().dom.submit();  
          }
  },
  {
   name:'reset',
   type:'reset',
   text:'重 写',
   handler:function(){
    FrPost.getForm().getEl().dom.reset();   
   }
 }]
});     

var formpanel=new Ext.Panel({ 
      layout:"table",
      bodyStyle:'left:0px;top:0px;text-align:center;margin: 0 auto;',
      cls:"center",
      frame:true,
      layoutConfig: {columns:2},
      defaults:

{border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:75,width:'400'}
  });

  FrPost.add(formpanel);
    
         formpanel.add({colspan:1,rowspan:1,items:exttext_0});
       
         formpanel.add({colspan:2,rowspan:8,items:imageext_1});
       
         formpanel.add({colspan:1,rowspan:1,items:extradio_2});
       
         formpanel.add({colspan:1,rowspan:1,items:extdate_3});
       
         formpanel.add({colspan:1,rowspan:1,items:extdate_4});
       
         formpanel.add({colspan:1,rowspan:1,items:exttext_5});
       
         formpanel.add({colspan:1,rowspan:1,items:exttext_6});
       
         formpanel.add({colspan:1,rowspan:1,items:exttext_7});
       
         formpanel.add({colspan:1,rowspan:1,items:extselect_8});
       
        //设置窗口显示大小
        var windowWidth =   window.screen.availWidth;  
       var left=windowWidth/2 - FrPost.width/2;
       var style='margin-top:10px;margin-left:'+left+'px;'; 
       var el=Ext.get('FrPost').applyStyles(style);
        FrPost.render(el);   
 });

分享到:
评论

相关推荐

    EXT下拉框显示树形结构源代码

    而在某些情况下,我们可能需要在下拉框中展示树形结构的数据,这就是EXT COMBO TREE的用武之地。 EXT COMBO TREE是EXT COMBO的一种扩展,它允许用户在下拉菜单中以树形结构展示数据。这在处理层级关系或者分类数据...

    extjsCombo下拉框多选

    在ExtJS中,Combo(下拉框)是一种常用的组件,通常用于实现单选选择。然而,有时候我们需要在下拉框中实现多选功能,这就需要用到“extjsCombo下拉框多选”这个主题。 在ExtJS原生的Combo组件中,它默认只支持单选...

    EXT动态新增一行

    在EXT中,"动态新增一行"是指在表格或者布局中,通过用户操作(比如点击按钮)来动态地添加新的行元素,这些元素可以是文本框、下拉框等交互组件。 EXT中的Column Layout是一种布局方式,适用于创建网格或表格形式...

    ext4实现带复选框的多选下拉框

    标题提到的"ext4实现带复选框的多选下拉框"就是一个典型的例子,它涉及到前端开发中的组件设计与实现。这个功能在诸如数据过滤、选项配置等场景中非常常见。下面我们将详细讨论如何利用源码、工具来创建这样的功能。...

    extjs4 ComboBox 点击下拉框 出现grid效果

    在EXTJS4中,ComboBox是一个常用的组件,它用于创建下拉选择框,通常用于输入框的辅助选择。...这需要理解EXTJS的事件系统、组件创建和布局管理。同时,正确引用EXTJS库文件和资源对于应用的正常运行至关重要。

    EXTJS多选下拉框

    这个lovcombo是lov(List-Value)和combo(组合框)的结合体,提供了丰富的交互性和灵活性。 lovcombo在EXTJS中的实现通常包括以下几个部分: 1. **定义模型(Model)**:在EXTJS中,数据通常是通过模型来管理的。...

    EXT 实现省份--城市--地区--级连

    EXT,全称EXT JS,是一...在这个例子中,我们看到了EXT如何优雅地处理多级联动选择的问题,展示了其在构建富客户端应用中的强大能力。无论是从源码层面还是工具层面,EXT都是开发人员实现高效、美观Web应用的有力武器。

    Extjs4 combogrid扩展

    在给定的“Extjs4 combogrid扩展”中,我们主要关注的是如何将传统的下拉框(combo)扩展为同时支持网格(grid)显示的功能。 标题中的“Extjs4 combogrid扩展”意味着我们要在ExtJS 4框架内,改造原有的 Combo ...

    extjs中文api

    var combo = Ext.create('Ext.form.ComboBox', { store: store, displayField: 'name', valueField: 'name', queryMode: 'local' }); ``` #### 七、日期选择器 ExtJS的日期选择器组件可以帮助用户轻松地选择...

    extJs 文本框后面加上说明文字+下拉列表选中值后触发事件

    在这个例子中,我们看到一个EXTJS的表单面板`Ext.FormPanel`被用来展示一个包含文本框、下拉列表和标签的布局。这个表单面板具有丰富的样式配置,例如`border`、`bodyBorder`和`frame`属性,使得表单看起来更加精致...

    ExtJs组件类的对应表

    3. **`combo`** - `Ext.form.ComboBox`,下拉框组件,用于创建下拉选择框。 4. **`datefield`** - `Ext.form.DateField`,日期选择项,用于输入日期。 5. **`timefield`** - `Ext.form.TimeField`,时间录入项,...

    Extjs xtype集合

    - **描述**: 工具栏上的填充空间,用于布局。 5. **`tbitem`:** - **`xtype`**: `tbitem` - **`Class`**: `Ext.Toolbar.Item` - **描述**: 工具栏上的项目。 6. **`tbseparator`:** - **`xtype`**: `...

    JS之小练习代码

    在这个练习中,作者创建了一个窗口(Window)对象,包含了多个表单元素,如文本字段(textfield)、日期选择器(datefield)、下拉框(combo)等,以及一些基本的事件监听和数据处理。 首先,我们看到`Ext.data....

    extjs下拉树

    ExtJS下拉树是一种在Web应用中常用的交互组件,它结合了下拉框和树形结构的优点,使得用户可以在一个紧凑的空间内选择嵌套层次的数据。这种组件在数据层级较多,需要用户进行逐级选择或者查看层级关系时非常实用。在...

    ExtJS的xtype列表

    - `combo`: 下拉框,可以提供预定义的选项列表。 - `datefield`: 日期选择字段,用于选择日期。 - `timefield`: 时间选择字段,用于选择时间。 - `field`: 表单的基础字段,所有表单组件的基类。 - `fieldset`:...

Global site tag (gtag.js) - Google Analytics