Switching between TAB is very slow

[arma]

I have a tab container with 2 tab item. Each tab has accordion containing data grid with paging 50 rows and a form with easyui-layout (separating north and center for header entry and detail entry). When i click from a tab to another tab it takes 2-3 seconds to appear.

Is there any ways to speed this up ?

Since i could not hide grid so i put form and data grid in an accordion (without header) for easier hide and show.

Thanks.

[arma]

I removed accordion inside tab, it's now more responsive eventhough there's still a small delay. So putting accordion inside tab will cause huge performance issue ?

Please assist if there's another way to show and hide between entry form and grid.

My app flow when opening page will display grid with toolbar for some action (delete, edit, new etc). When click new or edit it will hide grid and display form on the same tab.

Cheers.

[stworthy]

Another way to display only one component between form and grid is to wrap a panel around them.

Code:

<div id="p1" class="easyui-panel" fit="true" closed="true">...</div>
<div id="p2" class="easyui-panel" fit="true">...</div>

The code below shows how to display panel p1 and hide panel p2.

Code:

$('#p1').panel('open');
$('#p2').panel('close');

[arma]

Hi Stworthy,

Yes, i already used panel before, if i use panel the second panel seems does not refit when windows resize. Could you please check the following code ? It works good inside accordion.

Code:

<div id="pnl-list" class="easyui-panel" fit="true" border="false">
    <table id="dg-list" fit="true" class="easyui-datagrid"></table>
    <div id="tlb-list">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="showPanel2()">Show Panel 2</a>
    </div>
</div>
<div id="pnl-form" class="easyui-panel" fit="true" border="false" closed="true">
    <div class="easyui-layout" fit="true">
        <div region="north" border="false" style="padding:1px 1px;background:#efefef;height: 30px; border-bottom: 1px solid #95B8E7;">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-grid" plain="true" onclick="showPanel1()">Back to Panel 1</a>
        </div>
        <div region="center" border="false" style="padding:0px">
            <!----------- THIS ONE NOT RESIZED WHEN WINDOWS RESIZES -------->
            <!----------- I USE GRID HERE TO REPLACE FORM JUST TO SEE IF ITS RESIZABLE ------->
            <table id="dg-item" fit="true" class="easyui-datagrid"></table>
        </div>
    </div>
</div>

Thanks.

[stworthy]

Please try to download the updated panel plugin from http://www.jeasyui.com/easyui/plugins/jquery.panel.js and include it to the page.

[arma]

Hi Stworthy,

There's no difference after using the updated jquery.panel.js, still not autoresized.

If click another tab and get back to previous tab, panel content will resizes automatically. Any fix suggestion ?

[arma]

Ah my mistakes, i declare panel.js in html header before jquery.easyui.min.js, after i moved the js declaration after jquery.easyui.min.js it works good . Thanks a lot