在Ext.FormPanel/Ext.form.FormPanel的FieldSet中实现Label的html文本超链接和TextField的整体隐藏

shupili141005

     我主要根据自己在实战中解决问题的经过来阐述，这样比较符合逻辑。


第一，如何在 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. 重大专项推荐表：   &nbsp',
                readOnly : true
            }]
}
我不知道你是否注意到了，上面在设置了2个 id 属性，这也是我实战中碰到的问题。刚开始时，没有包括 id: 't2' 和 外层的 hidden ，而包括里面层的 hidden。这导致我想要隐藏这个TextField 时，总是隐藏不了 Label 域。当我把 hidden 拿到外层时，调用 Ext.getCmp('title2').show(); 却不能显示这个TextField 。这是我就想，里面层的 id 的对外层的显示不起作用，这说明了作用域的问题。于是，我顺藤摸瓜，明白了外层的 id 和 hidden 属性可以控制这个 TextField ，而里面层的 id 和 hidden 属性只能控制 input 域。这也是我解决这个问题关键所在，我想这肯定对你有所帮助。
 
版权声明：
如果大家要转载本文，我非常荣幸。但请参加转载网址，谢谢！