1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    Bangalore
    Posts
    171
    Vote Rating
    0
    samarth is on a distinguished road

      0  

    Default FormPanel Render to HTML Table

    FormPanel Render to HTML Table


    Hi folks,
    I am using ExtJS 3.4. I have one form and i have one table. That table i have called in a xtype:'panel'. using html <Table> tag. In one table td i need a formpanel in which it contains login details. when i was rendering that form to that <td> using id <td id="idname"> i was not getting that form inside that table space. Any one know how to renderer formpanel inside table.


    Thanks in advance.
    Samarth Manjunath

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    549
    Vote Rating
    54
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    With the number of problems you appear to be having with this one page, I would honestly consider re-writing from scratch rather than trying to hack the old code to fit the requirements

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Location
    Bangalore
    Posts
    171
    Vote Rating
    0
    samarth is on a distinguished road

      0  

    Default


    Quote Originally Posted by willigogs View Post
    With the number of problems you appear to be having with this one page, I would honestly consider re-writing from scratch rather than trying to hack the old code to fit the requirements
    Hey willigogs,
    I have written the code of that design from scratch. It is working well now only problem is rendering the formpanel into that table.
    Samarth Manjunath

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    549
    Vote Rating
    54
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    Please provide some example code of how you have achieved this, as this will help for anyone to offer help.

    Using tables for layout is quite an old methodology, and I would always recommend using DIVs instead - but I guess this depends on your individual requirement. If you're using an EXT viewport, it really would be much simpler to use a border layout for your panels instead, rather than manually coding the HTML elements and using renderTo.

  5. #5
    Sencha User
    Join Date
    Sep 2011
    Location
    Bangalore
    Posts
    171
    Vote Rating
    0
    samarth is on a distinguished road

      0  

    Default


    Quote Originally Posted by willigogs View Post
    Please provide some example code of how you have achieved this, as this will help for anyone to offer help.

    Using tables for layout is quite an old methodology, and I would always recommend using DIVs instead - but I guess this depends on your individual requirement. If you're using an EXT viewport, it really would be much simpler to use a border layout for your panels instead, rather than manually coding the HTML elements and using renderTo.
    Hi willigogs,
    I have used viewport only with border layout

    Code:
    xtype:'panel',
    html:'<table width="90%" border="1" align="center" border="0">
    <tr><td width="9%">'+
    '<img src="../image_28.gif" width="100%" height="258" /></td>'+
    '<td width="24%">In this space i need a formpanel</td><td width="66%">
    <img src="../images_29.gif" width="100%" height="258" /></td></tr></table>',
    items:[{
            xtype:'panel',
            items:[loginForm]
        }]
    Samarth Manjunath

  6. #6
    Sencha User
    Join Date
    Jan 2011
    Posts
    549
    Vote Rating
    54
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    You can't have "html" and "item" configs on one panel (which are you wanting to display?!)

    Remove the html config altogether. You also don't need the child item to be another panel, with the form inside of it - that is just needless overnesting. Just add the formpanel directly to the parent panel "item" config.

  7. #7
    Sencha User
    Join Date
    Sep 2011
    Location
    Bangalore
    Posts
    171
    Vote Rating
    0
    samarth is on a distinguished road

      0  

    Default


    Quote Originally Posted by willigogs View Post
    You can't have "html" and "item" configs on one panel (which are you wanting to display?!)

    Remove the html config altogether. You also don't need the child item to be another panel, with the form inside of it - that is just needless overnesting. Just add the formpanel directly to the parent panel "item" config.
    Hi willigogs,
    Can you please give one example for this. It will help me
    Samarth Manjunath

  8. #8
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default try renderTo property

    try renderTo property


    Hi,

    You can put your Panel/FormPanel as a single external component using renderTo property which should be set as id of the element/container that exists in your td element.

    Code:
    {
    xtype: 'panel', html: .... + '<td><div id="formPanelWrapper"></div></td>' + ... listeners: {
    afterrender: function(){
    var myForm = new Ext.form.FormPanel({
    ... renderTo: 'formPanelWrapper' ...
    });
    }
    }
    }
    If that does not work, let me know so i can provide you another solution.

    Regards.
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  9. #9
    Sencha User
    Join Date
    Sep 2011
    Location
    Bangalore
    Posts
    171
    Vote Rating
    0
    samarth is on a distinguished road

      0  

    Default


    Quote Originally Posted by sword-it View Post
    Hi,

    You can put your Panel/FormPanel as a single external component using renderTo property which should be set as id of the element/container that exists in your td element.

    Code:
    {
    xtype: 'panel', html: .... + '<td><div id="formPanelWrapper"></div></td>' + ... listeners: {
    afterrender: function(){
    var myForm = new Ext.form.FormPanel({
    ... renderTo: 'formPanelWrapper' ...
    });
    }
    }
    }
    If that does not work, let me know so i can provide you another solution.

    Regards.
    Hi sword-it i will try your code..

    Thanks for your reply
    Samarth Manjunath