Hybrid View

  1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    Leipzig, Germany
    Posts
    75
    Vote Rating
    1
    A.Rothe is on a distinguished road

      0  

    Default DualListField and labels

    DualListField and labels


    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é

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Location
    Leipzig, Germany
    Posts
    75
    Vote Rating
    1
    A.Rothe is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    2
    Vote Rating
    0
    raizor is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Location
    Leipzig, Germany
    Posts
    75
    Vote Rating
    1
    A.Rothe is on a distinguished road

      0  

    Default


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

    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

    Code:
     
    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

    Code:
     
    
    /*   
     * 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:

    Code:
      
    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é
    Last edited by A.Rothe; 12 May 2014 at 12:40 AM. Reason: Code formatting

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."