DualListField and labels

[A.Rothe]

Hi,

I need a label above the "from" and "to" list, but I only see the label of the MultiField object. Is it possible to display the sub-labels too?

Thank you
André

[A.Rothe]

I have created a subclass, which calls fields.clear() inside the constructor. So I can add new widgets to the underlying MultiField. In my application I need a horizontal dual list field, so I have added every ListField to a new VerticalPanel, which have also a LabelField on top. Every VerticalPanel is wrapped by an AdapterField, so I can add one Adapterfield for the from-list, one for the buttonbar and one for the to-list again.

To calculate the height of the DualListField I have added a Resize listener, which calculates the height of the AdapterFields depending on the parent Panel or Window. To calculate the list-field height substract the maximum height of the from/to label.

The buttonbar is always displayed on top of the MultiField, but you can add some data with buttonAdapter.setData("layoutData", new TableData()) to move the buttons to the middle of the ListFields. The onRender() method of MultiField will use these data.

[raizor]

I would like to see how you calculate the height.
thanks

[A.Rothe]

I have used Orientation.HORIZONTAL only. In this case I have set the height and width with the following code:

 
@Override         
protected void onResize(int width, int height) {                 
   super.onResize(width, height);                  
   if (orientation == Orientation.HORIZONTAL) {                         
      int w = (width - buttonAdapter.el().getParent().getWidth()) / 2;
      w -= (fields.size() * spacing);                          

      fromAdapter.setSize(w, height);                         
      toAdapter.setSize(w, height);                          

      int h = Math.max(fromLabel.getHeight(), toLabel.getHeight());                              
      fromField.setSize(w, height - h);                         
      toField.setSize(w, height - h);                 
   }         
}

buttonAdapter is defined within the constructor as

 
buttonAdapter = new AdapterField(buttonBar); 
buttonAdapter.setData("layoutData", new TableData(HorizontalAlignment.CENTER, VerticalAlignment.MIDDLE));

I think there were also some modifications on the parent panel. The panel is a FormPanel, which doesn't display a label. But the panel moves the child elements a little bit to the right and bottom.

So I have added two rules in the CSS

 

/*   
 * this is for FormPanels, which contain a DualListField (as MultiField) without a label,  
 * GXT doesn't display the label but there is a padding below or behind the label, which moves  
 * the MultiField content some pixel to the bottom or right   
 */ 
.no-padding-label .x-form-label-top .x-form-item.x-hide-label .x-form-element {         
   padding-top: 0px; 
}  

/*   
 * this is for FormPanels, which should not have automatic space between the fields   
 */ 
.no-margin-bottom .x-form-item {         
   margin-bottom: 0px; 
}

In the constructor of the panel I have used the rules:

  
private static final int LABEL_WIDTH = 120; 
public TrialConcurrentEditPanel() {                  
   LOGGER.fine("Creating TrialConcurrentEditPanel...");                  
   addStyleName("no-margin-bottom");                 
   addStyleName("no-padding-label");                  

   // disable default field width                 
   setFieldWidth(-1);                 
   setLabelWidth(LABEL_WIDTH);                 
   setLabelAlign(LabelAlign.TOP);                  

   add(getConcurrentDualList());                 
   addListener(Events.Resize, getResizeListener());         
}  

private Listener getResizeListener() {                 
   return new Listener() {                         
      @Override                         
      public void handleEvent(BoxComponentEvent be) {                                 
         int height = be.getHeight() - (2 * TrialConcurrentEditPanel.this.getPadding());
         int width = be.getWidth() - (2 * TrialConcurrentEditPanel.this.getPadding());                                      getConcurrentDualList().setSize(width, height);                         
      }                 
   };         
}

The ResizeListener calculates the current panel size without padding, to get the exact space for the DualField. Hope it helps! André

[alyna19]

Does anyone here know how to add an editor using a DualListField?
BTW, I am using gxt