1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    7
    Vote Rating
    0
    gaurav89 is on a distinguished road

      0  

    Default Answered: accordion layout help URGENT

    Answered: accordion layout help URGENT


    hi

    My requirement is to make only one panel visible at a time,
    this can be done using ext js ACCORDION layout.

    but the problem is all the panels contain charts i.e. one panel contain pie chart,other contain bar chart and other contain donut, now the issue is to make all charts in one group and only one should open which user will click

    its layout is something

    CHART1
    CHART2
    CHART3
    CHART4


    I am stuck in it.need urgent help ..please help how can i do this using ACCORDION layout or is there any other way to do it ?

  2. OK, I just tried the code you posted above. It seemed to work OK if I made a few small tweaks...
    1. Get rid of all the renderTo config options.
    2. Uncomment the lines region: 'center' and region: 'east', the border layout blows up without them.

    Once I did that everything seemed to be fine.

    Which browsers are you seeing problems in? I tried in Chrome and FF.

  3. #2
    Ext JS Premium Member christocracy's Avatar
    Join Date
    Oct 2006
    Location
    Montreal
    Posts
    380
    Vote Rating
    0
    christocracy is on a distinguished road

      0  

    Default When unsure

    When unsure


    When unsure of where to begin with any particular UI problem, always start by finding an appropriate example, on the examples page.

    http://www.sencha.com/products/extjs/examples/
    (also, the downloaded ExtJS SDK contains a folder /examples which can be run from your localhost)

    Perhaps you want to start by running the Accordion sample? View the source; copy/paste the code into your app.

    http://dev.sencha.com/deploy/ext-4.0...accordion.html
    /**
    * @author Chris Scott
    * @business www.transistorsoft.com
    * @rate $120USD / hr; training $500USD / day / developer (5 dev min)
    *
    * @SenchaDevs http://senchadevs.com/developers/transistor-software
    * @twitter http://twitter.com/#!/christocracy
    * @github https://github.com/christocracy
    */

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    7
    Vote Rating
    0
    gaurav89 is on a distinguished road

      0  

    Default


    here is the code..

    please help now

    this file name is according.html



    <html>
    <head>
    <title>Charts</title>
    <!-- Ext -->


    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../shared/example.css" />
    <style type="text/css">

    #frame{
    width:450px;
    margin:0px auto;
    }

    </style>
    <script type="text/javascript" src="../../bootstrap.js"></script>
    <script type="text/javascript" src="../example-data.js"></script>
    <script type="text/javascript">
    Ext.require(['*']);

    Ext.onReady(function(){

    var item1 = Ext.create('Ext.Panel', {

    width: 300,
    height: 500,
    //hideCollapseTool: true,
    //sortable=true,
    collapsible: true,
    renderTo: Ext.getBody(),
    layout: 'fit',
    items: {
    xtype: 'chart',
    animate: true,
    shadow: true,
    store: store1,
    axes: [{
    type: 'Numeric',
    position: 'left',
    fields: ['data1'],
    title: 'Hits',
    grid: true,
    minimum: 0
    }, {
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
    title: 'Months',
    label: {
    rotate: {
    degrees: 270
    }
    }
    }],
    series: [{
    type: 'column',
    axis: 'left',
    gutter: 80,
    xField: 'name',
    yField: ['data1'],
    style: {
    fill: '#EE9A49'
    }
    }]
    }

    });






    var item22 = Ext.create('Ext.Panel', {
    title: 'Chart1',
    // html: '&lt;empty panel&gt;',
    cls:'empty'
    });

    var item2 = Ext.create('Ext.Panel', {
    title: 'Chart2',
    // html: '&lt;empty panel&gt;',
    cls:'empty'
    });

    var item3 = Ext.create('Ext.Panel', {
    title: 'Chart3',
    //html: '&lt;empty panel&gt;',
    cls:'empty'
    });

    var item4 = Ext.create('Ext.Panel', {
    title: 'Chart4',
    html: '&lt;empty panel&gt;',
    cls:'empty'
    });



    var accordion = Ext.create('Ext.Panel', {
    // region:'east',
    // margins:'50 50 50 50',
    split:true,
    renderTo:'frame',
    width: 400,
    height :500,
    layout:'accordion',
    items: [item1,item2,item3,item4]
    });


    var viewport = Ext.create('Ext.Viewport', {
    layout:'border',
    // width:300,
    // height :400,
    // renderTo:'frame',
    items:[
    accordion, {
    // region:'center',
    margins:'5 5 5 0',
    //cls:'empty',
    // bodyStyle:'background:#f1f1f1',
    // html:'<br/><br/>&lt;empty center panel&gt;'

    }]
    });

    //viewport.render(document.body);


    });
    </script>
    </head>
    <body>
    <div id="frame">
    </div>

    <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
    </body>
    </html>

  5. #4
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    You don't need any of the renderTo options if you're using a viewport but I doubt that's causing a problem.

    Could you explain exactly what the problem is? From your original description I can't figure out what issue you're having and your code doesn't really clarify. As far as I can tell you just haven't written any code for your other charts.

  6. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    7
    Vote Rating
    0
    gaurav89 is on a distinguished road

      0  

    Default


    thanks for your reply.

    the problem is that i want layout like accordion layout which should have four panels and each having one chart.

    i havn't added the code for other charts as now even this code is not running properly.(in it on one panel there is one chart on other there are empty panels)

    when i remove this chart ...the layout works fine for panels and it shows for panels..
    but when i insert the chart code only chart shows and all panels disappear.

    Please help ...its urgent.

  7. #6
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    Please help ...its urgent.
    You'd get help quicker if you posted a better code example. First you should wrap all code in code tags. Second you should give a complete example: the current example doesn't include sample data.

    As is, many people on the forums will take one look at your post and skip over it because they can't read it.

  8. #7
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    OK, I just tried the code you posted above. It seemed to work OK if I made a few small tweaks...
    1. Get rid of all the renderTo config options.
    2. Uncomment the lines region: 'center' and region: 'east', the border layout blows up without them.

    Once I did that everything seemed to be fine.

    Which browsers are you seeing problems in? I tried in Chrome and FF.

  9. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    7
    Vote Rating
    0
    gaurav89 is on a distinguished road

      0  

    Default


    thanks it is working fine.

    but my requirement is not to use border layout as it (accordion chart layout) is the separate component of my extjs web page and it is on one corner of the page with other tables .

    i am using it in firefox

    THANKS A LOT,,,

  10. #9
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    Do you mean you want to inject the accordion into some HTML markup that isn't created by ExtJS?

    That should be easy enough.

    Get rid of the viewport. Add in a renderTo on the accordion:

    Code:
    Ext.create('Ext.Panel', {
        height: 500,
        layout: 'accordion',
        renderTo: 'frame',
        width: 400,
        items: [
            item1,
            item2,
            item3,
            item4
        ]
    });
    That works for me. It's similar to what you had before but, importantly, I've completely got rid of the viewport.

    I'm still not convinced I'm actually answering your real question but I'm afraid I'm struggling to understand what it is you want.

  11. #10
    Sencha User
    Join Date
    Aug 2011
    Posts
    7
    Vote Rating
    0
    gaurav89 is on a distinguished road

      0  

    Default




    A BIG THANKS TO You

    it is exactly what i wanted.....

    THANKS a lot..

    You understand me right and it is what exactly i wanted.

    one more query can we position this component to anywhere in the page ?

Thread Participants: 2

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