fiqs8sjn5by0n

dynamically. adding a panel to a containter

By mike | January 6, 2009

  • I`m creating a row of 3 panels inside a main panel and I want to add another one dynamically.

    I`ve tried using column layout and it didn`t work (bug?) (http://extjs.com/forum/showthread.php?t=19599)so I`m trying table layout but it also doesn`t work for me.
    var p = new Ext.Panel({
    renderTo: 'container',
    id: 'mainPanel',
    layout:'table',
    layoutConfig: {
    // The total column count must be specified here
    columns: 4
    },
    items: [{
    title: 'Column 1',
    id: 'panel1',
    html: Ext.example.bogusMarkup,
    },{
    title: 'Column 2',
    id: 'panel2',
    html: Ext.example.bogusMarkup,
    },{
    title: 'Column 3',
    id: 'panel3',
    html: Ext.example.bogusMarkup,
    }]
    });

    var mainPanel = Ext.getCmp('mainPanel');
    mainPanel.add( new Ext.Panel({
    title: 'Column 4',
    id: 'panel4',
    html: Ext.example.bogusMarkup,
    }));
    mainPanel.doLayout();


    I`ve tried setting the columns in the layoutConfig to 3 or 4 but there is no difference.

    What am I doing wrong?

    Thanks for your help.
    Mark


  • Thank you Santosh! I've been fiddling with the table.add problem for the last few days and wasn't sure if it was a bug or a feature. So I guess it is it a feature! (Although undocumented?)

    (Incidentally to the above poster, the ColumnLayout fix -- adding a call to the ContainerLayout baseclass in the OnLayout method -- didn't work for the TableLayout problem.)


  • I think the problem is because table layout uses an html table and you cannot dynamically add a cell to an existing table.

    I'm not sure I understand. DHTML defines these methods:
    table.tBodies[0].insertRow(-1).insertCell(-1).
    You can similarly remove rows using 'deleteRow()'.

    This bug or feature is very discouraging since it means I've to get down and dirty with DHTML and worry about browser incompatibilities - exactly the kind of stuff this layout abstraction is supposed to solve :(


  • This one drove me nuts - possible fix here (http://extjs.com/forum/showthread.php?p=97640).


  • I think the problem is because table layout uses an html table and you cannot dynamically add a cell to an existing table. Should be the same reason why you cant dynamically add a new column in a column layout, and a new region in a border layout.

    In the case of table layout its not intuitive like the other two cases because in a table layout you are adding a component, while in the other two cases you are changing the layout structure itself.


  • the same to me


  • For table layout add does not work. You have to destroy the original panel create a new one add everything including the new one and render the panel again!


  • what and where is renderTo: 'container' ?







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about dynamically. adding a panel to a containter , Please add it free.

    Topics: enart.xn--fiqs8sjn5by0n.com | edit

    Cash Loan: Affable Financial Assistance for Emergencies Learn Spoken English Through the Correct Method