Results 1 to 3 of 3

Thread: [Classic] ItemSelector UX issue with direct data binding

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jan 2016
    Location
    Brazil
    Posts
    139

    Default [Classic] ItemSelector UX issue with direct data binding

    This issue has been there since ExtJS 5.1 and never been fixed. Although the exception it used to throw is now suppressed, still it does not fill the ItemSelector with the entries.

    Although this happens on ExtJS 6.5.3, a fiddle for 6.5.2 only is possible, as Sencha fiddle for Ext JS 6.5.3 has no packages we can point at all.



    Notice the two first buttons build an empty ItemSelector. The third one (array-bound) builds it correctly.
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451

    Default

    So the issue I see is the way the ItemSelector creates the child MultiSelect items in regards when you give the ItemSelector an array. Any store that is created from an array, Ext.data.StoreManager sets the expanded property to true. This is used by MultiSelect to set the displayField property to field2 if this expanded property on the store is falsy, else leaves displayField to be field1. Here is the code in MultiSelect that sets the displayField for context:


    Code:
        resolveDisplayField: function() {
            var me = this,
                boundList = me.boundList,
                store = me.getStore();
     
            me.valueField = me.displayField = 'field1';
     
            if (!store.expanded) {
                me.displayField = 'field2';
            }
     
            if (boundList) {
                boundList.setDisplayField(me.displayField);
            }
        }
    Notice the store.expanded conditional, if it's falsy this is where the displayField is set to field

    So why does this matter? When the child MultiSelect items are created, it's created using a config object and therefor does not get this expanded property set to true. This means the MultiSelect items get their displayField property set to field2 which is incorrect.

    A quick override that fixes your fiddle for me is:

    Code:
    Ext.define(null, {
        override: 'Ext.ux.form.ItemSelector',
    
        onBindStore: function(store, initial) {
            var me = this,
                fromField = me.fromField,
                toField = me.toField;
     
            if (fromField) {
                fromField.store.removeAll();
                toField.store.removeAll();
                
                // possible fix here:
                if (store.expanded) {
                    fromField.store.expanded = toField.store.expanded = true
                }
     
                if (store.autoCreated) {
                    fromField.resolveDisplayField();
                    toField.resolveDisplayField();
                    me.resolveDisplayField();
                }
     
                if (!Ext.isDefined(me.valueField)) {
                    me.valueField = me.displayField;
                }
     
                // Add everything to the from field as soon as the Store is loaded 
                if (store.getCount()) {
                    me.populateFromStore(store);
                } else {
                    me.store.on('load', me.populateFromStore, me);
                }
            }
        }
    })
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jan 2016
    Location
    Brazil
    Posts
    139

    Default

    Hello, and wow @mitchellsimoens!

    That was a premium-grade quality reply I would only expect to see from one who loves what they do and know what they're talking about! Well, couldn't expect less from you, I guess!

    Thanks for the override, it works copy-pasting into the fiddle, resulting in:

    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

Similar Threads

  1. [FIXED] ItemSelector with direct store data throws exception
    By agarberi in forum Ext 5: Bugs
    Replies: 5
    Last Post: 23 Jun 2017, 10:30 AM
  2. Replies: 1
    Last Post: 1 Aug 2014, 2:39 PM
  3. Replies: 1
    Last Post: 20 Apr 2012, 8:33 AM
  4. Data binding issue: Cannot load data into editor grid
    By Tumac in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 10 Feb 2010, 9:25 AM

Tags for this Thread

Posting Permissions

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