1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    Munich, Germany
    Posts
    58
    Vote Rating
    1
    kodak is on a distinguished road

      0  

    Default Unanswered: Howto create a div in a panel?

    Unanswered: Howto create a div in a panel?


    Hi!
    I have a panel and I would like to render 3rd party js into the items of the panel.
    But I need to render the js into a div (not class) like this:

    Code:
    <div id='externjs' height='460' width='400' </div>
    Here is my code so far:

    Code:
    Ext.define("abc.view.overview", {
                extend : "Ext.form.Panel",
                name : 'overview',
                layout : 'column',
                bodyPadding : '10 0 10 00',
                tbar : [{
                            xtype : 'splitbutton',
                            text : 'button1',
                            iconCls : 'add16',
                            menu : [{
                                        text : 'USA'
                                    }]
                        }, '-', {
                            xtype : 'splitbutton',
                            text : 'button2',
                            iconCls : 'button2cls',
                            menu : [{
                                        text : 'Automotive'
                                    }]
                        }, '-', {
                            xtype : 'splitbutton',
                            text : 'project',
                            iconCls : 'projectButton'
                        }],
                items : [{
    title : 'Overview',
                            minHeight : '460',
                            width : '400',
    
    //create the dive here??
                            
                        }]
            });
    How can I add an div element so my js code (which is located in the controller) gets rendered into the items of the panel?

    Thanks!

  2. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,098
    Answers
    113
    Vote Rating
    96
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      1  

    Default


    you can use the html config of panel where you can put your div:

    http://docs.sencha.com/ext-js/4-1/#!...Panel-cfg-html

    But according to comments, it doesnt seem to be working in 4.1.x. It works in 4.0.7.

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Answers
    20
    Vote Rating
    18
    James Goddard will become famous soon enough James Goddard will become famous soon enough

      1  

    Default


    If you need to pass a div so some other javascript library can render to just use the body element. (Body of the panel, not html body.) It is a div already:

    Code:
    panel.body.dom
    If you need to customize the div you can do so in the config with bodyCls or bodyStyle.

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Location
    Munich, Germany
    Posts
    58
    Vote Rating
    1
    kodak is on a distinguished road

      0  

    Default


    Thanks for your answers. But I have problems to access the panel body...

    Iam trying to use amCharts and this is the call:
    Code:
    chart.write('chartContainer');
    Ok, so instead the div chartContainer I want wo use the panels body.
    Normally I get the panel with:

    Code:
    var analyse = Ext.ComponentQuery.query('analyse');
    But I think this is not corrent... how can I get the panel body then?

    Edit:
    Its working now! I had to do this:
    controller:
    Code:
    var analyse = Ext.ComponentQuery.query('analyse');
    chart.write(analyse[0].body.dom);
    but after that, I could see is in the body but
    Code:
                bodyStyle : {
                    height: '460',
                    width: '400'
                }
    solved the problem.
    Again, thanks for your help!

Thread Participants: 2

Tags for this Thread