1. #1
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    443
    Vote Rating
    3
    Jangla is on a distinguished road

      0  

    Default Revisiting Clearable combo boxes in Ext 4

    Revisiting Clearable combo boxes in Ext 4


    So, I've been trying to create a nice clearable combo in Ext 4 and have hit a bit of a wall. Previously, in v3 we could provide the triggerConfig and be done with it but we can't do the same in Ext 4. In addition (in fact the main reason I'm posting) is that I also have a requirement to change the markup of each trigger slightly - I need to add an HTML5 attribute.

    I've found this effort: http://www.learnsomethings.com/2011/09/30/extjs-4-clearable-combobox-ala-twintriggers-example/

    .
    ..but it has a problem - it adds the new trigger to the end of the combo, changing it's width from what you would normally expect it to be. By this, I mean if you were to declare a text box above it in a form panel and set both controls to the same width, the total width of the clearable combo would be wider than the text field.

    So, am I missing something? Has this issue been solved and I've just failed to find it? Any help greatly appreciated.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Vote Rating
    828
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    There isn't a config for this. The trigger markup is created in the getTriggerMarkup which looks like:

    Code:
        getTriggerMarkup: function() {
            var me = this,
                i = 0,
                hideTrigger = (me.readOnly || me.hideTrigger),
                triggerCls,
                triggerBaseCls = me.triggerBaseCls,
                triggerConfigs = [];
    
            // TODO this trigger<n>Cls API design doesn't feel clean, especially where it butts up against the
            // single triggerCls config. Should rethink this, perhaps something more structured like a list of
            // trigger config objects that hold cls, handler, etc.
            // triggerCls is a synonym for trigger1Cls, so copy it.
            if (!me.trigger1Cls) {
                me.trigger1Cls = me.triggerCls;
            }
    
            // Create as many trigger elements as we have trigger<n>Cls configs, but always at least one
            for (i = 0; (triggerCls = me['trigger' + (i + 1) + 'Cls']) || i < 1; i++) {
                triggerConfigs.push({
                    tag: 'td',
                    valign: 'top',
                    cls: Ext.baseCSSPrefix + 'trigger-cell',
                    style: 'width:' + me.triggerWidth + (hideTrigger ? 'px;display:none' : 'px'),
                    cn: {
                        cls: [Ext.baseCSSPrefix + 'trigger-index-' + i, triggerBaseCls, triggerCls].join(' '),
                        role: 'button'
                    }
                });
            }
            triggerConfigs[i - 1].cn.cls += ' ' + triggerBaseCls + '-last';
    
            return Ext.DomHelper.markup(triggerConfigs);
        },
    As you can see there isn't anything to configure the trigger.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    443
    Vote Rating
    3
    Jangla is on a distinguished road

      1  

    Default


    Thanks for getting back to me. Bit of a shame - rather a backwards step in Ext4 then. I could override that entire method I suppose and turn it into code that's not really reusable anywhere but that feels really dirty

    Shame really, our clearable combos in Ext3 were really slick and used no images for the triggers:

    Screen Shot 2013-02-06 at 23.24.04.png

    Back to the drawing board, I guess.

  4. #4
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,264
    Vote Rating
    80
    ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough

      0  

    Default


    Isn't enough for you just add trigger1C1s and onTrigger1Click?
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  5. #5
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    443
    Vote Rating
    3
    Jangla is on a distinguished road

      0  

    Default


    What's really frustrating is a spinner field has a triggerTpl config option, albeit a supposedly private one. Very frustrated that Ext4 has moved backwards in these kind of configuration options but no matter - I think I've found a way; it's just more time consuming and not as extensible.

    If it works, I'll post the solution back.

  6. #6
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,264
    Vote Rating
    80
    ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough

      0  

    Default


    I still don't understand why you can just add buttons via triggerClsX and get click event with onTriggerClickX...

    Would you please elaborate?
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  7. #7
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,264
    Vote Rating
    80
    ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough

      1  

    Default


    Isn't as simple as this?

    Code:
    Ext.define('CCB.view.ClearableComboBox', {
        extend: 'Ext.form.field.ComboBox',
        alias: 'widget.clearablecombobox',
    
    
        trigger2Cls: 'x-form-clear-trigger',
    
    
        initComponent: function() {
            var me = this;
    
    
            me.callParent(arguments);
        },
    
    
        onTrigger2Click: function(event) {
            var me = this;
            me.clearValue();
        }
    
    
    });
    Selection_002.png

    Code:
    Ext.define('CCB.view.MyWindow', {
        extend: 'Ext.window.Window',
    
    
        requires: [
            'CCB.view.ClearableComboBox'
        ],
    
    
        height: 250,
        hidden: false,
        width: 400,
        title: 'Clearable combo box test',
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                defaults: {
                    width: 300,
                    labelWidth: 125
                },
                items: [
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Label'
                    },
                    {
                        xtype: 'clearablecombobox',
                        fieldLabel: 'Clearable combo',
                        displayField: 'value',
                        store: 'Options',
                        valueField: 'id'
                    }
                ]
            });
    
    
            me.callParent(arguments);
        }
    
    
    });
    Done with Sencha Architect by the way.
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  8. #8
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    443
    Vote Rating
    3
    Jangla is on a distinguished road

      0  

    Default


    Yea, that probably would work and in fact I've arrived at an almost identical solution, but my OP stated that my main reason for posting was that I've a requirement to actually alter the markup of the combo triggers as you could in v3.

    Still, not matter, I think I've come up with a way of doing it without having to resort to updating the trigger tpl; it's just not quite as efficient as before.

    Thanks for the feedback and assistance though guys; no doubt I'll be asking a few more questions in the forums over the coming weeks as I move this very a large platform of ours to the latest ExtJS version.

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi