What's New?

[CLOSED] Combobox DisplayField Template

  1. #1
    Nov 28, 2012, 3:29 PM

    [CLOSED] Combobox DisplayField Template

    Is there a way to add a display template for a combobox displayfield like displayTpl in ExtJS?
    http://docs.sencha.com/ext-js/4-1/#!...mboBox-cfg-tpl

    I would like the selected item to show ({stateAbbr}) [Parenthesis around the state abbreviation].

    To define a template for the list items I used:
    ...
<ListConfig>
   <ItemTpl runat="server">
      <Html>
         {stateNm} - ({stateAbbr})
      </Html>   
   </ItemTpl>
</ListConfig>
...
    Last edited by Daniil; Nov 29, 2012 at 4:56 AM. Reason: [CLOSED]
  2. #2
    Nov 28, 2012, 5:22 PM
    I'll prepare an example to you
    Last edited by RCN; Nov 28, 2012 at 5:27 PM.
  3. #3
    Nov 28, 2012, 5:34 PM
    Take a look on the following Example Explorer's example:
    https://examples2.ext.net/#/Form/Com...rop_Down_List/

    Based on the example provided above, please do following changes: lines 4 to 12 and lines 43 to 45, as shown below

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript">
        var doAction = function (item, records) {
            debugger;
            if (records.length == 1) {
                var record = records[0].data;
                App.ComboBox1.setRawValue(Ext.net.StringUtils.format("{0} - ({1})", record.abbr, record.state));
            }
        }
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:ComboBox ID="ComboBox1" runat="server" Width="250" Editable="false" DisplayField="state"
        ValueField="abbr" TypeAhead="true" QueryMode="Local" ForceSelection="true" TriggerAction="All"
        EmptyText="Select a state..." SelectOnFocus="true">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="abbr" />
                            <ext:ModelField Name="state" />
                            <ext:ModelField Name="nick" />
                            <ext:ModelField Name="price" Type="Float" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ListConfig>
            <ItemTpl runat="server">
                <Html>
                    <div class="list-item">
							    <h3>{state}</h3>
							    {nick:ellipsis(15)} - ({price:usMoney})
						</div>
                </Html>
            </ItemTpl>
        </ListConfig>
        <Listeners>
            <Select Fn="doAction" />
        </Listeners>
    </ext:ComboBox>
</body>
</html>
    Last edited by RCN; Nov 28, 2012 at 5:39 PM.
  4. #4
    Nov 28, 2012, 6:59 PM
    That works just fine for me. I like the implementation that ExtJs presents in their sample using displayTpl. I wish it was that simple in Ext.Net.
    http://docs.sencha.com/ext-js/4-1/#!...mboBox-cfg-tpl

    var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
    ]
});

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    valueField: 'abbr',
    renderTo: Ext.getBody(),
    // Template for the dropdown menu.
    // Note the use of "x-boundlist-item" class,
    // this is required to make the items selectable.
    tpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
                    '<div class="x-boundlist-item">{abbr} - {name}</div>',
        '</tpl>'
    ),
    // template for the content inside text field
    displayTpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
                           '({abbr}) - {name}',
        '</tpl>'
    )
});
  5. #5
    Nov 29, 2012, 4:56 AM
    Hello,

    Thank you for the report. I think we just missed this property because it is absent in the ExtJS docs (I mean a separate article).

    Added, please update from SVN.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.ComboBox1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "1", "Item 1" },
                new object[] { "2", "Item 2" },
                new object[] { "3", "Item 3" }
            };
            store.DataBind();
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:ComboBox 
        ID="ComboBox1" 
        runat="server" 
        DisplayField="text" 
        ValueField="value">
        <Store>
            <ext:Store runat="server">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="value" />
                            <ext:ModelField Name="text" />
                        </Fields>
                    </ext:Model>
                </Model>
                <Reader>
                    <ext:ArrayReader />
                </Reader>
            </ext:Store>
        </Store>
        <DisplayTpl runat="server">
            <Html>
                <tpl for=".">
                    {value} : {text}
                </tpl>
            </Html>
        </DisplayTpl>
    </ext:ComboBox>
</body>
</html>
  6. #6
    Nov 29, 2012, 8:58 AM
    I can't believe you missed one interface out of a million. :-)
    Thanks for the addition interface. I thought I was losing my mind looking at Senchas docs and try to find it in Ext.NET.

    Thanks Raphael for you excellent assistance and attention to detail.
  7. #7
    Nov 29, 2012, 10:18 AM
    +1 to both of you Cwolcott and Daniil.

    Thanks Raphael for you excellent assistance and attention to detail.
    You're welcome and thanks for pointing the problem out
  8. #8
    Feb 01, 2013, 9:24 AM
    Quote Originally Posted by RCN View Post
    +1 to both of you Cwolcott and Daniil.


    You're welcome and thanks for pointing the problem out
    Hi RCN.. Would you please help me ?? I've a problem with combo box. I had sent this problem before but there is no answer yet..
    Let me describe my issue :
    1. In User Registration Page (simple sample) there is one combo box that load data from the database, the data like list of branches that must be selected before he/she want to register.
    Click image for larger version.  Name: Branches.PNG  Views: 227  Size: 11.3 KB  ID: 5526

    2. Let say that the user "A" select branch name "KCU-Mangga Dua" when he registered himself, and one day he want to change that branch into "KCU-Matraman".

    3. The problem is when the "edit button" clicked, the combo box does not show the current value(the combo box must display "KCU-Magga Dua" for the current setting).
    Current Result
    Click image for larger version.  Name: NullValueBranch.PNG  Views: 162  Size: 2.3 KB  ID: 5527

    Expecting Result when the edit button clicked show like this
    Click image for larger version.  Name: HaveValue.PNG  Views: 171  Size: 3.0 KB  ID: 5528

    4. In this case i have been successful get the data according to what the user had chosen before. This is the source to get the data from grid panel : 
    string gridJson = e.ExtraParams["ParentGrid"];
var gridData = JSON.Deserialize<Dictionary<string, string>[]>(gridJson);
    5. The current code that i have made to set value in combo box : 
    cbBranch.SetValueAndFireSelect(gridData[0]["BranchId"]);
    May be with my explanation, you can imagine what the problem is. It is very helpful if you give me a simple sample related to my problem. :)
    Thank you.

Similar Threads

  1. [CLOSED] ComboBox DisplayField with HTML?
    By peter.campbell in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 24, 2012, 8:31 PM
  2. Get value of DisplayField of Combobox
    By littletran in forum 1.x Help
    Replies: 0
    Last Post: May 17, 2012, 7:32 AM
  3. Problem Combobox.SelectedItem Same Displayfield, Different Values
    By Jack in forum 1.x Help
    Replies: 2
    Last Post: Mar 03, 2012, 3:33 PM
  4. Combobox DisplayField 2 fields???
    By 78fede78 in forum 1.x Help
    Replies: 3
    Last Post: Sep 06, 2010, 2:07 PM
  5. DisplayField of the ComboBox
    By Maia in forum 1.x Help
    Replies: 2
    Last Post: Jun 04, 2009, 10:46 AM

Posting Permissions