[Tab] ????

2011-12-27 15:33:50by zq02

Tab

Tab介绍

Tab组件是一个布局组件，本身并不绑定任何数据源。

基本的配置方式如下

                
<a:tabPanel height="500" width="600" id="testPanel">
            <a:tabs>
                <a:tab id="tab_1" prompt="订单明细" width="150">
                    <a:grid bindTarget="tabPanel_demo_ds" height="473" width="596">
                        <a:columns>
                            <a:column name="line_num" align="center" prompt="行号"/>
                            <a:column name="ord_num" align="center" prompt="订单号" renderer="ordNumRenderer"/>
                            <a:column name="ord_type" align="center" prompt="订单类型"/>
                            <a:column name="ord_time" align="center" prompt="订单日期"/>
                            <a:column name="ord_currency" align="center" prompt="币种"/>
                        </a:columns>
                    </a:grid>
                </a:tab>
                <a:tab id="tab_2" closeable="true" prompt="备注" width="150">􀀸
                    <a:grid bindTarget="tabPanel_demo_ds" height="473" width="596">
                        <a:columns>
                            <a:column name="remark_1" align="center" prompt="备注1"/>
                            <a:column name="remark_2" align="center" prompt="备注2"/>
                            <a:column name="remark_3" align="center" prompt="备注3"/>
                        </a:columns>
                    </a:grid>
                </a:tab>
                <a:tab prompt="tab3" ref="box.screen" closeable="true" width="150"></a:tab>
            </a:tabs>
</a:tabPanel>

tabs下定义多个tab标签页，tab的标签页有两种实现方式

内嵌组件的方式

可直接在tab节点下嵌入UI组件。这种方式在页面第一次加载的时候，内嵌的组件就会被渲染。适合简单的标签页，通常对第一次打开页面性能有要求的情况下不建议采取这种方式。

                
<a:tabPanel height="500" width="600" id="testPanel">
            <a:tabs>
                <a:tab id="tab_1" prompt="订单明细" width="150">
                    <a:grid bindTarget="tabPanel_demo_ds" height="473" width="596">
                        <a:columns>
                            <a:column name="line_num" align="center" prompt="行号"/>
                            <a:column name="ord_num" align="center" prompt="订单号" renderer="ordNumRenderer"/>
                            <a:column name="ord_type" align="center" prompt="订单类型"/>
                            <a:column name="ord_time" align="center" prompt="订单日期"/>
                            <a:column name="ord_currency" align="center" prompt="币种"/>
                        </a:columns>
                    </a:grid>
                </a:tab>
                ....
            </a:tabs>
</a:tabPanel>

动态加载的方式

对于加载的标签页比较复杂的情况下，通常会采取动态加载的方式。采用动态加载的方式，只有当标签页第一次被选中的情况下才会动态发送请求，加载需要的页面。因此在页面第一次加载的时候渲染的开销会比较小。

动态加载的配置方式仅仅需要在tab标签上指定属性ref="需要加载的页面"

                
<a:tab prompt="tab3" ref="box.screen" closeable="true" width="150"></a:tab>

需要注意的是避免被加载页面中的组件ID和当前页面以及其他被加载页面中的组件ID出现重复，否则加载的时候会有ID重复的提示信息

理论上来说页面被动态加载后和主页面是在同一个dom树上，js对象也是在同一个浏览器进程中。因此要注意ID重复的情况。

函数方式

tab组件同时还提供了函数的方式动态打开一个tab标签页。

                
var tab = $('testPanel');
tab.openTab('box.screen?a=1','新的Tab')
Demo
  1. Tab??
Attachments
  1. tab.rar

Comments

0 Responses to the article

暂时没有评论。

发表评论