1. #51
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Thank you gcallaghan I've got this working and now I know what was my problem.
    The following code works like a charm.

    Code:
    Ext.setup({
        onReady: function() {
    		var tb = new Ext.Toolbar({
    			dock: 'top',
                            title: 'Hide Me!'
    		});
    	
            var myPanel = new Ext.Panel({
                id: 'mainPanel',
                bodyPadding:'0',
                margin:'0',
                fullscreen: true,
                html: '<p>This is a Test</p>',
                scroll: true,
                dockedItems: [
    				tb,
    			{
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [{
                        text: 'Hide Top Toolbar',
                        handler: function(){
    
                            //Hiding the top toolbar
                            tb.hide(false);
    
                            //Remove the toolbar
                            myPanel.removeDocked(tb,false);
    
                        },
                    }]
                }]
            }); 
        }
    });
    The problem is that I was trying to call

    Code:
    myPanel.removeDocked('myToolbarId' ,false);
    and not

    Code:
    myPanel.removeDocked(component ,false);
    So if call removeDocked with the component object I want to remove (not the ID) everything works fine.


    Hope this helps,
    Thanks again gcallaghan.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  2. #52
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    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


    Anyone know if this has been submitted as a bug? I looked but didn't see it. doComponentLayout should have technically solved this.
    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. #53
    Sencha User
    Join Date
    Mar 2011
    Posts
    71
    Vote Rating
    0
    heringsfilet is on a distinguished road

      0  

    Default


    Hi there,

    I tried to implement a "show" and "hide" functionality when connection to the internet is established or lost:

    Code:
    showNoInternetHint: function() {
            var hint = app.views.viewport.getDockedComponent('hint');
    
            if(hint.isVisible() === false){
                navigator.notification.vibrate(500);
                hint.setVisible(true);
                app.views.viewport.addDocked(hint);
                app.views.viewport.doComponentLayout();
            }
        },
        
        hideNoInternetHint: function() {
            var hint = app.views.viewport.getDockedComponent('hint');
            
            if(hint.isVisible() === true){
                hint.setVisible(false);
                app.views.viewport.removeDocked(hint,false);
                app.views.viewport.doComponentLayout();
            }
        }
    The methods get called correctly (there is the vibration). As item in the TabPanel there is a Panel which header is in the foreground and the hint is behind it.

    This is the code for the "hint":
    Code:
    dockedItems: [{
            xtype: 'panel',
            id: 'hint',
            ui: 'plain',
            dock: 'top',
            hidden: true,
            items: [{
                html: '<p class="hint">no connection!</p>'
            }]
        }],
    Am I missing something else?

    (UPDATE)
    Following will work:
    Code:
    hint.setVisible(true);
    app.views.viewport.addDocked(hint);
    hint.doLayout();
    app.views.viewport.doLayout();
    and in the viewport:
    Code:
    listeners: {
            afterlayout : function(pnl, lay){
                var hint = this.getDockedComponent('hint');
                if(hint.isVisible()){
                    this.body.setStyle('top', hint.getHeight() + 'px');
                    hint.setWidth(this.body.getWidth());
                }
            }
    }
    Last edited by heringsfilet; 31 Mar 2011 at 3:56 AM. Reason: solution found.

  4. #54
    Touch Premium Member
    Join Date
    Feb 2008
    Posts
    206
    Vote Rating
    0
    BlueCamel is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    I was going to write a blog about it but decided it was just too much. I have attached source code to back this up.

    So what is going on... I have a Panel that will hold everything. I have a top dock and bottom dock. Top dock holds a title and buttons only related to individual screens. The bottom dock is for the application as a whole like a Menu button or a Home button.
    I really like how clean your implantation is in the example. I've been using the same pattern in a MVC app but let the parent do all the clean up through the cardswitch event. Based on your example I'm going to try and refactor my work and see if the design is cleaner.

    Thanks for sharing.

  5. #55
    Sencha User vishalnnsingh's Avatar
    Join Date
    Sep 2010
    Location
    Kolkata, India
    Posts
    115
    Vote Rating
    0
    vishalnnsingh is on a distinguished road

      0  

    Default


    Have some feelinh for the window guys, really want to see your code, but cannot.
    Thanks
    I Meet Challenge with Excitement & My Only Gossip is Love

  6. #56

  7. #57
    Sencha User
    Join Date
    Mar 2013
    Location
    Turkey
    Posts
    1
    Vote Rating
    0
    extjsuser6 is on a distinguished road

      0  

    Default


    hi , i had learn ext js 3.4 for 1 month. i created a viewport and i added panel in. Now , i want add listbox in my west panel but i read no listbox in extjs here. also , everybody wrote tree-panel.. can you help me for add listbox in panel ? 'personal list' etc.. thanks.


    Ext.onReady (function(){


    var k = {
    xtype: 'textarea',
    name: 'description',
    hideLabel: true,
    labelSeparator: '',
    height: 100,
    anchor: '100%' }

    var ozellikliGrid = new Ext.grid.PropertyGrid({


    //renderTo: Ext.getBody(),
    width: 300,
    // height : 400 ,
    autoHeight: true,
    propertyNames: {
    tested: 'QA', // olamzsa bos olur ici
    borderWidth: 'Kenar Genisligi'
    },
    source: { //gridin aldigi kaynaklar
    '(isim)': 'Grid Ozellikleri ',
    gruplama: false,
    OtomatikSigdir: true,
    // productionQuality: false,
    tarih : new Date(Date.parse('01.01.2013')),
    test: false,
    versiyon: 0.01,
    borderWidth: 3
    }
    });


    var b ={
    xtype :'panel',
    region : 'center',
    items:[
    ozellikliGrid,
    k

    ]
    }

    // a.add(x);
    // EklenecekFormunAdi.remove('myPanelId');
    var p1={
    xtype :'panel',
    title :'Kisiler',

    items :[
    {
    frame :true,
    width : 200,
    height : 400

    }
    ]
    }



    var p2={
    id :'p2',
    xtype :'panel',
    title :'Kayit'

    }


    var w ={
    title :'Yan',
    xtype :'panel',
    height : 100,
    width : 200,
    layout : 'accordion',
    region :'west',
    split : true,
    frame : false,
    collapsible : true,
    layoutConfig:{
    animate:true
    },
    items:[
    p1,p2

    ]}

    var a = new Ext.Viewport({

    layout : 'border',
    defaults : {
    frame : true,
    split : true
    },

    items :
    [
    w,
    b,
    {
    region : 'north', // bas
    split : false,
    frame : true,
    width : 400
    }
    ]
    });

    // a.getComponent('centerViewPortId').add(ozellikliGrid);
    /* <div id="prop-grid"></div>*/
    });

Similar Threads

  1. difference between items and docked items
    By thomas12 in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 6 Dec 2010, 7:45 AM
  2. How to hide/show items.
    By TheBigOnion in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 2 Jun 2010, 4:10 AM
  3. dynamically add/remove/show/hide items from toolbar
    By aj3423 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 27 Mar 2010, 4:30 AM
  4. EditorGrid - show/hide items
    By soma13 in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 26 Mar 2009, 4:39 AM

Thread Participants: 9

Tags for this Thread

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