[CLOSED] ComboBox shows ValueField instead of DisplayField in a Grid.

[flormariafr]

Hi,

I have a GridPanel with a comboBox to show the cultures. My problem is that when the Grid is loaded it shows the
ValueField value instead of DisplayField, but when I edit the column it shows the Display field correctly.

Could you please tell me what I am doing wrong?

 
   protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            createLanguagesDataSource();
        }
        
    }
 
    protected void createLanguagesDataSource()
    {
        this.StoreLanguages.DataSource = new object[]
            {
                new object[] { ResourceManager.GetIconClassName(Icon.FlagUs), "English", "en-US"},
                new object[] { ResourceManager.GetIconClassName(Icon.FlagUs), "Español", "es-ES"}
            };
        this.StoreLanguages.DataBind();
        ResourceManager1.RegisterIcon(Icon.FlagUs);
        ResourceManager1.RegisterIcon(Icon.FlagEs);
    }        
 
    <ext:Store ID="StoreLanguages" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="iconCls" />
                        <ext:RecordField Name="name" />
                        <ext:RecordField Name="culture" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>            
     </ext:Store>   
 
  <ext:Panel ID="PanelHotTopics" runat="server" Height="600px" Title="Hot Topics"
            Cls="panelTabGroupContainer" Border="false">
    <Content>
        <ext:GridPanel ID="GridPanelHotTopics" runat="server" Height="430px" Width="666px" Title="Hot Topics" 
                       StoreID="StoreHotTopics" Cls="formGroupListing" BodyCssClass="formContentGroupListing"
                       Border="false"
                       >
            <TopBar>
              <ext:Toolbar ID="ToolbarGridPanelHotTopics" runat="server"
                >
                <Items>
                    <ext:ToolbarFill ID="ToolbarFill1" runat="server" MaxWidth="20px"  />
                    <ext:Button ID="Button1" runat="server"  
                                Text="<%$ Resources:Resource, btnSave %>"
                                Icon="Disk" Cls="btnMenuGroupListing">
                        <Listeners>
                            <Click Handler="#{GridPanelHotTopics}.save();" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="Button2" runat="server"  Text="<%$ Resources:Resource, btnDelete %>"
                                Icon="Delete">
                        <Listeners>
                            <Click Handler="#{GridPanelHotTopics}.deleteSelected();" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="Button3" runat="server"  Text="<%$ Resources:Resource, btnInsert %>" Icon="Add">
                        <Listeners>
                            <Click CausesValidation="true" Handler="#{GridPanelHotTopics}.insertRecord(0, {});#{GridPanelHotTopics}.getView().focusRow(0);#{GridPanelHotTopics}.startEditing(0, 1);" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="Button4" runat="server"  Text="<%$ Resources:Resource, btnRefresh %>" 
                                Icon="ArrowRefresh">
                        <Listeners>
                            <Click Handler="#{GridPanelHotTopics}.reload();" />
                        </Listeners>
                    </ext:Button>
                        </Items>
                    </ext:Toolbar>
            </TopBar>
        
            <ColumnModel>
                <Columns>
                    <ext:Column ColumnID="ColumnID" DataIndex="ID" Hidden="true"/>
                    
                    <ext:Column ColumnID="DESCRIPTIONcolumn" 
                                Header="<%$ Resources: GridPanelHotTopics.DESCRIPTIONcolumn %>"
                                DataIndex="DESCRIPTION" Width="420px">
                        <Editor>
                            <ext:TextField ID="TextFieldDESCRIPTION" runat="server">
                            </ext:TextField>
                        </Editor>
                    </ext:Column>
                    <ext:Column ColumnID="CULTUREcolumn" 
                                Header="<%$ Resources: GridPanelHotTopics.CULTUREcolumn %>" 
                                DataIndex="CULTURE" Width="70px">
                        <Editor>
                           <ext:ComboBox ID="ComboBoxCULTUREcolumn" runat="server" 
                                        AllowBlank="false"
                                        TypeAhead="true" 
                                        Mode="Local" 
                                        ForceSelection="true"
                                        SelectOnFocus="true" 
                                        StoreID="StoreLanguages" 
                                        DisplayField="name" 
                                        ValueField="culture"
                                        TriggerAction="All"
                                        >
                                <Template ID="Template1" runat="server">
                                        <Html>
                                            <tpl for=".">
                                                <div class="x-combo-list-item icon-combo-item {iconCls}">
                                                    {name}
                                                </div>
                                            </tpl>
                                        </Html>
                                 </Template>  
                                 <Listeners>
                                      <Select Handler="this.setIconCls(record.get('iconCls'));" />
                                 </Listeners>                                                                  
                          </ext:ComboBox>
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
        <div class="groupBackBottom"/>
        <div class="paginationToolBarGroupListing">
                  <ext:PagingToolBar ID="PagingToolBar1" 
                        runat="server" 
                        StoreID="StoreGridGroupListing" 
                        PageSize="10" 
                        DisplayInfo="false" 
                       />
        </div>                            
      
    </Content>
</ext:Panel>

[Daniil]

Hello, flormariafr!

I have a GridPanel with a comboBox to show the cultures. My problem is that when the Grid is loaded it shows the
ValueField value instead of DisplayField, but when I edit the column it shows the Display field correctly.

Could you please tell me what I am doing wrong?

The ComboBox in the Editor section is used only to edit the column, not to show.
When the GridPanel is loaded it shows the value from its store (not ComboBox store) with name specified in DataIndex property.

DataIndex="CULTURE"

So, you need to change a value of DataIndex property or use a Renderer section for showing values in a column.

[Vladimir]

Hi,

Please see the following sample
https://examples1.ext.net/#/GridPane...Field_Mapping/

[flormariafr]

Hi,

I am using a panel that contents radio buttons and I am filling the BoxLabels dinamicatly by code when the page is loaded.

Somo label can be larger than others. My question is if it is posible to resize the panel depending of the BoxLabel lenght.

[Vladimir]

Hi,

Please create new topic, this topic is started with another issue

[flormariafr]

Hi Vladimir,


I aplogize. it was mistake.

I will create a new topic for the last post.

Thanks for the example.