Print Page - Switching between TAB is very slow

Title: Switching between TAB is very slow
Post by: arma on February 03, 2014, 06:05:14 PM

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.

Title: Re: Switching between TAB is very slow
Post by: arma on February 03, 2014, 09:10:37 PM

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.

Title: Re: Switching between TAB is very slow
Post by: stworthy on February 04, 2014, 08:27:02 AM

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');

Title: Re: Switching between TAB is very slow
Post by: arma on February 05, 2014, 12:48:16 AM

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.

Title: Re: Switching between TAB is very slow
Post by: stworthy on February 05, 2014, 06:33:52 AM

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

Title: Re: Switching between TAB is very slow
Post by: arma on February 06, 2014, 05:53:57 AM

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 ?

Title: Re: Switching between TAB is very slow
Post by: arma on February 06, 2014, 05:59:12 AM

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 ;)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: arma on February 03, 2014, 06:05:14 PM