Results 1 to 3 of 3

Thread: how to add combobox in chart extjs??

  1. #1
    Ext User
    Join Date
    Jan 2010
    Posts
    49

    Default how to add combobox in chart extjs??

    i want to add combobox and button(for plot graph) for compare graph.
    how to do it ? i don't know.

  2. #2

  3. #3
    Ext User
    Join Date
    Jan 2010
    Posts
    49

    Default

    this is my code. how to do it? help me please.
    Code:
    Ext.chart.Chart.CHART_URL = '../ext-3.0.0/resources/charts.swf';
    Ext.onReady(function(){
        
        Ext.QuickTips.init();  
        
        /////////grid////////
    var store = new Ext.data.JsonStore({
            url: 'simplegrid2.php',
            root: 'results',
            method:'POST',/////////////////
            totalProperty: 'total',
            fields: ['gid', 'ddate','station','dis','aavg'],
            remoteSort: true
        });
    
    
    
        var grid = new Ext.grid.GridPanel({
            title: 'data',
            collapsible:true,
            renderTo: "table",
            //closeAction: 'hide',
            store: store,
            //ds:store,
            columns: [{
                header: "GID",
                width: 100,
                dataIndex: 'gid', 
                sortable: true,
                hidden:false,
                align: 'center'
            },{
                id: 'ddate',
                header: "ddate",
                width: 120, 
                dataIndex: 'ddate',
                sortable: true,
                align: 'center'
            },{
                id: 'station',
                header: "station",
                width: 40, 
                dataIndex: 'station',
                sortable: true,
                align: 'center'
            },{
                id: 'dis',
                header: "dis",
                width: 100, 
                dataIndex: 'dis',
                sortable: true,
                align: 'center'
            
            },{
                id: 'aavg',
                header: "aavg",
                width: 100, 
                dataIndex: 'aavg',
                sortable: true,
                align: 'center'
            
            }],
            autoExpandColumn: 'station',
            //renderTo: Ext.getBody(),
            renderTo: "table",
            width: 600,
            height: 300,
            loadMask: true,
            columnLines:true
        });
        store.load();
        
        //////////////combobox/////////////////////
        //////////for eq_id////////
        var station=new Ext.data.JsonStore({
        url: 'eq_id.php',
        //baseParams:{cmd:'makes'},
        root: 'station',
        fields: ['station']
         });
        
        ///////////for choose day/month/years///////
        var sortby = new Ext.data.SimpleStore({
       fields: ['sortby'],
       data : [['Day'],['Month'],['Year']]
        });
        
        //////////////////end combo/////////
        
        
        
        //////////////////Chart///////////////////////
        var linestore= new Ext.data.Store({
            autoLoad:true,
            proxy: new Ext.data.HttpProxy({
                url: 'chartserver.php'
            }),
            reader: new Ext.data.JsonReader({
                root: 'data'
            }, [
                {name: 'ddate'},
                {name: 'dis',type: 'float'},
                //{name:'eq_id'}
                //{name: 'views',type: 'int'}
            ]),
            listeners:{
                load: function(){
                }
            }
        });
        var line = new Ext.Window({
            title: 'DATA FROM HYDRO',
            renderTo: 'container',
            width:1000,
            height:500,
            frame: true,
            layout:'fit',
            modal: true,
            closable:true,
        closeAction:'hide',
    
            items: [{
                xtype: 'linechart',
                store: linestore,
                xField: 'ddate',
                yField: 'dis',
                listeners: {
                    itemclick: function(o){
                        var rec = store.getAt(o.index);
                        Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('ddate'));
                    }
                }
                    
            }]
        });
        ////////////////////////////////////
        
        
        
        ///////////////////simple form//////////
        var simpleForm = new Ext.FormPanel ({
            labelWidth: 75,
            method: 'POST',//////////////////
            renderTo: "simple-form",
            frame: true,
            title: 'Search',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {width: 230},
            items: [{
               
                
                
                xtype: 'combo',
                id: 'station',
                fieldLabel: 'Station',
                anchor: '94%',
                store: station,
                displayField: 'station',
                valueField: 'station',
                editable: false,
                mode: 'remote',
                forceSelection: true,
                triggerAction: 'all',
                //fieldLabel: 'Name',
                emptyText: 'Select Station',
                selectOnFocus: true,
                name: 'station'
            },{
                            
                
                            
                fieldLabel: 'Date From',
                name: 'datefrom',
                id: 'datefrom',
                xtype:'datefield',
                format:'Y-m-d',
                emptyText: 'Select Date From'
            },{
                        
                fieldLabel: 'Date To',
                name: 'dateto',
                id: 'dateto',
                xtype:'datefield',
                format:'Y-m-d',
                emptyText: 'Select Date To'
                
            },{    
                xtype: 'combo',
                id:'sortby',
                
                name: 'sortby',
                fieldLabel: 'Sort by',
                editable: false,
                forceSelection: true,
                triggerAction: 'all',
                mode: 'local',
                store: sortby,
                emptyText: 'Select Sort',
                displayField:'sortby',
                width: 120 
           
            
            
            
                
                
            }],
            
            buttons: [{
                text: 'Search',            
                handler: function () {
                    
                    store.reload({
                            params: {
                                sortby: Ext.getCmp("sortby").getValue(),
                               station: Ext.getCmp("station").getValue(),
                               //tumbon: Ext.getCmp("tumbon").getValue()
                                datefrom: Ext.getCmp("datefrom").getRawValue(),
                                dateto: Ext.getCmp("dateto").getRawValue()
                                //yourDateField.getValue().dateFormat('Y-m-d')
                            }
                        });
                    
            
                }
            },{
                text:'Graph',
                handler: function () {
                    
                    if(!line.isVisible()){
                        linestore.reload({
                            params: {
                                sortby: Ext.getCmp("sortby").getValue(),
                               station: Ext.getCmp("station").getValue(),
                               //tumbon: Ext.getCmp("tumbon").getValue()
                                datefrom: Ext.getCmp("datefrom").getRawValue(),
                                dateto: Ext.getCmp("dateto").getRawValue()
                                //yourDateField.getValue().dateFormat('Y-m-d')
                            }
                        });
        line.show();
        } else {
        line.toFront();
        }
                    
            
                }
                                                
            },{
                text: 'Cancel',
                handler: function () {
                    simpleForm.getForm().reset();
                    
                }
            }]
        });
        
        
        /////////////////
      });

Posting Permissions

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