1. #61
    Sencha User
    Join Date
    May 2010
    Posts
    32
    Vote Rating
    0
    bnerd is on a distinguished road

      0  

    Default


    Hi wnielson,

    Ran into another not-so-major issue.

    When using a view that is a navigation view. I don't see to have a way to select the slideButton selector. Normally this is toolbar or titlebar. None of those work with the navigation view. So I tried navigationbar, navigationBar, and navigation-bar. None of those worked.

    Do you know how we can include the slide button onto a navigation view?

  2. #62
    Sencha User
    Join Date
    Nov 2010
    Posts
    387
    Vote Rating
    4
    gkatz is on a distinguished road

      0  

    Default


    Hi;
    the github rep readme file states this component was tested with android 4.0.3. was it on a real devices? or the emulator?
    if on a real device, did you experience the behavior I showed in the video I posted not to long ago about the strange re-adjusting of the sliding window in close/open actions?
    thanks

  3. #63
    Sencha User
    Join Date
    Jan 2012
    Posts
    62
    Vote Rating
    5
    s.t.a.s is on a distinguished road

      0  

    Default Listeners

    Listeners


    Guys, how to detect selection of the items in this view? I added two items and views for each item. I have a function for refreshing data in views. But I can't figure out how detect tap on items, 'cause this component, as I see, hasn't listeners. How to do it?

    Here is my code:
    Code:
    Ext.define("MyApp.view.MyPanel", {    extend: 'Ext.ux.slidenavigation.View',
    
    
        requires: [
            'Ext.Container',
            'Ext.MessageBox',
            'Ext.Panel',
            'Ext.Toolbar',
            'Ext.event.publisher.Dom'
        ],
    
    
        config: {
            fullscreen: true,
            slideSelector: 'x-toolbar',
            selectSlideDuration: 200,
            list: {
                maxDrag: 400,
                width: 200,
                items: [{
                    xtype: 'toolbar',
                    docked: 'top',
                    ui: 'light',
                    title: {
                        title: '',
                        centered: false,
                        width: 200,
                        left: 0
                    }
                }]
    
    
            },
    
    
            groups: {
                'Customers': 1,
                'Options': 2
            },
    
    
            defaults: {
                style: 'background: #fff',
                xtype: 'container'
            },
            items:
            [
                {
                    title: 'Customers',
                    group: 'Customers',
                    slideButton: {
                        selector: 'toolbar'
                    },
                    items: [
                        {
                            xtype: 'toolbar',
                            title: 'Customers',
                            docked: 'top'
                        },
                        AccountList
                    ]
                },
                {
                    title: 'Contacts',
                    group: 'Customers',
                    slideButton: {
                        selector: 'toolbar'
                    },
                    items: [
                        {
                            xtype: 'toolbar',
                            title: 'Contacts',
                            docked: 'top'
                        },
                        ContactList
                    ]
                },
                {
                    title: 'Options',
                    group: 'Options',
                    slideButton: {
                        selector: 'toolbar'
                    },
                    items: [
                        {
                            xtype: 'toolbar',
                            title: 'Options',
                            docked: 'top'
                        }, {
                            styleHtmlContent: true,
                            xtype: 'panel',
                            layout: 'card',
                            html: '<p>In Work</p>'
                        }
                    ]
                }
            ]
        }
    });

  4. #64
    Sencha User
    Join Date
    Jan 2012
    Posts
    62
    Vote Rating
    5
    s.t.a.s is on a distinguished road

      0  

    Default


    I've found a solution.
    1. In config of my slidenavigation.View I defined my own select-method:
    Code:
    selectListener: this.onSelect
    where this.onSelect is my function of update data in lists.
    2. In method "onSelect" in View.js (of slidenavigation.View) I added following code:
    Code:
    if (Ext.isFunction(this.config.selectListener)) {
    	this.config.selectListener(item);
    }
    Hope, it will help somebody.

  5. #65
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Vote Rating
    13
    wnielson will become famous soon enough

      0  

    Default


    Quote Originally Posted by gkatz View Post
    Hi;
    the github rep readme file states this component was tested with android 4.0.3. was it on a real devices? or the emulator?
    if on a real device, did you experience the behavior I showed in the video I posted not to long ago about the strange re-adjusting of the sliding window in close/open actions?
    thanks
    I don't have a real Android device to test on, so I could only use the emulator, and no, I didn't observe the weird behavior in the video. Unless I get a real Android device to test on, I'm afraid I won't be of much help here...

    Perhaps you can do some debugging? Weinre makes it very easy (http://phonegap.github.com/weinre/). Send me a PM if you want some tips on getting started. I'd love to get Android working properly.

  6. #66
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Vote Rating
    13
    wnielson will become famous soon enough

      0  

    Default


    Quote Originally Posted by s.t.a.s View Post
    I've found a solution.
    1. In config of my slidenavigation.View I defined my own select-method:
    Code:
    selectListener: this.onSelect
    where this.onSelect is my function of update data in lists.
    2. In method "onSelect" in View.js (of slidenavigation.View) I added following code:
    Code:
    if (Ext.isFunction(this.config.selectListener)) {
    	this.config.selectListener(item);
    }
    Hope, it will help somebody.
    I haven't added an event for the item select, mainly because you can do it like this:


    Code:
    Ext.define('MyNavigation, {
        extends: 'Ext.ux.slidenavigation.View',
        config: {
            list: {
                width: 250,
                maxDrag: null,
                itemTpl: '{title}',
                grouped: true,
                items: [{
                    xtype: 'toolbar',
                    docked: 'top',
                    ui: 'light'
                }],
                // Define a custom listener
                listeners: {
                    select: function(list, item) {
                        Ext.Msg.alert('Select', 'You selected an item');
                    }
                }
            },
            //  ... more config here...
        }
    });
    Perhaps I'll add a custom event to the navigation View itself, so that you don't have to overload the list config.

  7. #67
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Vote Rating
    13
    wnielson will become famous soon enough

      0  

    Default


    Quote Originally Posted by bnerd View Post
    Hi wnielson,

    Ran into another not-so-major issue.

    When using a view that is a navigation view. I don't see to have a way to select the slideButton selector. Normally this is toolbar or titlebar. None of those work with the navigation view. So I tried navigationbar, navigationBar, and navigation-bar. None of those worked.

    Do you know how we can include the slide button onto a navigation view?
    Yup, this is possible, you just have to get a bit tricky. Lets say you've defined your slideButton like so:

    Code:
        slideButton: {
            selector: '[name="slidetoolbar"]',
              iconCls: 'list'
            },
    Then, in your navigationview you need to overload the NavigationBar config:

    Code:
    Ext.define('MyNavigationview', {
        extends: 'Ext.navigation.View',
        config: {
            navigationBar: {
                docked: 'top',
                name: 'slidetoolbar',
                items: [{
                    xtype: 'button',
                    ui: 'back',
                    hidden: true
                }]
            },
            // ... other config items here ...
        }
    })

  8. #68
    Ext GWT Premium Member
    Join Date
    Jan 2010
    Posts
    74
    Vote Rating
    0
    bobpardoe is on a distinguished road

      0  

    Default Cannot see navigation text when running on a pc

    Cannot see navigation text when running on a pc


    I am running the code downloaded from GitHub with v2.0.0 of Touch. Your demo works fine in the same Google browser. Running on Ubuntu.

    I have taken your main.js as my class and I can display it fine and it works fine but no text ...

    I can see the text in the html, for both the groups and the items, but nothing shows on screen. The click events all work too. No errors in the debug console.

    I don't have a device to test on.

    Any ideas ?

    Thanks

    BOb

  9. #69
    Sencha User
    Join Date
    Feb 2012
    Posts
    29
    Vote Rating
    0
    FBlack is on a distinguished road

      0  

    Default


    Hi,
    I want to change the List for a Panel with buttons and Slide from up to bottom. How I can to do this?

  10. #70
    Sencha User
    Join Date
    May 2010
    Posts
    32
    Vote Rating
    0
    bnerd is on a distinguished road

      0  

    Default


    so wnielson

    I'm loving this component. I have a question.. Can i listen for when the sliding view finishes it's animation and then find out if it is open or closed?

    I want the menu to behave just like facebook so that if the user is navigating in a view and swipes the menu open... I can change the back button to a slide button... and then when the menu closes I can change the slide button back to a back button.

    Hope that makes sense lol.