`

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:"保存并发布"}]
                  });  
        });

 

  • 大小: 17.9 KB
0
4
分享到:
评论

相关推荐

    ExtJs 文本框后附件单位

    ### ExtJs 文本框后附件单位 #### 背景介绍 在使用ExtJS进行界面开发的过程中,常常会遇到需要在文本框后面附加单位的情况。例如,在输入数量时需要显示“个”、“人”等单位。这样的设计不仅提高了用户体验,还...

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

    在EXTJS中,创建一个具有特定功能的表单通常涉及到多个组件的组合使用,如文本框、下拉列表以及事件监听。在这个例子中,我们看到一个EXTJS的表单面板`Ext.FormPanel`被用来展示一个包含文本框、下拉列表和标签的...

    Extjs如何获取文本框的值

    Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值

    ExtJS如何自定义图片按钮组件

    3.解压后请将所有附件放置您extjs包examples文件夹里任意一个组件包即可 4.此组件继承的是Ext.Panel,而不是Button,所以此组件并没有所有Ext.Button的功能但是拥有所有Ext.Panel功能并新增了点击事件(使用规范请参照...

    extjs 自定义验证

    extjs验证 extjs验证 extjs验证 extjs验证extjs验证 extjs验证 extjs验证 extjs验证

    ExtJS 4 button按钮

    - **disabled**:设置按钮是否禁用,禁用后按钮将不可点击。 - **disabledClass**:禁用状态下的CSS类,用于改变禁用状态下的外观。 - **enableToggle**:允许按钮具有切换状态,即按下和弹起的效果。 - **pressed**...

    ExtJS文字按钮列

    标题提到的"ExtJS文字按钮列"是指在ExtJS表格中添加一列,该列包含的是文字按钮而非图片按钮。这样的设计使得用户可以更直观地理解按钮的功能,同时减少了对图形资源的依赖。 在官方3.3版本中,虽然默认提供的是...

    ExtJs的resultGrids中动态添加按钮

    在上述示例中,我们在数据加载完成后检查用户是否有编辑权限,如果有,就向`actionColumn`添加一个编辑按钮;如果没有,则移除原有的编辑按钮。这样,我们就实现了动态添加和移除按钮的功能,确保了用户界面的灵活性...

    ExtJs图片按钮控件

    在项目中引入这个文件后,我们就可以利用`Ext.ux.ImageButton`类来创建图片按钮。 创建一个图片按钮的基本步骤如下: 1. 引入`Ext.ux.ImageButton.js`:确保在你的HTML文件或应用配置中引入了这个文件,以便能够...

    ExtJs 带清空功能的日期组件

    DateField提供了一个日期选择器,允许用户通过日历图标选择日期,或者直接在文本框中输入日期。默认情况下,它会按照指定的格式显示和验证日期。 要创建一个带清空功能的DateField,我们需要实现以下几个步骤: 1....

    Extjs 时间选择控件 带确认按钮 非按日期即选择

    Extjs的日期控件,只能支持到日期选择,对时间的选择并不完善。而网上下载的控件,都是基于Ext.form.dateField 开发,在选中日期后自动选择,并隐藏此...在经过一番改造后,终于做好了一个带确认按钮的时间选择控件。

    extjs图标大全extjs图标大全extjs图标大全extjs图标大全

    ExtJS图标大全是一个集合了多种图标的资源库,特别适合用于Web开发,尤其是使用ExtJS框架构建用户界面时。ExtJS是一款强大的JavaScript UI框架,它提供了丰富的组件和工具,帮助开发者构建功能丰富的、响应式的Web...

    ExtJs4 多附件上传组件

    在多附件上传场景下,我们需要的组件可能包括一个文件选择器、上传按钮、进度条以及上传后的文件列表等。 1. **文件选择器**:通常是一个`<input type="file">`元素的封装,通过ExtJS的`FileInput`或`Field`类实现...

    extJs4 toolbar工具条

    工具栏项目可以是任意类型的 `ExtJS` 组件,如按钮、文本框等。在提供的代码示例中,可以看到以下几种类型的工具栏项目: 1. **文本**:直接放置纯文本作为工具栏的一部分,例如 `"վƣ"` 和 `"MAC:"`。 2. **...

    ExtJS icons(5000个extjs小图标).zip

    在这个"ExtJS icons(5000个extjs小图标).zip"文件中,包含了丰富的图标资源,对于使用ExtJS开发Web应用的开发者来说,这些图标是提升用户体验的重要元素。 首先,了解ExtJS的图标系统。在ExtJS中,图标通常用于...

    extJs3升级extjs4方案

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

    extjs 2000个 icon 图标素材

    ExtJS 是一个强大的JavaScript应用程序框架,它提供了丰富的用户界面组件和功能,用于构建富客户端Web应用。在ExtJS中,图标(icon)是用于增强UI视觉效果和用户体验的重要元素。这些图标通常用在按钮、菜单项、工具...

    EXTJS 多文件上传

    8. **UI定制**:EXTJS 的组件化特性使得`MultiFileUploadField` 的外观和行为可以根据需求进行高度定制,包括按钮样式、提示信息等。 9. **文件管理**:在上传成功后,EXTJS 还可以帮助管理和展示已上传的文件,...

Global site tag (gtag.js) - Google Analytics