GXT (Ext-GWT): ContentPanel

Question

के साथ लेआउट समस्याएं मेरे पास एक सामग्रीपैन है जो पूरी विंडो फिट बैठता है। इसमें एक शीर्ष कॉम्पोनेंट, केंद्र में एक विजेट है, और एक नीचे कॉम्पोनेंट है।

मैं लेआउट समस्याओं हो रही है, जब मैं topComponent के लिए विजेट जोड़ने की कोशिश के बाद ContentPanel एक बार गाया कर दिया गया है

public void onModuleLoad() { 

    final Viewport viewport = new Viewport(); 
    viewport.setLayout(new FitLayout()); 

    final ContentPanel contentPanel = new ContentPanel(new FitLayout()); 
    contentPanel.setHeaderVisible(false); 

    final LayoutContainer topContainer = new LayoutContainer(
      new FlowLayout()); 

    final Button buttonOne = new Button("Top:One"); 
    topContainer.add(buttonOne); 

    contentPanel.setTopComponent(topContainer); 
    contentPanel.add(new Button("Center")); 
    contentPanel.setBottomComponent(new Button("Bottom")); 

    viewport.add(contentPanel); 
    RootPanel.get().add(viewport); 

    // Later, add a second button to the topComponent ... 
    Scheduler.get().scheduleDeferred(new ScheduledCommand() { 
     @Override 
     public void execute() { 
      final Button buttonTwo = new Button("Top:Two"); 
      topContainer.add(buttonTwo); // Doesn't show up at first. 

      topContainer.layout(); // Now, buttonTwo shows up. But we have 
          // a new problem: the "Bottom" button disappears... 

      contentPanel.layout(true); // This doesn't do anything, BTW. 
     } 
    }); 
} 

इस बारे में एक दिलचस्प बात यह है, कि लेआउट में ही सही करती है, के रूप में जल्द क्योंकि मैं ब्राउज़र विंडो का आकार बदलता हूं। मैं इसे फिर से लेआउट सही ढंग से करने के लिए क्या कर सकता हूं (मैंने कई स्थानों और संयोजनों में कई layout() कॉल इत्यादि जोड़ने की कोशिश की है, लेकिन अब तक कोई भाग्य नहीं है।)

(मैं जीडब्ल्यूटी का उपयोग कर रहा हूं GXT 2.2.1 के साथ 2.1.1।)

Answer 1

इसका कारण यह है क्या हो रहा है जब आप FlowLayout में एक और घटक जोड़ते हैं तो यह आकार बदलता है, इस प्रकार अपनी ऊंचाई बढ़ाता है, जो दृश्य क्षेत्र के नीचे नीचे घटक को धक्का देता है। कोड में कुछ भी नहीं है जो केंद्र घटक को कम करता है, जैसे कि नीचे का घटक इसके मूल स्थान पर रहता है।

एक और बात यह है कि आप सामग्री के लिए FitLayout का उपयोग कर रहे हैं जिसमें 3 घटक होते हैं, एक फिटटायआउट का उपयोग कंटेनरों के लिए केवल एक घटक के साथ किया जाता है, जो उसके माता-पिता को भरना होता है।

आप निम्नलिखित पर विचार करने की जरूरत है:

1) का प्रयोग करें RowLayout, जो कैसे घटकों पर एक बेहतर नियंत्रण की अनुमति देता है

2 बाहर रखा जाना चाहिए) तय करें, जो घटक आप एक खड़ी जगह करने को तैयार हैं पर स्क्रॉल बार, क्योंकि आप गतिशील रूप से घटकों को जोड़ रहे हैं।

अपने वर्तमान आवश्यकता के लिए निम्न कोड पर्याप्त होना चाहिए:

public void onModuleLoad() { 
     final Viewport viewport = new Viewport(); 
     viewport.setLayout(new FitLayout()); 

//  final ContentPanel contentPanel = new ContentPanel(new FlowLayout()); 
//  contentPanel.setHeaderVisible(false); 

     final LayoutContainer topContainer = new LayoutContainer(
       new FlowLayout()); 

     final Button buttonOne = new Button("Top:One"); 
     topContainer.add(buttonOne); 
// contentPanel.setTopComponent(topContainer); 
     final LayoutContainer centerPanel = new LayoutContainer(new FitLayout()); 

     centerPanel.add(new Button("Center")); 
// contentPanel.add(centerPanel); 
     final LayoutContainer botPanel = new LayoutContainer(new FlowLayout()); 
     botPanel.add(new Button("Bottom")); 
//  contentPanel.setBottomComponent(botPanel); 

     final ContentPanel panel = new ContentPanel(); 
     panel.setHeaderVisible(false); 
     panel.setLayout(new RowLayout(Orientation.VERTICAL));  


     panel.add(topContainer, new RowData(1, -1, new Margins(4))); 
     panel.add(centerPanel, new RowData(1, 1, new Margins(0, 4, 0, 4))); 
     panel.add(botPanel, new RowData(1, -1, new Margins(4))); 

     viewport.add(panel, new FlowData(10)); 


     RootPanel.get().add(viewport); 

     // Later, add a second button to the topComponent ... 
     Scheduler.get().scheduleDeferred(new ScheduledCommand() { 
      @Override 
      public void execute() { 
       final Button buttonTwo = new Button("Top:Two"); 
       topContainer.add(buttonTwo); // Doesn't show up at first. 
       panel.layout(true); 
      } 
     }); 
} 

Answer 2

एक बार ब्राउज़र विजेट प्रतिपादन पूरा करता है तो फिर से करने के लिए कि घटक से नहीं चल पाएगी फिर तो हम contentPanel.layout() या contentPanel.layout (सच उपयोग कर सकते हैं) यह नए लेआउट के अनुसार विजेट को फिर से प्रस्तुत करता है। क्योंकि topComponent की onRender घटना इस बयान में लागू की जा रही है

Answer 3

यह क्या हो रहा है:

contentPanel.setTopComponent(topContainer); 

फिर, बाद में, आप एक घटक जोड़ रहे हैं: topContainer.add(buttonTwo);। जब आप विंडो का आकार बदलते हैं, तो onRender ईवेंट ट्रिगर होता है, और आपके द्वारा जोड़ा गया बटन दिखाता है। आपकी समस्या का समाधान ईवेंट topContainer के लिए ट्रिगर करना शामिल है।

दुर्भाग्य से, onRender सुरक्षित है और इसलिए आप इसे सीधे फोन नहीं कर सकते हैं: http://dev.sencha.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/LayoutContainer.html#onRender%28com.google.gwt.user.client.Element,%20int%29

आप fireEvent उपयोग करने के लिए इस ट्रिगर करना चाहते हैं जाएगा प्रोग्राम के रूप में के बजाय मैन्युअल रूप से विंडो का आकार बदलने की: http://dev.sencha.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/Component.html#fireEvent%28com.extjs.gxt.ui.client.event.EventType%29