Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    37
    Vote Rating
    1
    Voyd is on a distinguished road

      1  

    Default Unanswered: MVC and Sencha Charts

    Unanswered: MVC and Sencha Charts


    I have been developing in Sencha Touch with an MVC style format. I have recently downloaded the charts package. Working with the examples on a simple index.html page, I can manipulate the data and recreate tables. My problem comes when trying to do similar things inside my views. I was wondering if Sencha could provide an example using MVC where you load a chart (of any kind) into a panel (inside some view). Below is a code snippet where I am attempting to do something of that nature and failing...most of the chart code is directly from an example.


    Code:
    var colors = ['url(#v-1)', 'url(#v-2)', 'url(#v-3)', 'url(#v-4)', 'url(#v-5)'];
    var store1 = new Ext.data.JsonStore({
                fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
                data: [{name: 'bob', data1: 21},
                    {name: 'sam', data1: 33},
                    {name: 'sarah', data1: 44},
                    {name: 'wo', data1: 55},
                    {name: 'when', data1: 66},
                    {name: 'how', data1: 77}
                ]
            });
    var chartPanel = new Ext.chart.Panel({
        // fullscreen: true, screws up the app -either way wont render properly
        title: 'Pie Chart',
      store: store1,
      shadow: false,
                      gradients: [{
                        'id': 'v-1',
                        'angle': 0,
                        stops: {
                            0: {
                                color: 'rgb(212, 40, 40)'
                            },
                            100: {
                                color: 'rgb(117, 14, 14)'
                            }
                        }
                    },
                    {
                        'id': 'v-2',
                        'angle': 0,
                        stops: {
                            0: {
                                color: 'rgb(180, 216, 42)'
                            },
                            100: {
                                color: 'rgb(94, 114, 13)'
                            }
                        }
                    },
                    {
                        'id': 'v-3',
                        'angle': 0,
                        stops: {
                            0: {
                                color: 'rgb(43, 221, 115)'
                            },
                            100: {
                                color: 'rgb(14, 117, 56)'
                            }
                        }
                    },
                    {
                        'id': 'v-4',
                        'angle': 0,
                        stops: {
                            0: {
                                color: 'rgb(45, 117, 226)'
                            },
                            100: {
                                color: 'rgb(14, 56, 117)'
                            }
                        }
                    },
                    {
                        'id': 'v-5',
                        'angle': 0,
                        stops: {
                            0: {
                                color: 'rgb(187, 45, 222)'
                            },
                            100: {
                                color: 'rgb(85, 10, 103)'
                            }
                        }
                    }],
                    axes: [{
                        type: 'Numeric',
                        position: 'left',
                        fields: ['data1'],
                        minimum: 0,
                        maximum: 100,
                        label: {
                            renderer: function(v) {
                                return v.toFixed(0);
                            }
                        },
                        title: 'Value'
                    },
                    {
                        type: 'Category',
                        position: 'bottom',
                        fields: ['name'],
                        title: 'Reports'
                    }],  
      series: [{
          type: 'column',
          axis: 'left',
        highlight: true,
        renderer: function(sprite, storeItem, barAttr, i, store) {
            barAttr.fill = colors[i % colors.length];
                            return barAttr;
                        },
                        label: {
                          field: 'data1'
                        },
                        xField: 'name',
                        yField: 'data1'
                    }],
                    interactions: [{
                        type: 'panzoom',
                        axes: ['bottom']
                    }]
    });
    
    
    
    
    
    
    
    
    var panel2 = new Ext.Panel({
        title: 'Reports',
        layout:'fit',
        items: [{
            xtype: 'list',
            store: workcatalog.stores.WhichReport,
            itemTpl: new Ext.XTemplate(
                "{label}"
            ),
            onItemDisclosure: function(record, btn, index) {
                var store1 = workcatalog.stores.Users;
                    console.log(store1.getAt(index).data.id);
                    
                    workcatalog.controllers.WorkController.setUser(store1.getAt(index).data.id);
                    Ext.dispatch({
                        controller: workcatalog.controllers.WorkController,
                        action: "displayUsedBy",
                        animation: {type:"slide", direction:"left"}
                        });
            },
            grouped: false,
            scroll: "verticle",
            //fullscreen: true    
            
        }],
        
    });
    workcatalog.views.WhichReportMenu = Ext.extend(Ext.TabPanel, {
        layout: {
            type: 'vbox',
            align: 'stretch',
        },
        defaults: {flex: 1},
        dockedItems: [{
               xtype: "toolbar",
               style: "font-size: 14px",
               title: "Report Details",
              items: [{
                  xtype:"button",
                   ui: 'back',
                   text: 'Back',
                       handler: function() {
                            Ext.dispatch({
                                   controller: workcatalog.controllers.WorkController,
                                action: "goBackFromWhichReports",
                                animation: {type:"slide", direction: "right"}
                            });
                   }
                },
                {xtype:'spacer'},
                {
                 id: 'home',
                  xtype: "button",
                   iconCls: "home x-icon-mask",
                   handler: function() {
                    workcatalog.controllers.WorkController.setFromUsersGate(0);
                    workcatalog.controllers.WorkController.setFeaturedGate(0);
                    Ext.dispatch({
                        controller: workcatalog.controllers.WorkController,
                        action: 'index',
                        animation: {type:'slide', direction:'right'}
                    });
                }
                }]
        },{
            xtype: "toolbar",
            dock: "bottom",
               style: "font-size: 14px",
               title: "PC",
        }
        ],
        
        items: [panel2, chartPanel],
    
    
        initComponent: function() {
    
    
            workcatalog.views.WhichReportMenu.superclass.initComponent.apply(this, arguments);
        }
    });

  2. #2
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Answers
    17
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Both the WorldApp and EnergyApp use MVC. That I think the WorldApp might be a better choice since it's goes into a bit more depth with changing interactions dynamically.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    37
    Vote Rating
    1
    Voyd is on a distinguished road

      0  

    Default Still stuck

    Still stuck


    After I posted, I found those examples. Still no joy at what I am trying to do. Basically, I want to navigate to a tabpanel, one tab is a list, the other the chart. The tabpanel will take
    items:[listpanel, chartpanel].
    For testing, I am using a basic store to grab values just to get the chart to show. (Which it doesnt). I keep getting errors --
    Uncaught Attempting to create a component with an xtype that has not been registered: [object Object]
    I think this has something to do with my creation of the chart panel. If i use
    var chart = new Ext.chart.Chart --- it throws an error and nothing displays.
    If I use
    var chart = new Ext.chart.Panel --- no errors, but nothing displays either.

    How would I be able to get this code snippet to work?

    Code:
    var store1 = new Ext.data.JsonStore({
                fields: ['name', 'data1'],
                data: [{name: 'sean', data1: 21},
                    {name: 'sam', data1: 33},
                    {name: 'sarah', data1: 44},
                    {name: 'wo', data1: 55},
                    {name: 'when', data1: 66},
                    {name: 'how', data1: 77}
                ]
            });
            
    var myChart = new Ext.chart.Panel({
        width: 200,
        height: 200,
        
        cls: 'chartpanel',
        store: store1,
        series: [{
            type: 'column',
            xField: 'name',
            yField: ['data1']
        }],
        legend: {
            position: 'left'
        },
        interactions: [
            {
                type: 'panzoom',
                axes: ['bottom']
            }
        ]
    });
    After, I throw the panel inside a tabpanel items.

    tabpanel
    --- items: [myChart]

    Thanks.

  4. #4
    Sencha User
    Join Date
    Nov 2010
    Posts
    168
    Vote Rating
    0
    philogb is on a distinguished road

      0  

    Default


    Hi,

    Thanks for your report. The chart has to have a relative (or at least non-absolute) position in the tab panel in order to be well displayed, however the fit layout sets position:absolute to it's children. This can be fixed by handsetting the position style on the chart. For example:

    Code:
    Ext.setup({    
        tabletStartupScreen: 'tablet_startup.jpg',
        phoneStartupScreen: 'phone_startup.jpg',
        tabletIcon: 'icon-ipad.png',
        phoneIcon: 'icon-iphone.png',
        glossOnIcon: false,
        onReady: function() {
    
    
    
    
            var store1 = new Ext.data.JsonStore({
              fields: ['name', 'data1'],
              data: [{name: 'sean', data1: 21},
                {name: 'sam', data1: 33},
                {name: 'sarah', data1: 44},
                {name: 'wo', data1: 55},
                {name: 'when', data1: 66},
                {name: 'how', data1: 77}
              ]
            });
    
    
            var myChart = new Ext.chart.Chart({
              title: 'something',
    
    
              cls: 'chartpanel',
              style: 'position:relative',
    
    
              store: store1,
              series: [{
                type: 'column',
                xField: 'name',
                yField: ['data1']
              }],
              legend: {
                position: 'left'
              },
              interactions: [
                {
                type: 'panzoom',
                axes: ['bottom']
              }
              ]
            });
    
    
            
            new Ext.TabPanel({
               renderTo: Ext.getBody(),
               width: 400,
               height: 400,
               region:'center',
               deferredRender:false,
               activeTab:0,
               defaults:{autoScroll:true},
               items:[{
                  title: 'Refreshed Panel',
                  html: 'hello'
               }, myChart]
            });
            
        }
    });
    I hope this helps,

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    37
    Vote Rating
    1
    Voyd is on a distinguished road

      0  

    Default Hmm

    Hmm


    Well, I must be missing something really simple, because I still can't get this puppy to display. I am calling this card from a controller, so Ext.Setup, OnReady, etc -- will not work for this particular case? Here is my entire code as it stands now. When I leave the chart as Ext.chart.Chart it throws errors. When I change it to chart.Panel, it will display the title but no chart (and no errors). I am banging my head on the desk trying to see what I am missing.

    From the controller, the method to display the card.

    Code:
        displayWhichReport: function(options) {
            workcatalog.views.viewport.setActiveItem(workcatalog.views.whichreport, options.animation);
            workcatalog.views.viewport.doLayout();
        },
    Code:
    var store1 = new Ext.data.JsonStore({
    	fields: ['name', 'data1'],
    	data: [{name: 'sean', data1: 21},
           	   {name: 'sam', data1: 33},
               {name: 'sarah', data1: 44},
               {name: 'wo', data1: 55},
               {name: 'when', data1: 66},
               {name: 'how', data1: 77}
               ]
        });
    
    
    var myChart = new Ext.chart.Chart({
    			autoSize: true,
    			title: 'something',
    			animate: true,
    			cls: 'chartpanel',
        		        style: 'position:relative',
        		        store: store1,
        		        series: [{
        			type: 'column',
            		xField: 'name',
            		yField: ['data1']
              	        }],
            		legend: {
            		position: 'left'
            		},
           			 interactions: [
            		{
            		type: 'panzoom',
            		axes: ['bottom']
            		}
        		]
    		});
    
    
    
    
    workcatalog.views.WhichReportMenu = Ext.extend(Ext.TabPanel, {
    		autoSize: true,
               	region:'center',	
        		dockedItems: [{
           			xtype: "toolbar",
           			style: "font-size: 14px",
           			title: "Report Details",
        		},{
    				xtype: "toolbar",
    				dock: "bottom",
           		                style: "font-size: 14px",
           		                title: "PC",
    			}
    			],
    			items: [myChart],
    			
    	initComponent: function() {
    
    
        	workcatalog.views.WhichReportMenu.superclass.initComponent.apply(this, arguments);
    	}
    });

  6. #6
    Sencha User
    Join Date
    Nov 2010
    Posts
    168
    Vote Rating
    0
    philogb is on a distinguished road

      0  

    Default


    What about removing the autoSize: true and try setting some fixed with/height values, would that work?

    Could you try to inspect the generated html when the chart panel is selected and see whether the html is actually generated for the chart, and if it is, what size it is?

    Also, could you open the error console and tell me what error is thrown?

    Thanks,

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

      0  

    Default


    I tried your suggestions. Nothing worked. The error being thrown from Chrome Console is

    Uncaught TypeError: undefined is not a function

    I traced down the errors and this line is the first from my own code that it has a problem with which of course is from my controller. That line activates the card.

    workcatalog.views.viewport.setActiveItem(workcatalog.views.whichreport, options.animation);

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    37
    Vote Rating
    1
    Voyd is on a distinguished road

      0  

    Default


    Evidently, I needed sencha-charts-debug.js in the head of my html. Everything works now. Cheers!

  9. #9
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Answers
    17
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Remember to just use the sencha-charts.js when you are done developing. The minified version runs much faster on mobile devices.

Thread Participants: 2