1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    212
    Vote Rating
    3
    bweiler is on a distinguished road

      0  

    Default How do I customize Ext.navigation.View

    How do I customize Ext.navigation.View


    I've made some progress, but I can seem to get all my changes to work properly. Here's what I want to do:

    1) Disable the sliding Title transition on the first pushed view (my menu)

    2) Add a settings button to the first pushed view only and disable any transition animations.

    3) Replace the automatically generated back button and text with a home icon and no back button text on the second pushed view.

    4) Use a standard back button with "Back" or "back" on the third through nth pushed views.

    Thanks,

    Bruce


    1) I'm not sure how to disable the sliding title transition on the first pushed view.

    2) Here's how I added the settings icon to the Ext.navigation.View title bar. I'm just not sure how to disable the animation on the settings icon. Also, configuring the back button in the navigationBar configuration did not work.

    Main View:

    Code:
        config: {
            // True means the back button text will always be 'back'
                //useTitleForBackButtonText: true,
            navigationBar: {
                items: [
    //                {
    //                    backButton: {
    //                        iconCls: 'home',
    //                        iconMask: true,
    //                        ui: 'plain',
    //                    },
    //                },
                    {
                        itemId: 'settingsbutton',
                        iconCls: 'settings',
                        iconMask: true,
                        ui: 'plain',
                        align: 'right',
                    },
                ],
            },
    3) I made some progress on customizing the back button, but I'm still having problems with partial Title text appearing next to the home icon.

    Controller:
    Code:
    init: function() {
    
            var main = this.getMain();
    
            this.appTitle = "Thomas";
    
            //main.getNavigationBar().setDefaultBackButtonText(null);
            main.getNavigationBar().setTitle(this.appTitle);
            main.getNavigationBar().backButton.setIconCls('home');
            main.getNavigationBar().backButton.setIconMask(true);
            main.getNavigationBar().backButton.setUi('plain');
            main.getNavigationBar().backButton.setText('');
            main.getNavigationBar().setDefaultBackButtonText('Home');


    4) I'm not sure how to reset the standard Ext.navigation.View behavior to use a standard back button on the third through nth views.


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


    To change the animation, it's in the layout config:

    Code:
            layout: {
                type: 'card',
                animation: {
                    duration: 300,
                    easing: 'ease-in-out',
                    type: 'slide',
                    direction: 'left'
                }
            }
    This will affect all transitions.

    About the buttons, it sounds like you shouldn't really use Ext.navigation.View. It sounds like you should bake your own version extending Ext.Container and doing your own logic.
    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
    Apr 2011
    Posts
    212
    Vote Rating
    3
    bweiler is on a distinguished road

      0  

    Default The navigation view is a nice addition to ST 2.0.

    The navigation view is a nice addition to ST 2.0.


    I really like the navigation view and it's perfect for my application. I just need to override a few features. I saw some hooks to accomplish this, but they don't seem to work as expected.

    defaultBackButtonText

    useTitleForBackButtonText

    I thought I could set the useTitleForBackButtonText to false and defaultBackButtonText to null, but that didn't seem to work.

    Any thoughts before I give up and try to recreate a custom navigation view with 80% of the current navigation view features?

    Thanks,

    Bruce

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    46
    Vote Rating
    0
    jsweere is on a distinguished road

      0  

    Default possible reason, and another issue

    possible reason, and another issue


    Your problem might be that in order to use the useTitleForBackButtonText function in defaulted as false, if you are wanting to set the default text and use it throughout the app you would need to set the useTitleForBackButtonText to true.

    Whenever I tried this however, the backbutton started getting screwy and popping up in random places and even in the header of the main view. A solution to that issue would be greatly appreciated.

  5. #5
    Sencha User
    Join Date
    Apr 2011
    Posts
    212
    Vote Rating
    3
    bweiler is on a distinguished road

      0  

    Default


    I'm running into the same problems with the back button showing up multiple times on a toolbar. I did make some progress setting the back button options dynamically using the following:

    main.getNavigationBar().setUseTitleForBackButtonText(true);
    main.getNavigationBar().setDefaultBackButtonText("Home");

    When I tried to set these options in the config section of the Ext.navigation.View class, Sench threw errors.

    At this point, I'm ready to give up on navigation view. It is a great concept, but not customizable enough for what I need.

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    32
    Vote Rating
    0
    dotBomb is on a distinguished road

      0  

    Default


    I too experienced the random display of back buttons in the header of the Ext.navigation.View control. This type of anomaly seems to be occurring randomly and cannot be controlled or worked-around by the sencha framework consumer (developers like us). I also agree that the Ext.navigation.View class is buggy right now, and certainly not production-worthy. That said it has also seemed to have taken a step back in touch-2-b1. The example for this feature doesn't even run in chrome.

    My code to reproduce for reference:

    Code:
    /**
     * There are two main parts of this example:
     *
     * **Ext.navigation.View**
     * This component is simply a container with a layout, which handles pushing and popping items/views
     * at any time. It will automatically animate between those views, including the back button (if it is
     * visibly) and a user defined title (if defined in your item).
     * 
     * **Ext.ActionSheet**
     * This is simply used to show off some additional functionality of the navigation view component.
     */
    Ext.setup({
        requires: [
            'Ext.navigation.View',
            'Ext.ActionSheet',
            'Ext.SegmentedButton',
            'Ext.Button',
            'Ext.Toolbar'
        ],
        onReady: function () {
    
    
    
    
            Ext.Viewport.addListener('orientationchange',
                function (theViewport, newOrientation, orientationWidth, orientationHeight, eOpts) {
    
    
                    // prep the notification message
                    //
                    var notificationMessage = "New orientation is: " + theViewport.getOrientation() + ", width: " + orientationWidth + ", height: " + orientationHeight + ".";
    
    
                    // show the new orientation 
                    //
                    Ext.Msg.alert('Change Notification', notificationMessage, Ext.emptyFn);
    
    
                    // try to manually set the width and height ...
                    //
                    // theViewport.setWidth(orientationWidth);
                    // theViewport.setHeight((orientationHeight + 5));
    
    
                    // perhaps resetting the fullscreen value will make it fit right ...
                    //
                    theViewport.setConfig('fullscreen', true);
    
    
                    // repaint the entire application.  I can trace unresponsiveness
                    // of the UI to this single call.  
                    //
                    // Ext.repaint();
                });
    
    
            /**
            * Helpers
            */
            function doesRequestedViewExist(itemIdToCheck) {
                var returnFlag = false;
                var currentViewActiveItem = view.getActiveItem();
                var allItems = view.getItems();
    
    
                if (currentViewActiveItem.getItemId() != itemIdToCheck) {
                    var itemNumber = 1;
                    var allItemsCount = allItems.length;
    
    
                    console.log("There are currently " + allItemsCount + " in the stack.");
    
    
                    while (itemNumber < (allItemsCount - 1)) {
                        var tmpViewItem = allItems.items[itemNumber];
    
    
                        console.log("Item ID is: " + tmpViewItem.getItemId());
    
    
                        if (tmpViewItem.getItemId() == itemIdToCheck) {
    
    
                            try {
                                console.log("Setting active item on view ...");
                                view.setActiveItem(tmpViewItem);
                                console.log("Active item on view set!");
                            }
                            catch (setActiveItemErr) {
                                console.log(setActiveItemErr.message);
                            }
    
    
                            returnFlag = true;
    
    
                            break;
                        }
    
    
                        ++itemNumber;
                    }
    
    
                    if (!returnFlag) {
                        console.log("User selection not found in view items array.");
                    }
                }
                else {
                    console.log("This particular selection is already shown.");
                    returnFlag = true;
                }
    
    
                return returnFlag;
            }
    
    
            /**
            * Stage the overlay
            */
            var overlay = Ext.create('Ext.Panel', {
                floating: true,
                modal: true,
                hidden: true,
                height: 300,
                width: '50%',
                contentEl: 'content',
                styleHtmlContent: true,
                scrollable: true,
                items: [{
                    docked: 'top',
                    xtype: 'toolbar',
                    title: 'Overlay Title'
                }]
            });
    
    
            /**
            * Stage the navigation.View items
            */
            var childContainer1 = Ext.create('Ext.Container', {
                title: 'Chronicle',
                itemId: 'item_chronicle',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
    
    
                padding: '0 1 1 1',
    
    
                items: [
                            {
                                xtype: 'panel',
                                html: '<center><div style="padding: 0.4em; width: 100%; font-size: .90em; text-align: center;">Chronicle keeps track of your time so you don\'t have to waste it remembering what you did.</div></center>'
                            },
                            {
                                flex: 1.5,
                                xtype: 'carousel',
                                direction: 'horizontal',
                                directionLock: true,
                                items: [
                                {
                                    xtype: 'image',
                                    cls: 'my-carousel-item-img',
                                    src: 'images/testApp.jpg'
                                },
                                {
                                    xtype: 'image',
                                    cls: 'my-carousel-item-img',
                                    src: 'images/testApp2.jpg'
                                },
                                {
                                    xtype: 'image',
                                    cls: 'my-carousel-item-img',
                                    src: 'images/testApp3.jpg'
                                }
                            ],
                                itemConfig: {
                                    cls: 'my-carousel-item'
                                }
                            }
                ]
            });
    
    
            var childContainer2 = Ext.create('Ext.Container', {
                title: 'Paper Trail Designs',
                itemId: 'item_paper_trail',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
    
    
                padding: '0 1 1 1',
    
    
                items: [
                            {
                                xtype: 'panel',
                                html: '<center><div style="padding: 0.4em; width: 100%; font-size: 0.90em; text-align: center;">Pixel perfect graphics in contemporary design by Paper Trail Designs.</div></center>'
                            },
                            {
                                flex: 1.5,
                                xtype: 'carousel',
                                direction: 'horizontal',
                                directionLock: true,
                                items: [
                                    {
                                        xtype: 'image',
                                        cls: 'my-carousel-item-img',
                                        src: 'images/testApp2.jpg'
                                    },
                                    {
                                        xtype: 'image',
                                        cls: 'my-carousel-item-img',
                                        src: 'images/testApp3.jpg'
                                    },
                                    {
                                        xtype: 'image',
                                        cls: 'my-carousel-item-img',
                                        src: 'images/testApp.jpg'
                                    }
                                ],
                                itemConfig: {
                                    cls: 'my-carousel-item'
                                }
                            }
                    ]
            });
    
    
            var childContainer3 = Ext.create('Ext.Container', {
                title: 'ReportVIEW',
                itemId: 'item_reportview',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
    
    
                padding: '0 1 1 1',
    
    
                items: [
                            {
                                xtype: 'panel',
                                html: '<center><div style="padding: 0.4em; width: 100%; font-size: .90em; text-align: center;">Function - rich reporting in a stylized view.</div></center>'
                            },
                            {
                                flex: 1.5,
                                xtype: 'carousel',
                                direction: 'horizontal',
                                directionLock: true,
                                items: [
                            {
                                xtype: 'image',
                                cls: 'my-carousel-item-img',
                                src: 'images/testApp3.jpg'
                            },
                            {
                                xtype: 'image',
                                cls: 'my-carousel-item-img',
                                src: 'images/testApp.jpg'
                            },
                            {
                                xtype: 'image',
                                cls: 'my-carousel-item-img',
                                src: 'images/testApp2.jpg'
                            }
                        ],
                                itemConfig: {
                                    cls: 'my-carousel-item'
                                }
                            }
                    ]
            });
    
    
            /**
            * Create an instance of Ext.navigation.View, which is fullscreen so it is inserted into Ext.Viewport
            */
            var view = Ext.create('Ext.navigation.View', {
                fullscreen: true,
                useTitleForBackButtonText: true,
                items: [
                //bottom toolbar containing the settings button
                    {
                    docked: 'bottom',
                    xtype: 'toolbar',
                    ui: 'light',
                    items: [
                            { xtype: 'spacer' },
                            {
                                iconMask: true,
                                iconCls: 'settings',
                                handler: function () {
                                    //show the option sheet
                                    optionsSheet.showBy(this);
                                }
                            },
                            {
                                iconMask: true,
                                iconCls: 'info',
                                handler: function () {
                                    overlay.showBy(this);
                                }
                            }
                        ]
                },
                    childContainer1
                ]
            });
    
    
            /**
            * A ActionSheet which is used to display various options for the Navigation View
            */
            var optionsSheet = Ext.create('Ext.ActionSheet', {
                items: [
                    {
                        xtype: 'button',
                        text: 'Chronicle',
                        iconMask: true,
                        iconCls: 'action',
                        handler: function () {
                            if (!doesRequestedViewExist('item_chronicle')) {
                                console.log("Pushing selected item with carousel ...")
                                //use the push method of the navigation view to create a new view
                                view.push(childContainer1); // end view.push()
                            }
    
    
                            //hide the sheet
                            optionsSheet.hide();
                        }
                    },
                    {
                        xtype: 'button',
                        text: 'Paper Trail Designs',
                        iconMask: true,
                        iconCls: 'action',
                        handler: function () {
                            if (!doesRequestedViewExist('item_paper_trail')) {
                                console.log("Pushing selected item with carousel ...")
                                //use the push method of the navigation view to create a new view
                                view.push(childContainer2); // end view.push()
                            }
    
    
                            //hide the sheet
                            optionsSheet.hide();
                        }
                    },
                    {
                        xtype: 'button',
                        text: 'ReportVIEW',
                        iconMask: true,
                        iconCls: 'action',
                        itemId: 'reportviewbuttontext',
                        handler: function () {
                            if (!doesRequestedViewExist('item_reportview')) {
                                console.log("Pushing selected item with carousel ...")
                                //use the push method of the navigation view to create a new view
                                view.push(childContainer3); // end view.push()
                            }
    
    
                            //hide the sheet
                            optionsSheet.hide();
                        }
                    },
                    {
                        xtype: 'button',
                        iconMask: true,
                        iconCls: 'user',
                        text: 'Contact',
                        handler: function () {
                            //hide the sheet
                            optionsSheet.hide();
                        }
                    },
                    {
                        text: 'Cancel',
                        ui: 'decline',
                        iconMask: true,
                        iconCls: 'delete',
                        handler: function () {
                            //hide the sheet
                            optionsSheet.hide();
                        }
                    }
                ]
            });
        }
    });
    Dan