What's New?

[CLOSED] SelectBox tab to focus and select issue

Page 1 of 2 12 LastLast
  1. #1
    Mar 22, 2013, 6:58 PM

    [CLOSED] SelectBox tab to focus and select issue

    Hello,
    I have a form with data entry fields, one of the fields is a Select Box that I want the user to be able to type a letter and the SelectBox options will display with first matching item selected. If the user mouse clicks on the SelectBox it works fine, But if you Tab through the fields to the SelectBox and type a letter an error is thrown: 'this.picker.listEl' is null or not an object

    Seems tabbing to the box isn't initializing the 'pick list', is there a way to make that happen? Here's my example page

    <%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            boxStore.DataSource = myData;
            selBox1.SelectedItems.Add(new Ext.Net.ListItem() { Value = "L" });
        }
    }
    private List<object> myData
    {
        get
        {
            List<object> box = new List<object>
                {   new { Descr = "Consumer", Code = "L" },
                    new { Descr = "Consumer Suppress", Code = "Q" },
                    new { Descr = "Business", Code = "N" },
                    new { Descr = "Business Suppress", Code = "R" },
                    new { Descr = "Canadian Consumer", Code = "C" },
                    new { Descr = "Canadian Consumer Suppress", Code = "W" },
                    new { Descr = "Other / Backend", Code = "O" },
                    new { Descr = "Zip Tape", Code = "Z" }
               };
            return box;
        }
    } 
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager runat="server"></ext:ResourceManager>
    <ext:FormPanel ID="FormPanel1" runat="server" Layout="TableLayout" Title="Test Panel" BodyPadding="10" Width="500">
        <LayoutConfig>
            <ext:TableLayoutConfig Columns="2"></ext:TableLayoutConfig>
        </LayoutConfig>
        <Items>
            <ext:TextField ID="txt1" runat="server" FieldLabel="Text 1" AllowBlank="false"></ext:TextField>
            <ext:TextField ID="txt2" runat="server" FieldLabel="Text 2" AllowBlank="false"></ext:TextField>
            <ext:SelectBox ID="selBox1" runat="server" FieldLabel="Select Box" DisplayField="Descr" ValueField="Code" Size="20">
                <Store>
                    <ext:Store ID="boxStore" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Descr"></ext:ModelField>
                                    <ext:ModelField Name="Code"></ext:ModelField>
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Sorters>
                            <ext:DataSorter Property="Descr" Direction="ASC"></ext:DataSorter>
                        </Sorters>
                    </ext:Store>
                </Store>
            </ext:SelectBox>
        </Items>
    </ext:FormPanel>
    </form>
</body>
</html>
    Last edited by Baidaly; Mar 27, 2013 at 9:12 PM. Reason: [CLOSED]
  2. #2
    Mar 22, 2013, 10:12 PM
    Hello!

    Temporarily use the following overriding:

    Ext.override(Ext.ux.SelectBox, {
	focusAndSelect : function (record) {
		record = Ext.isNumber(record) ? this.store.getAt(record) : record;
		this.ignoreSelection = true;
		this.picker.select(record);
		this.ignoreSelection = false;

		if (this.picker.listEl)
			this.picker.listEl.scrollChildIntoView(this.picker.getNode(record), false);

		this.setValue([record], false);
		this.fireEvent('select', this, [record]);
		this.inputEl.focus(false, 500);
	}
});
    Or you can use the following ComboBox:

    <ext:ComboBox ID="selBox1" runat="server" FieldLabel="Select Box" DisplayField="Descr" ValueField="Code" Size="20" MinChars="1" AutoSelect="True" TypeAhead="True">
	<Store>
		<ext:Store ID="boxStore" runat="server">
			<Model>
				<ext:Model runat="server">
					<Fields>
						<ext:ModelField Name="Descr"></ext:ModelField>
						<ext:ModelField Name="Code"></ext:ModelField>
					</Fields>
				</ext:Model>
			</Model>
			<Sorters>
				<ext:DataSorter Property="Descr" Direction="ASC"></ext:DataSorter>
			</Sorters>
		</ext:Store>
	</Store>
</ext:ComboBox>
    We are investigating.
  3. #3
    Mar 25, 2013, 1:26 AM
    Related thread: http://forums.ext.net/showthread.php?24066
  4. #4
    Mar 25, 2013, 6:06 AM
    Hello,

    The bug has been fixed in SVN trunk and will be included into the next release.

    Searching on key will occur only if a SelectBox is expanded.

    If you need to get it expanded when it gets focus after pressing the Tab key inside a previous field, please set up this Focus listener for a SelectBox.
    <Focus Handler="this.onTriggerClick();" />
  5. #5
    Mar 25, 2013, 9:20 PM
    I didn't get the combobox example from Baidaly to work, but did the Focus listener. Unfortunately it has a little quirk in IE8 which my user base has to use. If you tab to the selectbox the list expands just fine, but if you mouse click in the text box area(not the trigger) the list expands for just a second then goes away, and this is only the First time you click, if you click a second time it stays expanded. It works fine in Chrome though.

    Once I get to a good point in my development I will update to the latest SVN code.

    Thanks,
    JW
  6. #6
    Mar 25, 2013, 10:44 PM
    Try to add buffer:

    <Focus Handler="this.onTriggerClick();" Buffer="100" />
  7. #7
    Mar 26, 2013, 5:54 PM
    seems the Focus trigger is closing the selection list, if I set 
    <Focus Handler="this.onTriggerClick();" Buffer="1000"></Focus>
    the select list expands for a second then it closes, so it's there for however long you set the buffer. Probably need a way to detect if the list is expanded already and cancel out

    JW
  8. #8
    Mar 26, 2013, 9:21 PM
    You can use the following approach but we will not be collapse by clicking on combobox, only on blur or trigger click:

    Focus Handler="
	this.mun(this.inputEl, 'click', this.onTriggerClick, this);
	this.onTriggerClick();
	" />
  9. #9
    Mar 27, 2013, 4:48 AM
    I would also try the following Focus listener.
    <Focus Handler="if (!this.isExpanded) { this.onTriggerClick(); }" Delay="200" />
  10. #10
    Mar 27, 2013, 6:16 PM
    Quote Originally Posted by Daniil View Post
    I would also try the following Focus listener.
    <Focus Handler="if (!this.isExpanded) { this.onTriggerClick(); }" Delay="200" />
    Perfect! Thanks a lot, you can close this ticket.

    JW
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Infinite scrolling grid select row and focus
    By ASAPCH in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Oct 26, 2012, 6:27 PM
  2. after select item from selectbox textfield is blank
    By Dharmesh in forum 1.x Help
    Replies: 0
    Last Post: Jul 08, 2012, 2:55 PM
  3. TextField text select on focus Issue in Firefox
    By rishu in forum 2.x Help
    Replies: 3
    Last Post: Apr 04, 2012, 10:36 AM
  4. [CLOSED] select number on focus
    By rnfigueira in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 12, 2011, 3:16 PM
  5. [CLOSED] [1.0] SelectBox Select event fires twice
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 09, 2009, 2:20 PM

Posting Permissions