在Ext.FormPanel/Ext.form.FormPanel的FieldSet中实现...

tottiyq 2010-10-24

展开全文

在Ext.FormPanel/Ext.form.FormPanel的FieldSet中实现Label的html文本超链接和TextField的整体隐藏收藏
我主要根据自己在实战中解决问题的经过来阐述，这样比较符合逻辑。

第一，如何在 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>模版</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>模版</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>模版</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. 重大专项推荐表：   &nbsp',
                readOnly : true
            }]
}

我不知道你是否注意到了，上面在设置了2个 id 属性，这也是我实战中碰到的问题。刚开始时，没有包括 id: 't2' 和外层的 hidden ，而包括里面层的 hidden。这导致我想要隐藏这个TextField 时，总是隐藏不了 Label 域。当我把 hidden 拿到外层时，调用 Ext.getCmp('title2').show(); 却不能显示这个 TextField 。这是我就想，里面层的 id 的对外层的显示不起作用，这说明了作用域的问题。于是，我顺藤摸瓜，明白了外层的 id 和 hidden 属性可以控制这个 TextField ，而里面层的 id 和 hidden 属性只能控制 input 域。这也是我解决这个问题关键所在，我想这肯定对你有所帮助。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/shupili141005/archive/2009/08/19/4464088.aspx