[CLOSED] Pagingtoolbar not visible in form panel when plugin for form is used

[jlosi]

Hey Guys, I have what is probably a small issue related to something I'm doing with the plugin(which is really just an extension) I have, but I have no idea what I am doing improperly or what. My intent is to extend the formpanel for this page to nicely wrap up some function calls related to the form "context" instead of having function xyz() all over the place.

simple generic plugin

Ext.ux.AccountForm = function (config) {


    Ext.apply(this, config);
}
Ext.extend(Ext.ux.AccountForm, Ext.FormPanel,
 {
     init: function (panel) {
         Ext.apply(panel, {
             handleUserEditSuccess: function () {
                 UserDetailsStore.load();
             },
             showMask: function (text) {
                 this.getEl().mask(text);
             },
             hideMask: function () {
                 this.getEl().unmask();
             }
         }, this);
     }
 });
 Ext.preg('mvcEditFormExtension', Ext.ux.AccountForm);

Formpanel

 <ext:FormPanel ID="UserDetailForm" IDMode="Static" Region="West" runat="server" BodyStyle="background-color:#D5E2F2;"
                Width="400"   Padding="20" Title="Edit Users">
                <TopBar>
                    <ext:PagingToolbar ID="DPager" StoreID="UserDetailsStore" runat="server" PageSize="1"
                        HideRefresh="true" DisplayInfo="false" IDMode="Static">
                        <Items>
                            <ext:Button ID="UpdateUserButton" runat="server" Icon="Disk">
                                <DirectEvents>
                                    <Click Url="~/Facility/Edit" Method="POST" Json="false" Success="UserDetailForm.handleUserEditSuccess()" />
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:PagingToolbar>
                </TopBar>
                <Items>
                    <ext:Hidden ID="DID" DataIndex="ID" runat="server" />
                    <ext:TextField ID="DFirstName" DataIndex="FirstName" AnchorHorizontal="90%" runat="server"
                        FieldLabel="First Name" IDMode="Static" AllowBlank="false" EmptyText="First Name is required"
                        MsgTarget="Under">
                    </ext:TextField>
                    <ext:TextField ID="DLastName" DataIndex="LastName" runat="server" AnchorHorizontal="90%"
                        FieldLabel="Last Name" IDMode="Static" AllowBlank="false" EmptyText="Last Name is required"
                        MsgTarget="Under">
                    </ext:TextField>
                    <ext:TextField ID="DUserName" DataIndex="UserName" runat="server" AnchorHorizontal="90%"
                        FieldLabel="User Name" IDMode="Static" AllowBlank="false" ValidateOnBlur="true"
                        MsgTarget="Under" EmptyText="User name is required">
                    </ext:TextField>
                    <ext:TextField ID="DEmail" DataIndex="Email" runat="server" AnchorHorizontal="90%"
                        FieldLabel="Email" IDMode="Static" Vtype="email" AllowBlank="false" ValidateOnBlur="true"
                        MsgTarget="Under" EmptyText="Email is required">
                    </ext:TextField>
                    <ext:Checkbox ID="DEnabled" DataIndex="Enabled" runat="server" AnchorHorizontal="90%"
                        FieldLabel="Enabled" IDMode="Static" />
                    <ext:MultiCombo ID="DRoles" IDMode="Static" DataIndex="Roles" runat="server" AnchorHorizontal="90%"
                        ListEmptyText="No Roles Found" ValueField="ID" DisplayField="RoleName" FieldLabel="Roles"
                        Editable="false" LoadingText="Loading Role Data" SelectionMode="Selection" AlwaysMergeItems="true"
                        StoreID="RolesStore">
                    </ext:MultiCombo>
                </Items>
                <Plugins>
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.AccountForm" />
                </Plugins>
            </ext:FormPanel>

I KNOW it's the plugin or something to do with it, because as soon as I remove it, the paging toolbar renders. ADDITIONALLY, the paging OBJECT is created as I can see it in firebug.. it just doesn't render. So what am I doing wrong with the plugin that it will not show the toolbar?

