extjs 文本框后加一个按钮

最新推荐文章于 2022-04-28 06:53:56 发布

最新推荐文章于 2022-04-28 06:53:56 发布 · 635 阅读

文章标签：

#JavaScript #ViewUI

EXTJS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在ExtJS项目中实现特定表单布局的方法，包括如何在文本框旁边添加按钮，并调整其宽度以适应不同的显示需求。

项目中用到需要有时在一个文本框后面加一个按钮,网上找了一个。发现宽度太宽了。自己改了改。可以用了。贴个图吧。

 

 Ext.onReady(function(){
           new Ext.FormPanel({
                     id:'typeForm',
                     renderTo: Ext.getBody(),
                   frame: true,
                   height: 'auto',
				   width:400,
				   buttonAlign:"center",
				 //  labelAlign: "right",
             		 frame: true,
                     labelWidth: 100,
                      title: '函数',
                         items: [
						  {name: "username", xtype:'textfield', fieldLabel: "函数名"},
               			  {name: "password", xtype:'textfield', fieldLabel: "函数CODE"},
               			  {name: "email", xtype:'textfield', fieldLabel: "是宏"},
				   		 {
                             layout:'column', 
							 width:700,
                             items:[
                              {
                                  columnWidth:0.35,
                                  layout: 'form',
                                  items: [{
                                      xtype:'textfield',
                                      fieldLabel: '返回类型',
                                      name: 'typeName'
                                  }]
                              },
                              {
                                  columnWidth:0.65,
                                  layout: 'form',
                                  items: [
                                   new Ext.Button({
                                    text:'...浏览',
                                    handler:function(){
                                 
                                    }        
                                   })
                                  ]
                              }
                             ]//column->items
                         },
						 {name: "email", xtype:'textfield', fieldLabel: "类路径"},
						 {
                             layout:'column', 
							 width:700,
                             items:[
                              {
                                  columnWidth:0.35,
                                  layout: 'form',
                                  items: [{
                                      xtype:'textfield',
                                      fieldLabel: '方法名',
                                      name: 'typeName'
                                  }]
                              },
                              {
                                  columnWidth:0.65,
                                  layout: 'form',
                                  items: [
                                   new Ext.Button({
                                    text:'增加参数',
                                    handler:function(){
                                 
                                    }        
                                   })
                                  ]
                              }
                             ]//column->items
                         }
						 ],//最大的ITEMS
						  buttons:[{text:"保存"}, {text:"保存并发布"}]
                  });  
        });