1. #1
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    2
    Vote Rating
    0
    tony_tan is on a distinguished road

      0  

    Default Help to add a panel to a window.

    Help to add a panel to a window.


    I am trying to extend the panel class (well, actually use a reusable panel class) to do graphing using jquery's flot. I want to put this panel inside a window. The panel is working fine, except one limitation, in that I have to specify height/width on both parent window and this panel (this is because flot have to know the width and height of a placeholder to plot), and the panel isn't exactly fit in the window, even though I used 'fit' layout.
    My code is showing as follows:

    //flot panel class:
    Ext.namespace("Ext.FlotPanel");

    Ext.FlotPanel = Ext.extend(Ext.Panel, {


    initComponent : function(){
    Ext.FlotPanel.superclass.initComponent.apply(this, arguments);
    this.addEvents(
    "plotclick",
    "plotselected",
    "plothover"
    );
    this.cmpId = 'placeholder'+this.id;

    // adjust height
    this.on('render', function(panel){
    // getInnerHeight() doesn't work in onRender method. (It returns 1)
    var height = panel.getInnerHeight()-panel.getFrameHeight();
    $("#"+this.cmpId).height(height);


    if(this.data){
    this.plot(this.data, this.options);
    }
    });
    },

    onRender : function(){
    Ext.FlotPanel.superclass.onRender.apply(this, arguments);

    this.body.createChild({
    id: this.cmpId,
    style: 'width:'+this.width+'px; height:'+this.height+'px;'
    });

    // binding flot events to this class

    var fe = this.fireEvent.createDelegate(this);

    $("#"+this.cmpId).unbind();

    $("#"+this.cmpId).bind("plotclick", function (event, pos, item) {
    fe("plotclick", event, pos, item);
    });


    $("#"+this.cmpId).bind("plotselected", function (event, ranges) {
    fe("plotselected", event, ranges);
    });

    $("#"+this.cmpId).bind("plothover", function (event, pos, item) {
    fe("plothover", event, pos, item);
    });
    },


    // wrapping flot API

    plot: function(data, options){
    this.plotObj = $.plot($("#"+this.cmpId), data, options);
    },

    clearSelection: function(){
    this.plotObj.clearSelection();
    },

    setSelection: function(ranges, preventEvent){
    this.plotObj.setSelection(ranges, preventEvent);
    },

    highlight: function(series, datapoint){
    this.plotObj.highlight(series, datapoint);
    },


    unhighlight: function(series, datapoint){
    this.plotObj.unhighlight(series, datapoint);
    },

    setData: function(data){
    this.plotObj.setData(data);
    },

    setupGrid: function(){
    this.plotObj.setupGrid();
    },

    draw: function(){
    this.plotObj.draw();
    },

    getData: function(){
    this.plotObj.setData();
    },

    getAxes: function(){
    this.plotObj.getAxes();
    },

    getCanvas: function(){
    this.plotObj.getCanvas();
    },

    getPlotOffset: function(){
    this.plotObj.getPlotOffset();
    }

    });


    Ext.reg("flotpanel", Ext.FlotPanel);



    //window, show file:
    this.window = new Ext.Window({
    title: "Graph Viewer",
    //html: graphHtml(this.url),
    width: 680,
    height: 380,
    maximizable: true,
    items: new Ext.FlotPanel({width: 650,
    height: 350,});
    layout: 'fit',
    listeners: {
    afterrender: function (win) {
    //thisViewer.graphPanel.buildChart();
    win.syncSize();
    win.doLayout();
    },
    }
    }).show();

    Is there anyway I can automatically adjust the container window's size based on it's children panel' size ? What event handler I have to rewrite to achieve this ?

    Any help would be great. Thanks a lot!

  2. #2
    Sencha User
    Join Date
    Nov 2010
    Posts
    36
    Vote Rating
    1
    kaendsle is on a distinguished road

      0  

    Default


    Just a couple suggestions until someone more knowledgeable shows up:

    - Try wrapping your code in CODE and /CODE tags with [BRACES]; it will be easier to read and preserve whitespace
    - Have you tried using Highcharts instead of Flot? Highcharts charts resize dynamically and I have had no problem getting them to fit the way I like in any ExtJS component.
    - The width and height of your window are each 30 pixels larger than the child component. Does this reflect the true padding, border, and window frame width? That seems like a lot to me. I usually specify only the width (for IE support) of my windows.

Thread Participants: 1

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