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.

  1. #1
    Sencha User
    Join Date
    Oct 2008
    Posts
    78
    Vote Rating
    0
    sarsipius is on a distinguished road

      0  

    Default How to use a TableLayout?

    How to use a TableLayout?


    Hi

    I would like to build a grid of 4x3 charts and I try to use the TableLayout

    Code:
            ContentPanel panel = new ContentPanel();
            panel.setBodyBorder(true);
            panel.setHeading("Traces");
            
            TableLayout tableLayout = new TableLayout(4);
            tableLayout.setHeight("100%");
            tableLayout.setWidth("100%");
            tableLayout.setCellVerticalAlign(VerticalAlignment.MIDDLE);
            
            panel.setLayout(tableLayout);
            
            panel.add(chart1,new TableData());
            panel.add(chart2,new TableData());
            panel.add(chart3,new TableData());
            panel.add(chart4,new TableData());
            
            panel.add(chart5,new TableData());
            panel.add(chart6,new TableData());
            panel.add(chart7,new TableData());
            panel.add(chart8,new TableData());
            
            panel.add(chart9,new TableData());
            panel.add(chart10,new TableData());
            panel.add(chart11,new TableData());
            panel.add(chart12,new TableData());
    What's wrong with this piece of code?!

    The panel stays empty

    Thanks

  2. #2
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Can you please post this code in some context, best would be some runnable testcase implementing entrypoint.

  3. #3
    Sencha User
    Join Date
    Oct 2008
    Posts
    78
    Vote Rating
    0
    sarsipius is on a distinguished road

      0  

    Default


    here we go:

    Code:
    import com.extjs.gxt.charts.client.Chart;
    import com.extjs.gxt.charts.client.model.ChartModel;
    import com.extjs.gxt.charts.client.model.Legend;
    import com.extjs.gxt.charts.client.model.LineDataProvider;
    import com.extjs.gxt.charts.client.model.Legend.Position;
    import com.extjs.gxt.charts.client.model.axis.XAxis;
    import com.extjs.gxt.charts.client.model.axis.YAxis;
    import com.extjs.gxt.charts.client.model.charts.LineChart;
    import com.extjs.gxt.ui.client.Registry;
    import com.extjs.gxt.ui.client.Style.LayoutRegion;
    import com.extjs.gxt.ui.client.Style.Orientation;
    import com.extjs.gxt.ui.client.Style.VerticalAlignment;
    import com.extjs.gxt.ui.client.data.BaseModel;
    import com.extjs.gxt.ui.client.store.ListStore;
    import com.extjs.gxt.ui.client.util.Margins;
    import com.extjs.gxt.ui.client.widget.Component;
    import com.extjs.gxt.ui.client.widget.ContentPanel;
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    import com.extjs.gxt.ui.client.widget.Viewport;
    import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
    import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
    import com.extjs.gxt.ui.client.widget.layout.RowData;
    import com.extjs.gxt.ui.client.widget.layout.RowLayout;
    import com.extjs.gxt.ui.client.widget.layout.TableLayout;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    
    public class Test implements EntryPoint {
    
        public void onModuleLoad() {
            createUI();
        }
    
        private TraceChart dIWidget = null;
        private TraceChart dIIWidget = null;
        private TraceChart dIIIWidget = null;
    
        private TraceChart avRWidget = null;
        private TraceChart avLWidget = null;
        private TraceChart avFWidget = null;
    
        private TraceChart v1Widget = null;
        private TraceChart v2Widget = null;
        private TraceChart v3Widget = null;
    
        private TraceChart v4Widget = null;
        private TraceChart v5Widget = null;
        private TraceChart v6Widget = null;
    
        private Viewport viewport = null;
    
        private void createUI() {
            viewport = new Viewport();
            viewport.setLayout(new BorderLayout());
    
            BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
    
            viewport.add(getUI(),centerData);        
    
            Registry.register("viewport",viewport);
    
            RootPanel.get().add(viewport);
        }
    
        private Component getUI() {
            ContentPanel center = new ContentPanel();
            center.setBodyBorder(false);
            center.setHeaderVisible(false);
            center.setLayout(new RowLayout(Orientation.HORIZONTAL));
    
            center.add(getCenter(),new RowData(1,1));
    
            return center;
        }
    
        private Component getCenter() {
            LayoutContainer container = new LayoutContainer();
            container.setLayout(new RowLayout(Orientation.VERTICAL));
    
            container.add(getTracesPanel(),new RowData(1,1,new Margins(4,4,4,4)));
    
            return container;
        }
    
        private ContentPanel getTracesPanel() {
            ContentPanel panel = new ContentPanel();
            panel.setBodyBorder(true);
            panel.setHeading("Traces");
    
            TableLayout tableLayout = new TableLayout(4);
            tableLayout.setHeight("100%");
            tableLayout.setWidth("100%");
            tableLayout.setCellVerticalAlign(VerticalAlignment.MIDDLE);
    
            panel.setLayout(tableLayout);
    
            dIWidget = new TraceChart("dI");
            avRWidget = new TraceChart("avR");
            v1Widget = new TraceChart("v1");
            v4Widget = new TraceChart("v2");
            
            panel.add(dIWidget.getChart());
            panel.add(avRWidget.getChart());
            panel.add(v1Widget.getChart());
            panel.add(v4Widget.getChart());
    
            dIIWidget = new TraceChart("dII");
            avLWidget = new TraceChart("avL");
            v2Widget = new TraceChart("v2");
            v5Widget = new TraceChart("v5");
    
            panel.add(dIIWidget.getChart());
            panel.add(avLWidget.getChart());
            panel.add(v2Widget.getChart());
            panel.add(v5Widget.getChart());
    
            dIIIWidget = new TraceChart("dIII");
            avFWidget = new TraceChart("avF");
            v3Widget = new TraceChart("v3");
            v6Widget = new TraceChart("v6");
    
            panel.add(dIIIWidget.getChart());
            panel.add(avFWidget.getChart());
            panel.add(v3Widget.getChart());
            panel.add(v6Widget.getChart());
    
            return panel;
        }
        
        class TraceChart {
    
            private Chart chart = null;
            private ListStore<DotModel> store = null;
            private LineChart line = null;
    
            private final String url = "chart/open-flash-chart.swf";
    
            public TraceChart(String leadCode) {
                store = new ListStore<DotModel>();
    
                chart = new Chart(url);
    
                ChartModel model = new ChartModel(leadCode,"font-size: 14px; font-family: Verdana; text-align: center;");
                model.setBackgroundColour("#fefefe");
                model.setLegend(new Legend(Position.TOP,true));
    
                XAxis xa = new XAxis();  
                xa.setRange(0,150,10);
                model.setXAxis(xa);
                
                YAxis ya = new YAxis();  
                ya.setRange(-800,800,100);  
                model.setYAxis(ya);
    
                line = new LineChart();
                line.setAnimateOnShow(false);
                line.setText("");
                line.setColour("#FF0000");
                LineDataProvider lineProvider = new LineDataProvider("ordonate");
                lineProvider.bind(store);
                line.setDataProvider(lineProvider);
                model.addChartConfig(line);
    
                chart.setChartModel(model);
            }
    
            public Chart getChart() {
                return chart;
            }
        }
        
        class DotModel extends BaseModel {
    
            private static final long serialVersionUID = 1L;
            
            public DotModel() {
                
            }
            
            public DotModel(Integer abscissa,Integer ordonate) {
                setAbscissa(abscissa);
                setOrdonate(ordonate);
            }
            
            public Integer getAbscissa() { return get("abscissa"); }
            public void setAbscissa(Integer abscissa) { set("abscissa",abscissa); }
            
            public Integer getOrdonate() { return get("ordonate"); }
            public void setOrdonate(Integer ordonate) { set("ordonate",ordonate); }
            
        }
    }

  4. #4
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Your Chart components are not sized. TableLayout is not sizing its children. You will need to specify sizes for the charts like:
    Code:
    chart.setSize(200, 200);

  5. #5
    Sencha User
    Join Date
    Oct 2008
    Posts
    78
    Vote Rating
    0
    sarsipius is on a distinguished road

      0  

    Default


    ok but I would like to use the whole available space
    can I use such a thing: chart.setSize("100%","100%")?

  6. #6
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    You should not use percentage sized. You need to listen to the resize event of the parent container and calculate the correct size. You will also need to implement initial sizing.

  7. #7
    Sencha User
    Join Date
    Oct 2008
    Posts
    78
    Vote Rating
    0
    sarsipius is on a distinguished road

      0  

    Default


    ok but when I use a BorderLayout or a RowLayout, I don't need to fix the chart size...

  8. #8
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    BorderLayout is sizing its children. Same for RowLayout if a RowData is specified.

  9. #9
    Sencha User
    Join Date
    Oct 2008
    Posts
    78
    Vote Rating
    0
    sarsipius is on a distinguished road

      0  

    Default


    ok thank you

    so I will use RowLayout instead of TableLayout

  10. #10
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    You can also use tablelayout. This is for example the code for initial sizing. Just resizing is missing if parent resizes.

    Code:
    chart.addListener(Events.Attach, new Listener<BaseEvent>() {
              public void handleEvent(BaseEvent be) {
                chart.setSize(chart.getParent().getOffsetWidth() / 4, chart.getParent().getOffsetHeight() / 3);
              }
            });

Similar Threads

  1. Please help with Tablelayout
    By shaluniska in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 21 Jan 2009, 1:53 PM
  2. Pb: FieldSet into a TableLayout
    By Titou in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 18 Nov 2008, 8:24 AM
  3. tableLayout problem
    By sk205 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 22 May 2008, 6:05 AM

Thread Participants: 1