[CLOSED] Design Question

[cwolcott]

OK the application is growing and I am looking to do a little refactoring of the code because some of the aspx files are getting very large and hurting by head when I scan through the code. What suggestions does anyone have to break up the following:

UsersRoles.aspx

   <ext:TabPanel  ...>
      <Items>
         <ext:Panel runAt="server" Title="Active" Icon="UserGreen" Layout="FitLayout">
            <Items>
               <ext:GridPanel ...>
                  ...
               </ext:GridPanel>
            </Items>
         </ext:Panel>
      </Items>
         <ext:Panel runAt="server" Title="Inactive" Icon="UserRed" Layout="FitLayout">
            <Items>
               <ext:GridPanel ...>
                  ...
               </ext:GridPanel>
            </Items>
         </ext:Panel>
      </Items>
         <ext:Panel runAt="server" Title="Roles" Icon="Group" Layout="FitLayout">
            <Items>
               <ext:GridPanel ...>
                  ...
               </ext:GridPanel>
            </Items>
         </ext:Panel>
      </Items>
   </ext:TabPanel>

For some unknown reason I pulled out the <ext:GridPanel ...> to </ext:GridPanel> and put it in a user control and called it via:

         <ext:Panel runAt="server" Title="Roles" Icon="Group" Layout="FitLayout">
            <Items>
               <ext:UserControlLoader runat="server" Path="./TabRoles.ascx />   
            </Items>
         </ext:Panel>

Is the the best way or could I have put it in a aspx and called it? and if so how?

[Timothy]

Quick question, any reason why you need to load the content of all of those tabs on page load? I mean, ... they aren't visible so why render them? Have you considered hooking up your tab activate events to load partial responses and load the content on demand?

I use MVC and it works really well with partial responses :)

Cheers,
Timothy

[cwolcott]

Currently I do not plan to go the MVC route.

I am atleast delaying the load of the data <ext:Store ... AutoLoad="false"> on the other tabs until they become active. The following code reloads the data when a tab is changed:

<ext:TabPanel ...>
   <Listeners>
      <AfterRender Handler="this.getActiveTab().getComponent(0).getStore().reload();" />
      <TabChange Handler="newTab.getComponent(0).getStore().reload();" />
   </Listeners>
   ...
</ext:TabPanel>

I was just curious on other options to break up the code.

[Timothy]

You don't have to go the MVC route; although I must admit I can't remember what it was like programming in forms ;)

While delaying your load is a good measure, you also need to think about the amount of payload you are returning to the client. I've always used the rule of thumb "out of sight, why load?". You could drastically reduce your load on the client by using <AutoLoad /> on the <Active> listener.

Hope that helps :)

Cheers

[Daniil]

Hi Timothy,

+1, MVC rocks.

Hi Chris,

I think UserControlLoader is the best in your case.

You could also consider render the grids dynamically using XRender or Loader with Component Mode. But it will require a lot of additional coding which, I think, is not an option as you'd like just to decrease ASPX.

By the way, you might be interested to look at this example - deferred loading for user controls using UserControlRenderer.
http://forums.ext.net/showthread.php...ll=1#post80829

[cwolcott]

When I got in this morning I looked at a different application that a fellow developer was working on, but it is against Ext.NET v1.2. In his aspx with a TabPanel he coded the following:

<%@ Register Src="~/Controls/HomeView.ascx" TagName="HomeView" TagPrefix="ctrl" %>
...
   <ext:TabPanel ...>
      <Items>
         <ext:Panel Title="Home" ...>
            <Content>
               <ctrl:HomeView Id="HomeView" ... />
            </Content>
         </ext:Panel>
      </Items>
   </ext:TabPanel>
...

Is it preferred to call a control with <ext:UserControlLoader runat="server" Path="~/Controls/HomeView.ascx /> ?

A secondary issue is that I have added javascript code to the ascx control and am trying to reference javascript fn in my control (.ascx) but I get an error that the function is not defined. When I move it up to the aspx file everything is fine. Any thoughts?

[Vladimir]

Hi,

Is it preferred to call a control with <ext:UserControlLoader runat="server" Path="~/Controls/HomeView.ascx /> ?

You can use any convenience method (place user control to content and set Layout for a container) or use UserControlLoader in Items collection

A secondary issue is that I have added javascript code to the ascx control and am trying to reference javascript fn in my control (.ascx) but I get an error that the function is not defined. When I move it up to the aspx file everything is fine. Any thoughts?

If user control widgets are participated in the layout then user contol is not rendered, only widgets arr extracted from user control.
You can place your script inside HtmlBin of user control widget, For example, see CustomerGrid.ascx in
https://examples2.ext.net/#/Associat...any/Lazy_Load/

[cwolcott]

Thank you very much. Everything works. Refactoring code now to a more manageable size. Please close the thread.