Thanks!

[EDIT]

I just noticed this error in the JS Console in chrome:

• Uncaught TypeError: Cannot call method 'getHeight' of undefined
  
  • Ext.BoxComponent.Ext.extend.getHeightext.axd:12798
  • (anonymous function)ext.axd:18286
  • Ext.apply.eachext.axd:473
  • Ext.Panel.Ext.extend.getToolbarHeightext.axd:18285
  • Ext.Panel.Ext.extend.syncHeightext.axd:17976
  • Ext.Panel.Ext.extend.onLayoutext.axd:17961
  • Ext.layout.ContainerLayout.Ext.extend.runLayoutext.axd:13878
  • Ext.layout.ContainerLayout.Ext.extend.onResizeext.axd:13871
  • EXTUTIL.Event.fireext.axd:310
  • Ext.override.fireEventext.axd:579
  • Ext.Panel.Ext.extend.onBodyResizeext.axd:18278
  • Ext.Panel.Ext.extend.onResizeext.axd:18269
  • Ext.BoxComponent.Ext.extend.setSizeext.axd:12770
  • Ext.extend.applyFns.westext.axd:15061
  • Ext.layout.BorderLayout.Ext.extend.onLayoutext.axd:14433
  • Ext.layout.ContainerLayout.Ext.extend.layoutext.axd:13768
  • (anonymous function)ext.axd:888
  • Ext.layout.ContainerLayout.Ext.extend.runLayoutext.axd:13877
  • Ext.layout.ContainerLayout.Ext.extend.onResizeext.axd:13871
  • EXTUTIL.Event.fireext.axd:310
  • Ext.override.fireEventext.axd:579
  • Ext.Panel.Ext.extend.onBodyResizeext.axd:18278
  • Ext.Panel.Ext.extend.onResizeext.axd:18269
  • Ext.BoxComponent.Ext.extend.setSizeext.axd:12770
  • Ext.layout.BorderLayout.Region.applyLayoutext.axd:14764
  • Ext.layout.BorderLayout.Ext.extend.onLayoutext.axd:14453
  • Ext.layout.ContainerLayout.Ext.extend.layoutext.axd:13768
  • (anonymous function)ext.axd:888
  • Ext.layout.ContainerLayout.Ext.extend.runLayoutext.axd:13877
  • call
  
  

[Daniil]

Hi,

I think the problem lies here:

init: function (panel) {
    Ext.apply(panel, {
        handleUserEditSuccess: function () {
            UserDetailsStore.load();
        },
        showMask: function (text) {
            this.getEl().mask(text);
        },
        hideMask: function () {
            this.getEl().unmask();
        }
    }, this);
}

There is ", this" at the end. I'm not sure what you mean, but I would remove it. It erases the properties of the "panel" instance.

[jlosi]

Ahhh.. you're right.. actually, I had to replace the scope with the panel object and the problem was solved. I can't believe I didn't notice that before. I kept staring at it and staring at it.. sometimes it just takes another set of eyes.

the fix:

Ext.extend(Ext.ux.AccountForm, Ext.FormPanel,
 {
     init: function (panel) {
         Ext.apply(panel, {
             handleUserEditSuccess: function () {
                 UserDetailsStore.load();
             },
             showMask: function (text) {
                 this.getEl().mask(text);
             },
             hideMask: function () {
                 this.getEl().unmask();
             }
         },panel); //use panel as scope
     }
 });

[Daniil]

I understand you, I spent several hours in a similar situation today :) A launch break helped me:)

Could you clarify what "scope" do you mean in the context of the Ext.apply function?

Seems you could just remove the third parameter.
http://docs.sencha.com/ext-js/3-4/#!...t-method-apply

[jlosi]

Indeed. and now I've learned something new today. Still learning all the nuances of the framework. Thanks for the link!

[Daniil]

I am still learning as well :)