[CLOSED] Multi-combo not selecting values after formpanel loads

[jlosi]

I have a form panel:

            <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" SelectionMode="Selection" StoreID="RolesStore" Mode="Local">
                    </ext:MultiCombo>
                </Items>
                <Plugins>
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.AccountForm" />
                </Plugins>
            </ext:FormPanel>

which is bound to a store:

  <ext:Store ID="UserDetailsStore" runat="server" IDMode="Static" AutoLoad="false"
        RemotePaging="true" ShowWarningOnFailure="false">
        <Reader>
            <ext:JsonReader IDProperty="ID" Root="data">
                <Fields>
                    <ext:RecordField Name="ID" Type="Int" />
                    <ext:RecordField Name="FirstName" Type="String" />
                    <ext:RecordField Name="LastName" Type="String" />
                    <ext:RecordField Name="UserName" Type="String" />
                    <ext:RecordField Name="Email" Type="String" />
                    <ext:RecordField Name="Enabled" Type="Boolean" />
                    <ext:RecordField Name="Roles" IsComplex="true">
                        <Convert Fn="rolesConverter" />
                    </ext:RecordField>
                </Fields>
            </ext:JsonReader>
        </Reader>
        <Proxy>
            <ext:HttpProxy Json="true" Url="~/Facility/FacilityUsers" />
        </Proxy>
        <BaseParams>
            <ext:Parameter Name="start" Value="0" Mode="Raw" />
            <ext:Parameter Name="limit" Value="1" Mode="Raw" />
        </BaseParams>
        <Listeners>
            <Load Handler="loadForm(this)" Delay="50" />
        </Listeners>
    </ext:Store>

and the combo in that form panel is bound to the following store:

 <ext:Store ID="RolesStore" IDMode="Static" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="ID" Root="data">
                <Fields>
                    <ext:RecordField Name="ID" Type="Int" />
                    <ext:RecordField Name="RoleName" Type="String" />
                </Fields>
            </ext:JsonReader>
        </Reader>
        <Proxy>
            <ext:HttpProxy Url="~/Account/Roles" Json="true" />
        </Proxy>
        <Listeners>
            <BeforeLoad Handler="rolesStoreLoad()" />
            <Load Handler="UserDetailsStore.load()" />
        </Listeners>
    </ext:Store>

here is background JS for the page:

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();
             }
         });
     }
 });
 Ext.preg('mvcEditFormExtension', Ext.ux.AccountForm);


function loadForm(store) {
    UserDetailForm.hideMask();
    UserDetailForm.showMask("Loading account data, please wait...");
    UserDetailForm.getForm().loadRecord(store.getAt(0) || {}, true);
    UserDetailForm.clearInvalid();
    UserDetailForm.hideMask();
}


function rolesConverter(items, value) {
    var roles = [];
    Ext.each(items, function (item, index) {
        roles.push(item.ID);
    });
    return roles;
}


function rolesStoreLoad() {
    UserDetailForm.showMask("Loading roles data, please wait...");
}

The sequence is like this.
1. I load the roles store for the combo box
2. after the roles store loads, then I load the form
3. once the form is loaded and I click on the combo in the first record (do not page to any other record) to expand the selections, none of the values that were loaded for that record and match the values in the combo store are highlighted. HOWEVER, if I page to the next record and back again, they are selected.


It sounds like a delay issue.. but I don't know what to delay, or if it's something else.

[Daniil]

Hi,

It's hard to say what maybe wrong just looking at the code.

We would appreciate if you could provide us with a full sample (just a single aspx page) which we could copy, paste and run.