Results 1 to 4 of 4

Thread: why i can not show combobox and graph in formpanel at the same time??

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

    Exclamation why i can not show combobox and graph in formpanel at the same time??

    why i can not show combobox and graph in formpanel at the same time?
    such as this picture.
    http://img96.imageshack.us/img96/4863/piclp.jpg

    and this is my code.
    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
        });
    
    
    
    //    store.setDefaultSort('amphoe', 'desc');
        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.FormPanel({
            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'));
                    }
                }
                    },{
                        fieldLabel: 'Station',
                name: 'aa',
                id: 'aa',
                xtype: 'combo',
                allowBlank:false
                    
                    
            }]
        });
        
        
        
        
        
        var SimpleWindow= new Ext.Window({
        title: 'Form Add File',
        closable:true,
        closeAction:'hide',
        width: 340,
        height:300,
        layout: 'fit',
        modal: true,
        
        items: line,
      
        });
        ////////////////////////////////////
        
        
        
        ///////////////////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',
                //store:storeavg,
                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(),
                               
                                datefrom: Ext.getCmp("datefrom").getRawValue(),
                                dateto: Ext.getCmp("dateto").getRawValue()
                                
                            }
                        });
                    
    
                   
                
                    
            
                }
            },{
                text:'Graph',
                handler: function () {
                    
                    
                    if(!SimpleWindow.isVisible()){
                        linestore.reload({
                            params: {
                                sortby: Ext.getCmp("sortby").getValue(),
                               station: Ext.getCmp("station").getValue(),
                              
                                datefrom: Ext.getCmp("datefrom").getRawValue(),
                                dateto: Ext.getCmp("dateto").getRawValue()
                                
                            }
                        });
        SimpleWindow.show();
        } else {
        SimpleWindow.toFront();
        }
                    
            
                }
                                                
            },{
                text: 'Cancel',
                handler: function () {
                    simpleForm.getForm().reset();
                    
                }
            }]
        });
        
        
        /////////////////
      });

  2. #2
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    it's hard to get it by the code, but i would not use renderTo but create a panel with the created items at the end to show all.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

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

    Default

    but the graph overlap combobox.

    how to show combobox below the graph.

  4. #4
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    make it simple

    Code:
    var MyPanel = new Ext.FormPanel({
       items: [line,simpleForm]
    )};
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

Posting Permissions

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