我主要根据自己在实战中解决问题的经过来阐述,这样比较符合逻辑。
第一,如何在 Ext.FormPanel/Ext.form.FormPanel
的 FieldSet
中实现html文本超链接
呢?
刚开始,我是用
Ext.form.TextField
中的
fieldLabel
属性实现该功能。
具体实现代码如下(下面的属性设置可以根据实际需要自己取舍):
{
columnWidth : 0.03,
labelSeparator : ' ',
labelWidth : 30,
items : [{
xtype : 'textfield
',
id : 'file2',
hidden: true, // 初始化为隐藏
状态,如要显示,则调用 Ext.getCmp('file2').show();
否则
调用
// Ext.getCmp('file2').hide(); 这些在API Documentation 中已描述的非常清楚
style:'border-color:#fff #fff #000;background:#fff',
fieldLabel
: '
<a href=../attachment/zdzxywctjb.doc><font color=red>模版</font></a>
',
readOnly : true,
anchor :'0%'
}]
}
可是当单击
"模版
"时,光标总是定位到
TextField 的输入中,并且出现多余的下划线(刚开始该线是没有的),给人的感觉很不爽。经过一段时间的尝试,还不能得到我想要的结果,于是只好另辟蹊径了。如谁能把这个bug解决,麻烦告诉我一声,thanks a lot in advance!
不好意思,我在最后总结之后:
明白了外层的 id 和 hidden 属性可以控制这个 TextField ,
而里面层的 id 和 hidden
属性只能控制 input 域
,
这也是我解决这个问题
关键所在。我感觉这可以实现的,自己尝试了一下,结果可以了,多亏这次自己好好总结。实现代码如下(可以和上面代码做个比较,以便更深入理解蓝色字的本质内涵):
{
columnWidth : 0.05,
labelWidth : 30,
id: 'file2',
hidden: true,
items : [{
xtype : 'textfield
',
hidden: true,
id: 'file22',
labelSeparator : ' ',
style:'border-color:#fff #fff #000;background:#fff',
fieldLabel : '<a href=../attachment/zdzxywctjb.doc><font color=red>模版</font></a>',
readOnly : true
}]
}
接着,我就用Google搜索和查找API,得到点子,尝试利用 Ext.form.Label
中的 html
属性实现该功能。具体代码如下所示:
{
columnWidth : 0.13,
labelWidth : 40,
readOnly: true,
items : [{
id
: 'file2',
hidden: true, // 初始化为隐藏
状态,如要显示,则调用 Ext.getCmp('file2').show();
否则
调用
// Ext.getCmp('file2').hide(); 这些在API Documentation 中已描述的非常清楚
xtype : 'label',
html: '<a href=../attachment/zdzxywctjb.doc><font color=red>模版</font></a>'
}]
}
很幸运的是,我尽然成功了!我对于 ExtJS 来说是个初学者(1个月不到),这对我来说是巨大的鼓舞。第一个功能解决到此为止,非常感谢你的关注。
第二,如何显示/隐藏
TextField 的这个范围(包括Label、input)?
实现代码如下:
{
columnWidth : 0.35,
labelWidth : 200,
id: 't2',
hidden: true
, //
隐藏
TextField 的这个范围
items : [{
xtype : 'textfield',
id : 'title2',
//
hidden: true
,
labelSeparator : ' ',
style:'border-color:#fff #fff #000;background:#fff',
fieldLabel : '2. 重大专项推荐表:  ',
readOnly : true
}]
}
我不知道你是否注意到了,上面在设置了2个 id 属性,这也是我实战中碰到的
问题。刚开始时,
没有包括
id: 't2' 和 外层的 hidden ,而包括里面层的 hidden。这导致我想要隐藏这个TextField 时,总是隐藏不了 Label 域。当我把 hidden 拿到外层时,调用 Ext.getCmp('title2').show(); 却不能显示这个
TextField
。这是我就想,里面层的 id 的对外层的显示不起作用,这说明了作用域的问题。于是,我顺藤摸瓜,明白了外层的 id 和 hidden 属性可以控制这个 TextField ,
而里面层的 id 和 hidden
属性只能控制 input 域
。这也是我解决这个问题
关键所在
,我想这肯定对你有所帮助。
版权声明:
如果大家要转载本文,我非常荣幸。但请参加转载网址,谢谢!
分享到:
相关推荐
.archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc
Ext的FormPanel组件说明formPanel的详细使用说明
(1)Ext.FormPanel f.getForm().submit({ url:”……”, params:{ XX:xx …..} success: function (c,v,e) { //e: 触发事件 var json=Ext.decode(v.response.responseText); }, failure:function(c,v,e){} }) (2)Ext....
4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他...
new Ext.FormPanel({ items: [{ fieldLabel: ‘代码’, name: ‘FCode’, anchor:’100%’, id: ‘fid’ },{ fieldLabel: ‘名称’, name: ‘FName’, anchor:’100%’ // anchor width by percentage },{ xtype: ...
-Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...
//Ext.form.Field.prototype.msgTarget = 'side'; var bd = Ext.getBody(); /* * ================ Form 5 ======================= */ bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can ...
本篇是关于Ext.Ajax + Ext.FormPanel + MySQL数据库的完整登录案例,一个是html的form表单,一个是Ext的FormPanel表单,在提交或结合Ext.Ajax多少还是有区别的.
8.1.2 在FormPanel中使用HBoxLayout和VBoxLayout进行布局 219 8.1.3 Panel的body的样式范围 224 8.2 Form表单组件 226 8.2.1 DisplayField控件 226 8.2.2 在FormPanel中使用TabPanel 229 8.2.3 DirectLoad与...
FormPanel中的 form对象为Ext.form.BasicForm类型的对象,它有load和submit方法分别用于加载数据和提交数据。而这两个方法都是通过调用 Ext.form.BasicForm中的doAction方法来操作的。doAction方法带有两个参数,...
使用 Ext.form.FormPanel 来处理数据时候,某些字段是需要只读的。当然我们可以使用 Ext.form.TextField,然后设置成 ReadOnly,不过这样子的显示效果不是很好,因为始终会有个输入框。所以我们必须使用 Ext.form....
代码如下: /** * 提交表单 */ function $postForm(a) { if (a.formPanel.getForm().isValid()) { var b = a.scope ? a.scope: this; a.formPanel.getForm().submit({ scope: b, url: a.url, method: “post”, ...
下面是一个我遇到问题代码的简化版本,没有经过测试,大概意思是要是在form里想控制不显示表单,用remove()方法有效 代码如下: new Ext.form.FormPanel({ id : ‘ReportForm’,items : [{ {id:”001″}, {id:”002″...
//定义表单 var simple = new Ext.FormPanel({ labelWidth: 75, baseCls: ‘x-plain’, width: 150, defaultType: ‘textfield’,//默认字段类型 //定义表单元素 items: [{ fieldLabel: ‘帐户’, name:...
Ext.form.Field.prototype.msgTarget="under"; var fset = new Ext.FormPanel({ title:"学习表单字段元素的字段集", width:600, height:400, frame:true, renderTo:"myForm", items:[ {xtype:"fieldset", ...
NULL 博文链接:https://627443183-qq-com.iteye.com/blog/1725391
Ext的formpanel table布局实例,有效解决了页面resize时列宽不跟随改变的问题,即列宽的自适应宽度
NULL 博文链接:https://zxf-noimp.iteye.com/blog/634692