Ext TextField的Label 和隐藏组件
程序员文章站
2022-03-07 14:21:36
...
Ext.onReady(function(){
var TextVisable = new Ext.form.TextField({
fieldLabel: '表中文名称',
labelWidth:100,
name: '表中文名称',
value :'abc'
});
function hideText_1()
{
//1
TextVisable.el.parent().parent().hide();
//2 TextVisable.el.dom.parentNode.parentNode.style.display = 'none';
}
function hideText_2()
{
//1 TextVisable.el.parent().parent().first().dom.innerHTML = '图中文名称'
//2
TextVisable.el.dom.parentNode.parentNode.firstChild.innerHTML= '图中文名称 :'
}
/*****************做一个日期更新框*******************************/
var date_1 = new Ext.form.DateField({
fieldLabel: '最后更新日期',
labelWidth:100,
width:140,
name: '最后更新日期'
});
function hideText_3()
{
//1
date_1.el.parent().parent().parent().hide();
//2 TextVisable.el.dom.parentNode.parentNode.parentNode.style.display = 'none';
}
function hideText_4()
{
//1 TextVisable.el.parent().parent().parent().first().dom.innerHTML = '更改日期 :'
//2
date_1.el.dom.parentNode.parentNode.parentNode.firstChild.innerHTML= '更改日期 :'
}
/*****************做一个日期更新框*******************************/
var form = new Ext.form.FormPanel({
labelAlign: 'right',
title: 'form',
frame:true,
width: 300,
labelSeparator : ':',
items: [TextVisable,date_1],
tbar :['-',new Ext.Button({
text: "隐藏DateField",
handler: hideText_3
}),'-',new Ext.Button({
text: "更改DateField的label",
handler: hideText_4
}),'-'],
buttons: [new Ext.Button({
text: "隐藏TextField",
handler: hideText_1
}),new Ext.Button({
text: "更改TextField的label",
handler: hideText_2
})]
});
form.render(document.body);
});
上一篇: el-table多选框点击表格选中和取消
下一篇: jquery自动选中多选框
推荐阅读
-
ext grid隐藏的列不能修改_Tkinter组件scrollbar高级特性一:自动隐藏
-
Ext.form.TextField 的隐藏
-
Ext.form.TextField组件的基本用法
-
Ext中同时隐藏field和label的方法
-
EXT组件的使用和延迟加载
-
Ext JS中隐藏TextField的同时隐藏其Label的方法
-
通过自定义组件实现可拖动改变位置和大小的Label
-
1)编写一个程序。要求:在窗体上创建一个文本框组件、两个命令按钮组件,命令按钮的标题分别设置为“隐藏”和“退出”, 窗体背景色设置为“粉红”。单击“隐藏”按钮后文本框消失,该按钮标题变为“显示”,单击
-
小程序之动态控制组件的显示和隐藏
-
小程序之动态控制组件的显示和隐藏