Results 1 to 5 of 5

Thread: Howto create a div in a panel?

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    Munich, Germany
    Posts
    58
    Vote Rating
    1
      0  

    Default 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,099
    Answers
    113
    Vote Rating
    100
      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
      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
      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!

  5. #5
    Sencha User
    Join Date
    Nov 2009
    Location
    Reading, UK
    Posts
    144
    Vote Rating
    6
      0  

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •