1. #1
    Sencha Premium Member
    Join Date
    Aug 2011
    Location
    India
    Posts
    36
    Answers
    1
    Vote Rating
    4
    vasanth.kvj is on a distinguished road

      0  

    Question Unanswered: Bookmarking and History in extjs ?

    Unanswered: Bookmarking and History in extjs ?


    Can any one tel me how to implement handling mechanism for History in extjs?

    I'm able to add history using hidden history form and the method - Ext.util.History.add(id). My page contains panels,tree and grids. Suppose if I'm maintaining history for an node, i want the details of tree, panel and the viewport it belongs to. ( currently I'm doing this manually by adding delimiters ) so that when user clicks back\forward browser buttons i can render the elements.

    Is there any way to maintain the state of all elements at one shot inside history stack? My application is growing bigger. i cant maintain history by manually adding Ext.util.History.add(id + delimiter + other id's) for all actions.

    Need some direction to implement bookmarking in extjs.. Thanks in Advance !

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3356
    Vote Rating
    751
    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 don't believe that restoring an app based on the hash is working right now. Using the history example it's not working.
    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
    Jan 2013
    Posts
    10
    Vote Rating
    0
    isuvaish is on a distinguished road

      0  

    Default


    I need some help with the same. I'm using hash, clearly I can't restore the app back when I use its " id + delimiter + other id's" URL to navigate to the page directly.

    Please help !

    Code:
    var tabPanel=new Ext.TabPanel({
    // Configured for use in Viewport as needed
    width:1000, height:700, activeTab:0, layout:'fit', region:'north', renderTo:Ext.getBody(), listeners:{ tabchange:function(tabPanel,currTab){ window.location.hash='#'+currTab.itemId; } }, items:[
    //included tabs
    ] }); var token=window.location.hash.substr(1); if (token){ var tab=tabPanel.getActiveTab(token); if (!tab){ tab=new Ext.Panel({ itemId:token, title:'tab:'+token }); tabPanel.add(tab); } tabPanel.setActiveTab(tab); }
    The tab id gets appended to the page url. When I try using the url (Copy/paste) to reload the tab again, it goes back to my first tab. (url changes).

    Am I going wrong somewhere ? Or am I missing something here ?
    Last edited by isuvaish; 5 Mar 2013 at 2:00 AM. Reason: Including code snippet

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2011
    Location
    India
    Posts
    36
    Answers
    1
    Vote Rating
    4
    vasanth.kvj is on a distinguished road

      0  

    Default Can you post your sample code?

    Can you post your sample code?


    It would be helpful to understand the requirement if we have sample code and expected behavior. Please post your code.

  5. #5
    Sencha User
    Join Date
    Jan 2013
    Posts
    10
    Vote Rating
    0
    isuvaish is on a distinguished road

      0  

    Default


    Hope the snippet helps . Am I missing something ?

  6. #6
    Sencha Premium Member
    Join Date
    Aug 2011
    Location
    India
    Posts
    36
    Answers
    1
    Vote Rating
    4
    vasanth.kvj is on a distinguished road

      0  

    Default For Page refresh or opening in new browser tab.

    For Page refresh or opening in new browser tab.


    Code:
    assume your url is like < yourapp > /index.html#myTabs/1
    
    var currentTab = 0,
        myUrl = window.location.href.split('#');
    
    if (myUrl && myUrl[1] && myUrl[0] == 'myTabs') {
        currentTab = myUrl[1];
    }
    
    var tabPanel = new Ext.TabPanel({
        // Configured for use in Viewport as needed
        width: 1000,
        height: 700,
        activeTab: currentTab,
        layout: 'fit',
        region: 'north',
        renderTo: Ext.getBody(),
        listeners: {
            tabchange: function (tabPanel, currTab) {
                window.location.hash = '#myTabs/' + currTab.position;
            }
        },
        items: [//included tabs with custom attribute/config (position)]
    });

  7. #7
    Sencha Premium Member
    Join Date
    Aug 2011
    Location
    India
    Posts
    36
    Answers
    1
    Vote Rating
    4
    vasanth.kvj is on a distinguished road

      0  

    Default


    also using window.location.hash in IE might reload the page.

    In your case for each tab change page reloads.

    Instead we can use Ext.util.History

    (http: //docs.sencha.com/ext-js/4-1/#!/api/Ext.util.History)

  8. #8
    Sencha User
    Join Date
    Jan 2013
    Posts
    10
    Vote Rating
    0
    isuvaish is on a distinguished road

      0  

    Default


    I don't quite understand the purpose of the changes you've added. Could you elaborate?

    My requirement is that when I change my tab (using tabchange method) , and copy/paste the URL in another browser tab, the activeTab should be the tab id that follows the hash.

    Quote Originally Posted by vasanth.kvj View Post
    Code:
    <br>
    assume your url is like < yourapp > /index.html#myTabs/1<br>
    <br>
    var currentTab = 0,<br>
    &nbsp;&nbsp; &nbsp;myUrl = window.location.href.split('#');<br>
    <br>
    if (myUrl && myUrl[1] && myUrl[0] == 'myTabs') {<br>
    &nbsp;&nbsp; &nbsp;currentTab = myUrl[1];<br>
    }<br>
    <br>
    var tabPanel = new Ext.TabPanel({<br>
    &nbsp;&nbsp; &nbsp;// Configured for use in Viewport as needed<br>
    &nbsp;&nbsp; &nbsp;width: 1000,<br>
    &nbsp;&nbsp; &nbsp;height: 700,<br>
    &nbsp;&nbsp; &nbsp;activeTab: currentTab,<br>
    &nbsp;&nbsp; &nbsp;layout: 'fit',<br>
    &nbsp;&nbsp; &nbsp;region: 'north',<br>
    &nbsp;&nbsp; &nbsp;renderTo: Ext.getBody(),<br>
    &nbsp;&nbsp; &nbsp;listeners: {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;tabchange: function (tabPanel, currTab) {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;window.location.hash = '#myTabs/' + currTab.position;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;}<br>
    &nbsp;&nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp;items: [//included tabs with custom attribute/config (position)]<br>
    });<br>

  9. #9
    Sencha Premium Member
    Join Date
    Aug 2011
    Location
    India
    Posts
    36
    Answers
    1
    Vote Rating
    4
    vasanth.kvj is on a distinguished road

      0  

    Default


    By Default your active Tab is 0.

    Whenever the page loads, before rendering your Tab panel, from the url you can get the tab which needs to be the active tab.

    Code:
     
    var currentTab = 0,
        myUrl = window.location.href.split('#');
     
    if (myUrl && myUrl[1] && myUrl[0] == 'myTabs') {
        currentTab = myUrl[1];
    Now map the “currentTab” to your tab panel

    Code:
    var tabPanel = new Ext.TabPanel({
        // Configured for use in Viewport as needed
        width: 1000,
        height: 700,
        activeTab: currentTab,
        layout: 'fit',
    In app we may have more components, pages etc.. Its good to have an identifier i.e. "myTabs" in the below url, here 1 is your active tab
    Code:
    < yourapp > /index.html#myTabs/1
    You might also have url's for other pages as,
    Code:
    < yourapp > /index.html#myGrid/user/editmode
    < yourapp > /index.html#myGrid/user/readonly
    This will help to map the events, loading the components when refresh/ copy-paste in new tab happens. Depending on id's might be complex. Having myTabs, myGrids as additional token along with id's makes simple to understand.

    Sample : http://jsfiddle.net/QQz5X/43/

  10. #10
    Sencha User
    Join Date
    Jan 2013
    Posts
    10
    Vote Rating
    0
    isuvaish is on a distinguished road

      0  

    Default


    Still having trouble, the active tab goes back to the first tab (Which was set as default).

    Please help. Thanks !

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar