1. #1
    Sencha User
    Join Date
    Mar 2007
    Location
    Austria
    Posts
    118
    Vote Rating
    1
    Carina is on a distinguished road

      0  

    Default Vertical tabs for TabPanel

    Vertical tabs for TabPanel


    hi,

    I couldn't find a thread that described how to make a resizeable TabPanel with vertical tabs in Ext 2.0 so I wrote a small user extension. Please see the attached screenshots for example results. Some documentation and a demo can be found here.

    In order to use this extension, you need to include the js file that contains the code of the extension (of course.. ) and also an additional css file. They are both included in the attached zip file.

    Usage example:
    PHP Code:
      var tabpanel1 = new Ext.ux.VerticalTabPanel({
        
    activeTab0,
        
    tabPosition:'left',  //choose 'left' or 'right' for vertical tabs; 'top' or 'bottom' for horizontal tabs
        
    textAlign:'right',
        
    renderTo:'tabs',//id of an existing DOM element
        
    width:500,
        
    height:200,
        
    tabWidth:100,
        
    defaults:{autoScrolltrue},
        
    items:[{
          
    title'By category',
          
    html"Show content by category... "
        
    },{
          
    title'Folder',
          
    html"Show folder content... "
        
    }    ]  }); 
    Last update: 04-04-2009 => added some additional bugfixes, screenshots and link to demo
    Attached Images
    Attached Files

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Austria
    Posts
    118
    Vote Rating
    1
    Carina is on a distinguished road

      0  

    Default


    I just received a PM in which someone requested a little help about this one. I thought it's better to post it here for future reference.

    The js code in my first post is now updated, some bugs are fixed (before, this only worked in my application which always triggers a resize event after creating the TabPanel) and I added a small example.

  3. #3
    Ext User
    Join Date
    Dec 2007
    Posts
    23
    Vote Rating
    0
    rrenfro is on a distinguished road

      0  

    Default Tabs not rendering correctly

    Tabs not rendering correctly


    Hi Carina,

    I just tried out your vertical tab extension with the above example code... The tabs do not render correctly. I have attached a screenshot. Hope it helps.

    extjs 2.0.1
    Firefox/2.0.0.12 Mac
    Firebux does not display any errors
    Attached Images
    Last edited by rrenfro; 19 Feb 2008 at 11:42 AM. Reason: Added screenshot

  4. #4
    franckxx
    Guest

    Default


    Incredible....

    It's little buggy....but it's real nice idea !!

    It can be Very Usefull -------> Impatient to see next release !!

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Location
    Austria
    Posts
    118
    Vote Rating
    1
    Carina is on a distinguished road

      0  

    Default


    hi,

    @rrenfro
    that's exactly what the panel looks like when the CSS is missing, maybe you tried the code without adding the CSS? I will update my first post and add a remark that the CSS is absolutely necessary to make this work properly (that's why this extension doesn't need much JS code - the main work is done via CSS).

    I'm working with Firefox on Win and Mac myself so at least those two should be a little tested

    @franckxx
    thanks
    What other bugs are you referring to for example? (except for the styling - I should remove some unecessary borders.. )

  6. #6
    Ext User
    Join Date
    Feb 2008
    Posts
    13
    Vote Rating
    0
    kairinsama is on a distinguished road

      0  

    Default Slight Alteration

    Slight Alteration


    This allows the tabs to align the text to the right. Without the 100% on the ul element, it causes the list items to expand to the width of the next parent.

    Tested in FF2 and Safari3.

    PHP Code:
    .verticalTabs ul.x-tab-strip width100%; }
    .
    verticalTabs ul.x-tab-strip li {
      
    clearboth;
      
    margin0;
      
    text-alignright;
      
    width100%;


  7. #7
    Ext User
    Join Date
    Oct 2007
    Posts
    2
    Vote Rating
    -1
    Gemini.H is an unknown quantity at this point

      0  

    Default bug is not fixed

    bug is not fixed


    hi,about the bug of triggers a resize event is not fixed,I checked it in IE7,and the tab strip's text is become more small,So I think this bug is not complete fixed.anothe question is why does I can't resize the tab strip?Thank you!

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Location
    Austria
    Posts
    118
    Vote Rating
    1
    Carina is on a distinguished road

      0  

    Default


    kairinsama,
    thanks! I included your css and made it a config option (textAlign 'left' or 'right')

    Gemini.H,
    what exactly do you mean regarding IE7? When I try the example in IE7, it looks like this (see attachment). What is your setup, how did you use the TabPanel?
    You can set the tab width using the tabWidth config option.
    Attached Images

  9. #9
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Thumbs up


    Nice job Carina.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  10. #10
    Ext User
    Join Date
    Oct 2007
    Posts
    2
    Vote Rating
    -1
    Gemini.H is an unknown quantity at this point

      -1  

    Default vertical tab menu question

    vertical tab menu question


    hi carina,

    I use the vertical tab following:
    Code:
    			var techniqueBatimentItem = new Ext.ux.TabPanel({ 
    				verticalTabs:true,
    				border: false,
    				activeTab: 0,
    				autoScroll: false,
    				resizeTabs: true,
    				autoWidth: false,
    				defaults:{autoScroll: true},
    				tabStripWidth:40,
    				items: [
    					{
    						title:silentsoft.i18n.buildingTechnical.oil,
    						width:160,
    						html: '<p class="menuItem" onclick="silentsoft.app.onTankLevelsPressed();">' + silentsoft.i18n.buildingTechnical.tankLevels + '</p><p class="menuItem" onclick="silentsoft.app.onTankContractsPressed();">' + silentsoft.i18n.buildingTechnical.tankContracts + '</p><p class="menuItem" onclick="silentsoft.app.onTankAutonomyPressed();">' + silentsoft.i18n.buildingTechnical.tankAutonomy + '</p><p class="menuItem" onclick="silentsoft.app.onTankInventoryPressed();">' + silentsoft.i18n.buildingTechnical.tankInventory + '</p><p class="menuItem" onclick="silentsoft.app.onTankDetailsPressed();">' + silentsoft.i18n.buildingTechnical.tankDetails + '</p><p class="menuItem" onclick="silentsoft.app.onTankHistoricPressed();">' + silentsoft.i18n.buildingTechnical.tankHistoric + '</p><p class="menuItem" onclick="silentsoft.app.onTankThresholdsPressed();">' + silentsoft.i18n.buildingTechnical.tankThresholds + '</p><p class="menuItem" onclick="silentsoft.app.onTankLowlevelsPressed();">' + silentsoft.i18n.buildingTechnical.tankLowlevels + '</p><p class="menuItem" onclick="silentsoft.app.onTankFillingsPressed();">' + silentsoft.i18n.buildingTechnical.tankFillings + '</p><p class="menuItem" onclick="silentsoft.app.onTankConsumptionPressed();">' + silentsoft.i18n.buildingTechnical.tankConsumption + '</p><p class="menuItem" onclick="silentsoft.app.onTankMonthlyConsumptionPressed();">' + silentsoft.i18n.buildingTechnical.tankMonthlyConsumption + '</p><p class="menuItem" onclick="silentsoft.app.onTankConsumptionTablePressed();">' + silentsoft.i18n.buildingTechnical.tankConsumptionTable + '</p><p class="menuItem" onclick="silentsoft.app.onTankMonthlyCurrentPricePressed();">' + silentsoft.i18n.buildingTechnical.tankCurrentPrice + '</p><p class="menuItem" onclick="silentsoft.app.onTankListOfSuppliersPressed();">' + silentsoft.i18n.buildingTechnical.tankListOfSuppliers + '</p><p class="menuItem" onclick="silentsoft.app.onTankSurveyOfBuyingPricesPressed();">' + silentsoft.i18n.buildingTechnical.tankSurveyOfBuyingPrices + '</p><p class="menuItem" onclick="silentsoft.app.onTankOrderingListPressed();">' + silentsoft.i18n.buildingTechnical.tankOrderingList + '</p><p class="menuItem" onclick="silentsoft.app.onTankOrderingFollowUpPressed();">' + silentsoft.i18n.buildingTechnical.tankOrderingFollowUp + '</p>',
    						autoScroll: true
    					},{						
    						title: silentsoft.i18n.buildingTechnical.water,
    						html: 'wedasd',
    						//disabled: true,
    						autoScroll: true
    					},{
    						title: silentsoft.i18n.buildingTechnical.element,
    						html: 'asdad',
    						//disabled: true,
    						autoScroll: true
    					},{
    						title: silentsoft.i18n.buildingTechnical.light,
    						html: 'asdasd',
    						//disabled: true,
    						autoScroll: true
    					},{
    						title: silentsoft.i18n.buildingTechnical.wind,
    						html: 'adasd',
    						//disabled: true,
    						autoScroll: true
    					}
    				]
    			});
    and when I pressed the key of f11 on keyboard,the screen will be expand,So the tab strip's text will be diminish(see the attachment),but when first loading the page,It will be ok,I don't know why?if you have some good idea,please tell me,Thank you very much!
    Attached Images
    Last edited by mystix; 26 Feb 2008 at 10:23 PM. Reason: use [code][/code] tags!

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