Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User Kikketer's Avatar
    Join Date
    Apr 2012
    Location
    Wausau, WI
    Posts
    135
    Vote Rating
    7
    Kikketer is on a distinguished road

      0  

    Default [Plugin] - Navigation View with Buttons

    [Plugin] - Navigation View with Buttons


    NOTE: This plugin has been moved to a GitHub repository. Issues and documentation are kept up to date there. You can still post here with any questions, but I'll be checking here less often:

    https://github.com/Kikketer/KikketerSenchaPlugins

    -------------------------------------------------------------------------
    Original Post:
    I apologize if there's a better way to post potential plugins or if there's a better way to make a plugin. I just had assembled something that I think some people may find useful and didn't have time to look into details.

    Use Case: You have a need for a Navigation View, and you push and pop items off this navigation view to leverage the fantastic fading animation that comes with it (and the built in back button). But you have a need to have buttons in the navigation view change per container you push and pop on the stack.

    Current Solution: It seems you would need to add checking logic to the Navigation View itself. Example psudo code:
    Code:
     if (current container  == containerA) then
       show the buttons I know for containerA
    Obviously this gets a little crazy, and we would like the containers to dictate what buttons they want to show and even possibly the events that should fire when those buttons are tapped.

    Plugin Solution: A navigation view that listens for pop and push, then reads the incoming container to see if the special "I have buttons" config exists. Then add the buttons to the nav bar and redirect any tap events back to the originating container so it can direct events accordingly.

    In the end all you need to care about is the following inside your container’s config:
    Code:
        navBarButtons: {
          leftButton: {
            text: 'Clear',
            action: 'clear'
          },
          rightButton: {
            text: 'Search',
            action: 'search'
          }
        },
    The leftButton and rightButton map are exactly what you would use in a standard button. A couple things are defaulted for you, and do not overwrite the itemId of the button (it’s used internally).

    The “action” key is the only addition. This action is a string representation of a function name (think listeners). When the button is tapped, it’ll fire the event to the defined action method.

    Installation:
    To install this plugin, simply extract the contents of the attached zip in your project (or copy paste after you realize what it will do).
    Then simply fix the Ext.define() portion of the files to match your namespace:
    Code:
    Ext.define(‘myProject.view.components.NavView’, { … });
    You can now freely use this component in your project by either extending the component or using it directly. Here’s an example of extending it:
    Code:
    Ext.define('myProject.view.SearchNavView', {
      extend: 'myProject.view.components.NavView',
      xtype: 'searchnavview',
      selector: 'searchnavview',
     
      config: {
        items: [
          {
            xtype: 'searchview',
            itemId: 'searchview'
          }
        ]
      }
    });
    Here's an example of the 'searchview' and how to use the added config:
    Code:
    Ext.define('myProject.view.SearchView', {
    
      extend: 'Ext.form.Panel',
      xtype: 'searchview',
      selector: 'searchview',
    
      config: {
        title: 'Search',
    
        navBarButtons: {
          leftButton: {
            text: 'Clear',
            action: 'clear'
          },
          rightButton: {
            text: 'Search',
            action: 'search'
          }
        },
      },
    
      search: function () {
        // This event is fired from the definition of action: 'search' in the nav bar buttons.
        Ext.Logger.verbose('caught the event');
        // Some view type logic, normally I just fire an event up to the controller
        this.fireEvent('search');
      },
      
      clear: function () {
        // Some clear functionality, this is also triggered because the action: 'clear' is defined in the nav buttons    
      }
    });
    Let me know if you have any questions or suggestions. I’m hoping someday to expand it to accept a whole component instead of just a button. But for now, this served the purpose I needed.
    I hope you find this at least a little useful for your future projects!
    Attached Files
    Last edited by Kikketer; 16 Feb 2014 at 11:12 AM. Reason: Added the zip file

  2. #2
    Sencha User
    Join Date
    Nov 2013
    Posts
    54
    Vote Rating
    2
    MonkeySleeve is on a distinguished road

      0  

    Default


    I'm in the same situation where i want to have dynamic buttons in my navigation view so many thanks for this! I'm gonna check out the code and see if i can use some stuff!

  3. #3
    Sencha User Kikketer's Avatar
    Join Date
    Apr 2012
    Location
    Wausau, WI
    Posts
    135
    Vote Rating
    7
    Kikketer is on a distinguished road

      0  

    Default


    Good to hear that I'm not the only one that sees the need for something like this. Just wanted to let you know that I edited the post to add a more complete example of what the search view would look like using the new config bits.

  4. #4
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,633
    Vote Rating
    115
    fmoseley is a glorious beacon of light fmoseley is a glorious beacon of light fmoseley is a glorious beacon of light fmoseley is a glorious beacon of light fmoseley is a glorious beacon of light fmoseley is a glorious beacon of light

      0  

    Default


    Cool thanks for sharing. I am going to move this over to the Sencha Touch 2.x: Examples and Showcases forums.
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  5. #5
    Sencha User
    Join Date
    Nov 2013
    Posts
    54
    Vote Rating
    2
    MonkeySleeve is on a distinguished road

      0  

    Default


    The downside of this is it isn't really dynamic. Adding the buttons to the navigation view isn't really a problem but removing them can only work if you get the instance of that button and then remove it. Which would mean if you have a lot of views, you would have to get all those instances, check if it's currently in the navigation view bar, and then remove it.Still trying to find a way to make this easier.

  6. #6
    Sencha User Kikketer's Avatar
    Join Date
    Apr 2012
    Location
    Wausau, WI
    Posts
    135
    Vote Rating
    7
    Kikketer is on a distinguished road

      0  

    Default


    Quote Originally Posted by MonkeySleeve View Post
    The downside of this is it isn't really dynamic. Adding the buttons to the navigation view isn't really a problem but removing them can only work if you get the instance of that button and then remove it. Which would mean if you have a lot of views, you would have to get all those instances, check if it's currently in the navigation view bar, and then remove it.Still trying to find a way to make this easier.
    I guess I'm not sure what you mean by having to search through all the instances of the views. Basically when a pop or push occur on the nav view, the "removeNavButton" function runs and removes the right and left button (lots of if checks to see if it exists). Then the "addNavButtons" function is fired that looks at the current view's config to see if it should create new ones.

    Code:
      removeNavButtons: function (navView) {
        // clean up old buttons
        if (navView) {
          var bar = navView.getNavigationBar();
          var rightButton = Ext.ComponentQuery.query("#right_action_button", navView)[0];
          if (rightButton) {
            bar.remove(rightButton, true);
          }
    
    
          var leftButton = Ext.ComponentQuery.query("#left_action_button", navView)[0];
          if (leftButton) {
            bar.remove(leftButton, true);
          }
        }
      },

  7. #7
    Sencha User
    Join Date
    Nov 2013
    Posts
    54
    Vote Rating
    2
    MonkeySleeve is on a distinguished road

      1  

    Default


    Quote Originally Posted by Kikketer View Post
    I guess I'm not sure what you mean by having to search through all the instances of the views. Basically when a pop or push occur on the nav view, the "removeNavButton" function runs and removes the right and left button (lots of if checks to see if it exists). Then the "addNavButtons" function is fired that looks at the current view's config to see if it should create new ones.

    Code:
      removeNavButtons: function (navView) {
        // clean up old buttons
        if (navView) {
          var bar = navView.getNavigationBar();
          var rightButton = Ext.ComponentQuery.query("#right_action_button", navView)[0];
          if (rightButton) {
            bar.remove(rightButton, true);
          }
    
    
          var leftButton = Ext.ComponentQuery.query("#left_action_button", navView)[0];
          if (leftButton) {
            bar.remove(leftButton, true);
          }
        }
      },
    Yeah but this way you check if it has a left or right button according to a static query where you set a ItemId.

    What worked for me was having the views a custom config like yours and whenever the push-event is being fired, check if the view has that custom config. If it does it goes to the setOptionsBar function where it will target my titlebar(i want my buttons on the bottom so i had to add a titlebar into my navigation view). Then i send this menuBar to my clearOptionsBar. This will query all the buttons in it and remove them. After that the new buttons from the custom config are added
    Code:
    onPush: function(me, pushed){            
    var navBarBtns = this.getMenuTitleBar().getActiveItem().config.navigationBarButtons;
            if(navBarBtns){
                this.setOptionsBar(navBarBtns);
            }
        },
        
        setOptionsBar: function(navBarBtns){
            var menuBar = this.getMenuTitleBar().query('titlebar')[0];
            this.clearOptionsBar(menuBar);
            
            for(var i in navBarBtns){
                menuBar.add(navBarBtns[i]);
            }        
        },
        clearOptionsBar: function(menuBar){
            var buttons = menuBar.query('button');
            for(var i in buttons){
                menuBar.remove(buttons[i]);
            }
        },

  8. #8
    Sencha User Kikketer's Avatar
    Join Date
    Apr 2012
    Location
    Wausau, WI
    Posts
    135
    Vote Rating
    7
    Kikketer is on a distinguished road

      0  

    Default


    Very nice! This is exactly what I was hoping to gain by posting this little plugin, cooperative improvement!

    I've only been using Sencha for about 3 months now, and in that time I've found numerous documentation errors and a couple key components missing. With a little user contribution, Sencha could really become the golden ticket for mobile apps!

    I'll roll your suggestions into the zip file as soon as I can, kind of busy right now trying to push this Sencha project to production.

  9. #9
    Sencha User
    Join Date
    Nov 2013
    Posts
    54
    Vote Rating
    2
    MonkeySleeve is on a distinguished road

      0  

    Default


    A downfall i noticed is that when the NavigationView is first initialized, you would want the navigatioBarButtons from the first view that becomes active in the titlebar, but the push event doesn't fire then. So you would have to set those buttons in the NavigationView itself and in that view and create a initialize listener in the NavigationView and then add them. So there's a little bit of double code.. Trying to find a way around this.

  10. #10
    Sencha User Kikketer's Avatar
    Join Date
    Apr 2012
    Location
    Wausau, WI
    Posts
    135
    Vote Rating
    7
    Kikketer is on a distinguished road

      0  

    Default


    Quote Originally Posted by MonkeySleeve View Post
    A downfall i noticed is that when the NavigationView is first initialized, you would want the navigatioBarButtons from the first view that becomes active in the titlebar, but the push event doesn't fire then. So you would have to set those buttons in the NavigationView itself and in that view and create a initialize listener in the NavigationView and then add them. So there's a little bit of double code.. Trying to find a way around this.
    Yeah that was one of the issues we were fighting the whole time. It seems to be working for me, which may not be the best way right now. Look at the NavView file:
    Code:
      initialize: function() {
        this.fireEvent('init', this.items.getAt(0));
        this.callParent();
      }
    Then on the controller we have an 'onInit' function that populates the buttons.
    Code:
      onInit: function (child) {
        this.addNavButtons(child.getParent(), child);
      }
    The one thing that I would like to fix is the fact that you need to include the NavController in app.js If you don't have it listed in the 'controllers' section of the app.js file it will not function correctly.

    I'm in the process of moving this plugin and another one I put together into GitHub. That'll make it easier for everyone to contribute.
    It'll be located here:
    https://github.com/Kikketer/KikketerSenchaPlugins