在GXT4.0中，Gxt组合框选择箭头未正确对齐

我已经将GXT从3.0升级到4.0，并且在图像中显示了combox box箭头

它在GXT3.0中工作正常，在GXT4.0中也可以在GWT调试模式下正常工作。

我用以下链接准确地创建了组合框。 http://examples.sencha.com/gxt/4.0.0/#ExamplePlace:comboboxstyled

**I am using gray theme.** 

gxt-all.css文件

下面的CSS我已经应用到组合框，但我不确定它是否适用。

.x-combo-list {
    border-color:#98c0f4;
    background-color:#ddecfe;
    font:normal 12px tahoma, arial, helvetica, sans-serif;
}

.x-combo-list-inner {
    background-color:#fff;
}

.x-combo-list-hd {
    font:bold 11px tahoma, arial, helvetica, sans-serif;
    color:#15428b;
    background-image: url(../images/default/layout/panel-title-light-bg.gif);
    border-bottom-color:#98c0f4;
}

.x-resizable-pinned .x-combo-list-inner {
    border-bottom-color:#98c0f4;
}

.x-combo-list-item {
    border-color:#fff;
}

.x-combo-list .x-combo-selected{
    border-color:#a3bae9 !important;
    background-color:#dfe8f6;
}

.x-combo-list .x-toolbar {
    border-top-color:#98c0f4;
}

.x-combo-list-small {
    font:normal 11px tahoma, arial, helvetica, sans-serif;
}

/////////////////////////////////////////////////////////////////

**CustomComboBoxView.css file**

@eval borderColor com.sencha.gxt.core.client.resources.ThemeStyles.get().borderColor();

.view {
  background-color: white;
  border: 1px solid borderColor;
  -moz-outline: none;
  outline: 0 none;
  position: relative;
}

@if (is("ie6"))  {
  .view {
    overflow: auto; 
  }
} @else {
  .view {
    overflow-y: auto; 
  }
}

.item {
   border: 1px solid #FFFFFF;
    font-family: tahoma, arial, helvetica, sans-serif;
    font-size: 12px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
    overflow: auto;
    padding: 2px;
    white-space: normal;
    cursor: pointer;
}

.over {
  gwt-image: 'selectedBackground';
  height: auto;
  border: 1px dotted #DDDDDD !important;
  cursor: pointer;
}

.sel {
  background: none repeat scroll 0 50% #DFE8F6;
  border: 1px dotted #A3BAE9 !important;
  cursor: pointer;
}

////////////////////////////////////////////////////

EntryPointSample Class file

      public interface CustomListViewResources extends
        ListViewDefaultResources {

             @Override
            @Source({"com/test/sample/clients/gwt/client/panel/CustomComboBoxView.css"})
          CustomListViewStyle css();

         }

         interface CustomListViewStyle extends
         ListViewDefaultAppearance.ListViewDefaultStyle { }


        private final SampleProperties sampleProperties = GWT.create(SampleProperties.class);
        private ComboBox<Sample> SampleComboBox;


        final ListViewDefaultResources resources = GWT.create(CustomListViewResources.class);


        final ListViewDefaultAppearance<Sample> appearance = new ListViewDefaultAppearance<Sample>(resources);

        final ListView<Sample, String> listView =
                        new ListView<Sample, String>(sampleLocationListStore, sampleProperties.name(),
                        appearance);

        sampleComboBox =
                        new ComboBox<Sample>(sampleLocationListStore, sampleProperties.nameLabel(), listView);
        sampleComboBox.setWidth(150);
        sampleComboBox.setTypeAhead(true);

        sampleComboBox.setTriggerAction(ComboBoxCell.TriggerAction.ALL);

        sampleComboBox.addSelectionHandler(new SelectionHandler<Sample>() {
            @Override
            public void onSelection(SelectionEvent<Sample> companySelectionEvent) {


              }
            });

        testDropdownLabel = new FieldLabel(sampleComboBox, constants.labelTest());
        testDropdownLabel.setLabelWidth(50);
        widget.add(testDropdownLabel);

链接地址: http://www.djcxy.com/p/64415.html

上一篇: Gxt combo box selection arrow is not properly aligned in GXT4.0

下一篇: Multi select combo box feature in gxt