ExtJs中如何动态添加一个textfield的文本框

最新推荐文章于 2023-07-10 14:41:27 发布
最新推荐文章于 2023-07-10 14:41:27 发布
阅读量2k 收藏 1
点赞数
分类专栏： extjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyanlei5858/article/details/12868313
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"
/>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js">   //改为自己的路径
</script>
<script type="text/javascript" src="extjs/ext-all.js">    //改为自己的路径
</script>
<script>
    var oForm;
    var n = 0;
    Ext.onReady(function() {
        oForm = new Ext.FormPanel({
            renderTo: "form_panel",
            layout: "form",
            hideLabels: false,
            border: false,
            labelAlign: "right",
            labelWidth: 70,
            items: [{
                xtype: 'button',
                text: 'click',
                listeners: {
                    click: function() {
                        n++;
                        var fd = new Ext.form.TextField({
                            name: 'xx' + n,
                            id: 'xx' + n,
                            fieldLabel: 'field' + n
                        });
                        oForm.items.add(oForm.items.getCount(), fd);
                        oForm.doLayout();
                    }
                }
            }]
        });
    });
</script>
<div id="form_panel">
</div>
馥钰
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[Ext.Net]动态生成控件(二)--js动态添加文本框
德仔
12-26 3795
转自：http://www.ext.net.cn/forum.php?mod=viewthread&tid=11931 点击一个按钮就出现一行控件，点击删除控件就可将一行控件删除，这是不是你一直以来都想实现的需求呢？ 本帖就来解答这个问题： 首先先放几个效果图，看你是不是需要这样的需求，如果是再往下看帖哦。 下图是刚开始的状态 20131219131058.jpg
javascript动态增加文本框
02-24
javascript动态增加文本框 点击按钮,可以直接增加文本框,动态实现,不跳转页面,也不刷新原页面.
Extjs-表单与输入控件
itlwc
08-16 7945
项目中的from var editForm = new Ext.form.FormPanel({ labelWidth : 120, labelAlign : 'right', border : false, frame : true, trackResetOnLoad : true, anchor : '100%', bodyStyle : 'padding:5p
extJS EXT.NET给编辑框增加样式
蚂蚁筑巢
11-05 602
我们需求里面通常用会用到给某几个编辑框增加标识。比如背景色 边框色等等。这里我们就来说一下边框色，背景色。 我们先增加2个样式：  .IPCMSColor         {             background-color: #0366bb !important;         }         .IPCMSColor1         {             border-...
动态生成TextField，并通过软键盘上的回车跳转到下一个TextField，最后一个TextField关闭软键盘
最新发布
weixin_46017665的博客
07-10 350
动态生成TextField并通过软键盘的回车控制焦点到下一个TextField
Extjs4之动态添加FormPanel
hsg0123_126的专栏
07-30 1625
功能实现：点击界面上的按钮实现，动态的在FieldSet中添加Panel，并将动态添加的Panel中包含的值传递给后台。具体实现如下： var AddDep = function (item, grid) { var now = new Date().toLocaleDateString(); var num = 0; Ext.QuickTips.init();
ExtJS4的文本框(textField)使用正则表达式进行验证(Regex)的方法
12-13
另一种是在提示框边会出现一个类似批注的提示信息，不过在页面加载时要加上Ext.QuickTips.init();提示框才能正常显示出来。 特别提示：在属性regex后要用 /^ 这里加正则 $/ 把上面的正则表达式包起来否则会报”缺少...
学习ExtJS TextField常用方法
10-29
对于 TextField 控件来说，需要将其添加到一个容器控件中，并且需要设置 layout 属性为 "form"，这样才能正确地显示文本框的标签名称。 layout 属性可以指定控件的布局方式，例如，可以指定为 "form"、"border" 等。...
ExtJs 动态添加表单
03-25
ExtJS 是一个强大的JavaScript库，...总之，动态添加表单是ExtJS开发中的一个重要技巧，它允许我们根据用户交互或程序逻辑灵活地调整表单结构。结合源码和工具，开发者可以构建出高度可定制和交互性强的Web应用界面。
extjs form textfield的隐藏方法
10-30
只需将textfield的hidden和hideLabel配置为true就可以了。只设置hidden:true时会显示出来一个：的标签。
JS动态添加文本框.html
07-14
JS动态添加文本框.html DEMO实例。
Extjs弹窗-简单文本编辑框-Ext.Msg.show
qq_15508731的博客
10-22 370
var datavalue=''; Ext.Msg.show({ title:'标题', msg:'说明', width:600, height:500, prompt:true, multiline:200, closable:true, modal:...
ExtJs教程----控件介绍:文本框，下拉框，时间框，列表,弹窗
早起吃虫的博客
09-23 3638
1.普通文本框textfield xtype: 'textfield',//控件类型 fieldLabel: '申请人姓名（中文名）',//控件左边的描述文字 padding: '5 10 5 0',//内边距 value:"张三"//控件的默认显示值 labelWidth: 140,//控件左边的描述文字的宽度 readOnly: true,//是否只读，控件变灰 edita
ExtJS绝对布局文本框提示及相应的错误提示
光阴迷客的知识库
08-11 4030
背景简介添加文本框（textfield）验证错误提示，如果你采用的是form布局，extjs已经自带了在文本框后加一个红色感叹号的提示，但往往很多界面采用的是absolute布局，这时红色感叹号就打死也不会出现了，本文就解决这一问题，并且在点击保存时统一验证每一个文本框，如果存在验证错误，提示错误信息并返回。解决步骤首先定义样式：<style type="text/css"> .Diy-te
EXT动态生成fieldset(可适用于动态添加一行等)
cbxjj的专栏
06-18 1323
Ext.Ajax.request({ url : contextPath + "/refreshManager/list", waitMsg : '数据处理中...', success : function(resp, options) { var respText = Ext.util.JSON.decode(resp.responseText); var ma
ExtJS4.2学习(17)表单基本输入控件Ext.form.Field
weixin_34082854的博客
04-29 96
Ext.form.Field是所有表单输入控件的基类，其他的输入控件都是基于Ext.form.Field扩展得来的。 Ext.form.Field中定义了输入控件通用的属性和功能函数，这些通用的属性和功能函数大致分为3大类：页面显示样式、控件参数配置和数据有效性检验。我们先来看看表单输入控件可以使用的校验显示方式。默认情况下，这些输入控件会监听blur事件，如果数据校验失败，...
Extjs4——表单与输入控件
weixin_30707875的博客
09-16 205
1.表单的简单形式： var form = new Ext.form.FormPanel({ title: 'form', defaultType: 'textfield', buttonAlign: 'center', frame: true, width: 220, ...
Extjs 动态改变label的文字和样式
JustHaveTry的专栏
10-09 8296
动态改变label的文字、样式： 定义一个label  设置label的html（加上id，可以通过id获取，用innerhTML 动态插入html），  //检查项列表下方分数统计    var score = new Ext.form.Label         ({               id:"score",               autoShow:true,
Extjs 关于动态显示TextField
zhaoweixs的专栏
03-19 903
由于调用textField的hide方法，只能隐藏文本框，不大好看，以前没去管，今天同事也碰到这个问题，就在网上查了下，有两种办法： 1. 调用Ext.getCmp('text_id').getEl().up('.x-form-item').setDisplayed(false);//表示隐藏 2. 将该textField放在一个panel里，然后对panel进行显示/隐藏 （show()/h
用写一个extjs6 实现模糊查询的完整例子
03-29
以下是一个简单的ExtJS 6模糊查询的例子： 1. 创建一个包含一个文本框和一个按钮的视图： Ext.define('MyApp.view.Main', { extend: 'Ext.panel.Panel', xtype: 'main', title: 'My Application', width: 400, bodyPadding: 10, items: [{ xtype: 'textfield', fieldLabel: 'Name', name: 'name', allowBlank: false }, { xtype: 'button', text: 'Search', handler: 'onSearchClick' }] }); 2. 创建一个控制器，在按钮点击时执行模糊查询： Ext.define('MyApp.view.MainController', { extend: 'Ext.app.ViewController', alias: 'controller.main', onSearchClick: function() { var name = this.lookupReference('name').getValue(); var store = this.getViewModel().getStore('users'); store.clearFilter(); store.filter('name', name); } }); 3. 创建一个模型和一个存储，用于保存用户数据： Ext.define('MyApp.model.User', { extend: 'Ext.data.Model', fields: ['id', 'name', 'email'] }); Ext.define('MyApp.store.Users', { extend: 'Ext.data.Store', alias: 'store.users', model: 'MyApp.model.User', data: [{ id: 1, name: 'John Smith', email: 'john.smith@example.com' }, { id: 2, name: 'Jane Doe', email: 'jane.doe@example.com' }, { id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com' }] }); 4. 创建一个视图模型，将存储添加到视图模型中： Ext.define('MyApp.view.MainModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.main', stores: { users: { type: 'users' } } }); 5. 将视图、控制器和视图模型组合在一起： Ext.application({ name: 'MyApp', launch: function() { Ext.create('MyApp.view.Main', { renderTo: Ext.getBody() }); } }); 这个例子中的搜索功能将从“users”存储中筛选出名字包含文本框中输入的值的用户。这个例子可以轻松地扩展以实现更复杂的模糊查询。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值