Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    Boston
    Posts
    141
    Vote Rating
    6
    drb is on a distinguished road

      0  

    Default Ext.Panel showBy fails for NestedList Item

    Ext.Panel showBy fails for NestedList Item


    Touch 2.1.0-rc2

    In Touch 2.0.1.1 one can bring up a modal Ext.Panel using showBy() on a NestedList item. This fails in 2.1.0-rc2.

    Code:
    Ext.setup({
        onReady: function () {
    
            var data = {
                text: 'Groceries',
                items: [{
                    text: 'Sparkling',
                    gp: "S",
                    leaf: true
                }, {
                    text: 'Still',
                    gp: "S",
                    leaf: true
                }, {
                    text: 'Deep',
                    gp: "D",
                    leaf: true
                }, {
                    text: 'Muddy',
                    gp: "M",
                    leaf: true
                }, {
                    text: 'Ale',
                    gp: 'A',
                    leaf: true
                }]
            };
    
            Ext.define('ListItem', {
                extend: 'Ext.data.Model',
                config: {
                    fields: [{
                        name: 'text',
                        type: 'string'
                    }, {
                        name: 'gp',
                        type: 'string'
                    }]
                }
            });
    
            var store = Ext.create('Ext.data.TreeStore', {
                model: 'ListItem',
                defaultRootProperty: 'items',
                root: data
            });
    
            var ver21 = Ext.version.version >= "2.1";
    
            var nestedList = Ext.create('Ext.NestedList', {
                fullscreen: true,
                title: 'Groceries',
                displayField: 'text',
                store: store,
                listeners: {
                    leafitemtap: function (nlist, list, index, listElem, record, e, opts) {
                        console.log("leafitemtap: " + record.get("text"));
                        var target;
                        if (ver21) {
                            target = listElem.element.down(".x-list-item-body"); //  ".x-list-item-inner"
                        } else {
                            target = listElem.down(".x-list-item-label");
                        }
                        var onTop = (target.getPageBox().top > 70);
                        var sp = Ext.create("Ext.Panel", {
                            cls: "b-context-menu " + (onTop ? "b-top" : "b-bottom"),
                            modal: true,
                            hideOnMaskTap: true,
                            items: [
                                {
                                    xtype: "segmentedbutton",
                                    items: [{ text: "A" }, { text: "B" }, { text: "C"}],
                                    listeners: {
                                        toggle: function (ctl, button, isPressed) {
                                            alert(button.getText());
                                            sp.destroy();
                                        }
                                    }
                                }
                            ],
                            listeners: {
                                hide: function () {
                                    sp.destroy();
                                }
                            }
                        });
                        if (onTop) {
                            sp.showBy(target, "bc-tc?"); // bc-tc? comes out 10 px to high. tc-bc? is 10 px to low
                        } else {
                            sp.showBy(target, "tc-bc?"); // bc-tc? comes out 10 px to high. tc-bc? is 10 px to low
                        }
                    }
                }
            });
        }
    });
    To be completely honest, in 2.0.1.1, it generates a warning: [WARN][Ext.Container#setModal] You have specified a modal config on a container that is neither centered nor has any positioning information. Setting to top and left to 0 to compensate. sencha-touch-all-debug.js:26047

    Thanks
    David

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Vote Rating
    850
    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


    I would add centered : true or something and the showBy will change the position. Once I added centered config it worked.
    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
    Sencha User
    Join Date
    Sep 2011
    Location
    Boston
    Posts
    141
    Vote Rating
    6
    drb is on a distinguished road

      0  

    Default


    By adding centered: true to the Ext.Panel config I get the panel to display but it shift the underlying form down and the panel is displayed to the left, but the "tip" is in the center.

    What else am I missing? I tried layout: { type: 'hbox', align: 'middle' } but it did not help.

    And what happened to the border around the Ext.Panel?

    The browser is Chrome Version 23.0.1271.64 m on Windows 7.
    Attached Images
    Last edited by drb; 9 Nov 2012 at 7:33 AM. Reason: typo

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Location
    Boston
    Posts
    141
    Vote Rating
    6
    drb is on a distinguished road

      0  

    Default


    Mitchell, has this been fixed subsequent to 2.1.0-rc2 ?
    Thanks
    David

  5. #5
    Sencha - Support Team
    Join Date
    Mar 2012
    Location
    Lawrence, KS
    Posts
    281
    Vote Rating
    35
    greg.barry has a spectacular aura about greg.barry has a spectacular aura about

      0  

    Default


    A bug has been filed for this issue. The id is TOUCH-3721.

    Thanks!
    Greg