Results 1 to 5 of 5

Thread: Ext.Panel showBy fails for NestedList Item

Hybrid View

Previous Post Previous Post   Next Post Next Post
    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
    149
    Vote Rating
    7
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,411
    Vote Rating
    1290
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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
    149
    Vote Rating
    7
      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 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
    149
    Vote Rating
    7
      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
    400
    Vote Rating
    77
      0  

    Default

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

    Thanks!
    Greg

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
  •