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.

Hybrid View

  1. #1
    Sencha User
    Join Date
    Oct 2010
    Location
    Paris, France
    Posts
    5
    Vote Rating
    0
    dgaspar is on a distinguished road

      0  

    Default Ext.ux.Sparkline + Grid Plugin

    Ext.ux.Sparkline + Grid Plugin


    Hi,

    Here's my quick "port" of jquery.sparkline.js to ExtJS + Grids plugin:



    Download: http://github.com/dgaspar/Ext.ux.Sparkline

    Live demo: http://blog.dgaspar.com/sparkline/

    Examples:
    Code:
    // Example of a simple sparkline (extends BoxComponent)
    // default type is 'line'
    new Ext.ux.Sparkline({renderTo:Ext.getBody(),values:[1,2,3,234,345,56,563,34,134,45,456,542]});
    
    // A Grid with sparkline plugin
            new Ext.grid.GridPanel({
                renderTo:Ext.getBody(),
                autoHeight:true,
                width:250,
                title:'Sparklines',
                view : new Ext.grid.GridView({forceFit : true}),
                columns: [{
                        header: 'Name',
                        dataIndex: 'name'
                    },{
                        header: 'Stats',
                        xtype:'sparklinecolumn',
                        dataIndex: 'stats',
                        sparkline:{ type:'bar', barColor:"green" } // default sparkline config for the column
                }],
                plugins:[new Ext.ux.Sparkline.GridPlugin()],
                store:new Ext.data.SimpleStore({
                    fields:['name', 'stats'],
                    data: [
                        ['bar (default cfg)', {values:[10,-2,30,10,100,40,6,78,23]}],
                        ['line', {
                            // the record can override the default cell config:
                            values:[10,-2,30,10,100,40,6,78,23],
                            type:'line',
                            maxSpotColor:'red'
                        }],
                        ['box', {values:[1,2,3,10,1,4,6,78,23],type:'box'}],
                        ['tristate', {values:[100,50,-13,0,1,4,6,0,-345,345,34,-43,56,7,23],type:'tristate'}],
                        ['discrete', {values:[100,-50,13,345,345,345,34,23,12,56,7,23],type:'discrete'}],
                        ['pie', {values:[10,50,40],type:'pie'}],
                        ['bullet', {values:[10,12,12,9,7],type:'bullet'}]
                    ]
                })
            });
    Known issues:
    • composite functionality (superposed graphs) is broken
    • sparkline_display_visible is broken
    • I "guessed" how plugins, columnmodels and boxcomponents should work when I was extending them.. lol

  2. #2
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    555
    Vote Rating
    27
    joeri has a spectacular aura about joeri has a spectacular aura about joeri has a spectacular aura about

      0  

    Default


    I really like this. I've been looking for a good excuse to use sparklines. I guess I'm just going to have to look a little harder so I can start using this plugin

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Posts
    80
    Vote Rating
    0
    netnutmike is on a distinguished road

      0  

    Question using data from a JSON store

    using data from a JSON store


    Hello,

    I downloaded this plugin and it is exactly what I was looking for. But I am having a problem using the data in the store to have the graph draw. If I force the data it works fine so I know it is something with reading the data from the store.

    The data in the store is loaded from a JSON. I have tried different formats for the data. Here are snippets what I have tried:

    Code:
    "PowerHistory":"{values:[1,10,14,13,17,52,39,43,40,35,30,29,28,27,26]}"
    
    "PowerHistory":"values:[1,10,14,13,17,52,39,43,40,35,30,29,28,27,26]"
    
    "PowerHistory":"[1,10,14,13,17,52,39,43,40,35,30,29,28,27,26]"
    
    "PowerHistory":"1,10,14,13,17,52,39,43,40,35,30,29,28,27,26"
    Here is how I have the column configured:

    Code:
    {header: "Performance", width: 120, sortable: true, dataIndex: 'PowerHistory', xtype: 'sparklinecolumn', sparkline:{type:'line', barColor:"green" } }
    I am guessing it is how I am sending the data because if I put values:[1,2,3,4,5] in the sparkline: config I get the graph.

    Thanks!

    Mike

  4. #4
    Sencha User
    Join Date
    May 2010
    Posts
    3
    Vote Rating
    0
    greenst is on a distinguished road

      0  

    Question async problem

    async problem


    I'm having the same problem. As soon as you load the data via an asynchronous call (e.g. jsonstore) the graphs don't display. Must be a timing issue with the sparkRefresh. Anyone have any ideas how to fix this?

    I would love to get this to work within an extjs gridpanel that's loaded via jsonstore.

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
    Cyberluke is an unknown quantity at this point

      0  

    Exclamation I fixed it!

    I fixed it!


    I fixed two bugs under Ext JS 3:

    1) loading dynamic JSON data in Sparkline
    2) rendering Sparkline inside GridPanel, which is inside Window component


    1) https://github.com/dgaspar/Ext.ux.Sp...x.Sparkline.js
    Line: 1093
    Code:
    var celllen = this.getStore().getTotalCount();
    Change to:
    Code:
    var celllen = this.getStore().getCount();
    Because it returned ZERO counts and that's why it wasn't updated on store change!!!

    This works with my local JSON store (which I update manually through json rpc):
    Code:
    myGridPanel = new Ext.grid.GridPanel({
    
                 autoHeight:true,
                 width:250,
                 title:'My stats',
    
                 view : new Ext.grid.GridView({forceFit : true}),
                  columns: [{
                         header: 'Name',
                         dataIndex: 'name'
                     },{
                         header: 'Stats',
                         xtype:'sparklinecolumn',
                         dataIndex: 'stats',
                         sparkline:{ type:'line', maxSpotColor: "red", barColor:"green" } // default sparkline config for the column
                 }],
                  plugins:[new Ext.ux.Sparkline.GridPlugin()],
                  store:new Ext.data.Store(),
                 mode: 'local'
             });

    TODAY IS YOUR LUCKY DAY AS I INCLUDE A BONUS CODE ON HOW TO UPDATE THIS LOCAL JSON STORE:
    Code:
    fillGridPanel : function(result) {
    
                     var store =  this.myGridPanel.getStore();
    
                     store.removeAll();
                     var record = Ext.data.Record.create([ 'name' ], ['stats']);
                     Ext.iterate(result.myObjects, function(myObject) {
    
                             store.add(new record({
                                     name : myObject.name,
    
                                     stats : {values:[1,2,3,10,1,4,6,78,23]}
                             }));
                     });
                      // ExtJS GridPanel render fix
                     Ext.ux.Sparkline.refreshGrid(this.myGridPanel);
    
              }



    2)
    When GridPanel is inside Window, the sparklines are not drawn on load. You must call some event to redraw gridpanel, when window is loaded. Just add this event in your Ext JS window class (config):
    Code:
    listeners:
    
                                 { show: { fn:function(windowComponent)
                                       {
                                        // ExtJS GridPanel render fix                                   Ext.ux.Sparkline.refreshGrid(windowComponent.myGridPanel);
    
                                       }
                                           }
                                 }
    myGridPanel is GridPanel with Sparklines your created from the demo:


    new Ext.grid.GridPanel


    Ext.ux.Sparkline.refreshGrid is my public function, which is the same as


    original sparkRefresh (with my fixes):
    Code:
      Ext.ux.Sparkline.refreshGrid = function(grid) {
                     var cm = grid.getColumnModel();
                     var cmlen = cm.getColumnCount();
                     for (i = 0; i < cmlen; i++) {
                         var col = cm.getColumnAt(i);
                         if(cm.config[i].xtype=='sparklinecolumn'){
                              var celllen = grid.getStore().getCount();
                             for (j = 0; j < celllen; j++) {
                                 var cell = grid.view.getCell(j, i);
                                 cell.innerHTML = '';
                                 var cfg = {};
                                 Ext.apply(cfg, grid.store.getAt(j).data[col.dataIndex], {
                                     renderTo:cell,
                                     width: grid.view.cm.getColumnWidth(i)
                                 });
                                 Ext.applyIf(cfg,cm.config[i].sparkline||{});
                                 new Ext.ux.Sparkline(cfg);
                             }
                         }
                     }
     }



    Now you can add support for additional Sparklines from original jQuery and port it to Ext JS 4 too!!! :-D

  6. #6
    Sencha User
    Join Date
    Apr 2011
    Posts
    4
    Vote Rating
    0
    teddyk is on a distinguished road

      0  

    Default


    I'm having trouble using the sparklines in my grid. The grid is displayed in a tab. The store is loaded via PHP from a MySQL-Database. I tried several things to get the sparklines displayed. They should show a little history of some values. The format of the field in the store looks like this
    Code:
     
    "stats":"{values:[117,0,4,10,1,1,1,3,29,1,2,2,0,1000,0,2,1,0,1,1,1,1,0,1000,1000,1000,1,2,0]}"
    The column in the columnModel looks like this
    Code:
    {
                header: 'Stats',
                xtype: 'sparklinecolumn',
                dataIndex: 'stats',
                sparkline: {
                    type: 'line',
                    barColor: "green"
                }
            }
    What am I doing wrong? If I paste the values directly like the following, it works.
    Code:
    header: 'Stats',
                xtype: 'sparklinecolumn',
                sparkline: {
                    type: 'line',
                    barColor: "green", 
                    values: [1,4,6,3,67,73,424,7,33,5,5]
                }
    But I don't know how I get the values out of my store.

    Any help?

    EDIT: I'm using ExtJS-version 3.3.1

Similar Threads

  1. Sparkline Grid Plugin
    By appshare in forum Ext 3.x: User Extensions and Plugins
    Replies: 7
    Last Post: 21 Apr 2012, 7:40 AM
  2. Ext.Direct Struts 2 plugin: extdirectj-s2-plugin
    By stefanorg in forum Ext.Direct
    Replies: 4
    Last Post: 12 Oct 2011, 3:39 AM
  3. Ext.ux.grid.ProgressColumn plugin
    By KRavEN in forum Ext 2.x: User Extensions and Plugins
    Replies: 33
    Last Post: 26 Jun 2011, 6:15 PM
  4. Lock Grid Column along with Ext.ux.grid.FilterRow plugin
    By taxidriver in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 15 Jul 2010, 1:12 AM

Thread Participants: 9

Tags for this Thread