Results 1 to 7 of 7

Thread: [OPEN-532] Rendering issues with 'x' clear icon

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Nov 2010
    Posts
    35
    Vote Rating
    0
      0  

    Default [OPEN-532] Rendering issues with 'x' clear icon

    A few rendering issues with the 'x' icon have been detailed in a similar thread for an issue with the icon not being displayed, but the particular issue that is the namesake of that thread has been fixed so I'm opening a separate bug report for the way the icon is rendered.

    I'll focus just on SearchFields and TextFields displayed in a Toolbar. If Kitchen Sink is modified so that the SearchField and TextField elements in the Toolbar tab of the Forms demo are configured as showClear=true, as such:

    Code:
     title: 'Toolbars',
            styleHtmlContent: true,
            xtype: 'form',
            scroll: 'vertical',
            html: "A human being should be able to change a diaper, plan an invasion, butcher a hog, conn a ship, design a building, write a sonnet, balance accounts, build a wall, set a bone, comfort the dying, take orders, give orders, cooperate, act alone, solve equations, analyze a new problem, pitch manure, program a computer, cook a tasty meal, fight efficiently, die gallantly. - RAH",
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                items: [{
                    xtype: 'searchfield',
                    placeHolder: 'Search',
                    name: 'searchfield',
                    showClear: true
                }]
            },
            {
                xtype: 'toolbar',
                dock: 'top',
                items: [{
                    xtype: 'textfield',
                    placeHolder: 'Text',
                    name: 'searchfield',
                    showClear: true
                }]
            },
            {
                xtype: 'toolbar',
                dock: 'top',
                items: [{
                    xtype: 'select',
                    name: 'options',
                    options: [
                        {text: 'This is just a big select',  value: '1'},
                        {text: 'Another select item', value: '2'}
                    ]
                }]
            }]
    The 'x' icon renders pretty poorly:



    User 'Animal' in the other 'x' icon bug thread also has made some comments on rendering of the icon that he may share either here or in a separate bug report.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,756
    Vote Rating
    81
      0  

    Default

    The way that icon is inserted into the DOM right now, it's like a TriggerField. The icon is after the input field, and width settings needs to take it into account.

    I would probably use an element positioned over the top of the last 2em of the input field. And style the input field with padding-right: 2em to leave space for it.
    Longtime Sencha engineer. Now surplus to requirements apparently...

  3. #3
    Sencha User BrendanC's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Vote Rating
    3
      0  

    Default

    Thanks for the bug report.

  4. #4
    Ext User
    Join Date
    Nov 2010
    Posts
    35
    Vote Rating
    0
      0  

    Default

    Still not fixed in 1.0.

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Still not fixed in 1.1.0

  6. #6
    Touch Premium Member hotdp's Avatar
    Join Date
    Nov 2010
    Location
    Denmark
    Posts
    604
    Vote Rating
    14
      0  

    Default

    Is there anyone who had a good fix for this? I really need this functionality...

  7. #7
    Sencha User
    Join Date
    Jan 2012
    Posts
    16
    Vote Rating
    0
      0  

    Default

    I need this feature works too.

    Thanks in advance.

Similar Threads

  1. Reset a list when searchfield clear icon clicked
    By mobiprem in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 16 Mar 2012, 10:37 AM
  2. Clear grid's sort arrow icon
    By SLerman in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 5 Oct 2011, 5:49 AM
  3. Replies: 1
    Last Post: 5 Jul 2010, 4:13 AM
  4. [FIXED-532][3.1] Problem loading values into store
    By mikecar in forum Ext 3.x: Bugs
    Replies: 4
    Last Post: 23 Feb 2010, 11:16 AM
  5. ComboBox and clear / reset issues
    By mikegiddens in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 18 Jun 2007, 2:34 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •