[CLOSED] Mask delay and when component is ready loading?

  1. #1

    [CLOSED] Mask delay and when component is ready loading?

    So here is the situation. Got a store that is bound to a GridPanel. The GridPanel doesn't load until after the page is ready. The Grid gets loaded AFTER everything is loaded via a Ext.onReady function. Everything is working fine, as is. I have a two part question.

    First, when I make a store.reload() call in an Ext.onReady function, the corresponding Grid's mask loads for the duration of the Ajax call, then goes away. There is still a delay as it "renders" the data into the grid. Is there a way to delay the mask so that it shows AFTER the data is rendered instead of AFTER the load was successful (and BEFORE the grid is rendered)?

    Second, Is there a way better way to load the store via Ajax when the GridPanel component is ready?

    This is what I am doing (by the way, the store will hold upwards to about a possible 500 records -- average is about 200):

    .aspx:

    <script language="javascript" type="text/javascript">
      Ext.onReady(function() {
        var store = Ext.getCmp('gpNotices').getStore();
    
        store.reload({
          callback: function() {
            // TODO: do some stuff here
          }
        });
      });
    </script>
    
    <ext:Store ID="strNotices" runat="server" OnRefreshData="strNotices_RefreshData">
      <Reader>
        <ext:JsonReader>
          <Fields>
            <ext:RecordField Name="NoticeId" Type="Int" />
            <ext:RecordField Name="NoticeName" />
          </Fields>
        </ext:JsonReader>
      </Reader>
    </ext:Store>
    
    <ext:GridPanel ID="gpNotices" runat="server" StoreID="strNotices" Title="Notices" Icon="Clock">
      <ColumnModel runat="server">
        <Columns>
          <ext:ImageCommandColumn Width="25">
            <Commands>
              <ext:ImageCommand CommandName="notice" Icon="ClockGo" />
            </Commands>
          </ext:ImageCommandColumn>
          <ext:Column ColumnID="NoticeName" DataIndex="NoticeName" Header="Notice" />
        </Columns>
      </ColumnModel>
      <Listeners>
        <Command Handler="" />
      </Listeners>
      <LoadMask ShowMask="true" Msg="Loading  Notices..." />
    </ext:GridPanel>
  2. #2

    RE: [CLOSED] Mask delay and when component is ready loading?

    I believe you can add AutoLoad="true" to your store and you dont have to call store.reload() explicitly.
  3. #3

    RE: [CLOSED] Mask delay and when component is ready loading?

    Yes, I found this out after I posted.

    But, with the "break" from the store loading to the grid rendering, I had to still call it explicity like this:

    Ext.onReady(function() {
      var notices = Ext.getCmp('gpNotices');
      notices.getEl().mask('Loading Notices...', 'x-mask-loading');
    
      notices.getStore().reload({
        callback: function() {
          notices.getEl().unmask();
        }
      });
    });
    That seemed to solve the problem with the mask "hiding" too early.

Similar Threads

  1. [CLOSED] Delay loading of data
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Aug 08, 2012, 4:20 PM
  2. Delay User Control from loading
    By cwolcott in forum 2.x Help
    Replies: 1
    Last Post: May 21, 2012, 1:54 PM
  3. Gridpanel delay loading
    By vahid.ch in forum 1.x Help
    Replies: 1
    Last Post: Dec 19, 2011, 8:33 AM
  4. mask delay
    By norphos in forum 1.x Help
    Replies: 3
    Last Post: Jul 21, 2011, 7:25 AM
  5. [CLOSED] Delay in gridpanel loading
    By yobnet in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 01, 2010, 2:04 AM

Posting Permissions