当我在DataGrid中打开多个数据详情时，右边会多出一条滑动条，请问这个问题怎么解决？
展开后需要的空间大了自然就出现滚动条了，我看在线示例也是这样的 https://demo.jmix.io/sampler/#main/1/sample?id=datagrid-details-generator
可是我在页面的总布局已经设置了 <layout expand="table" spacing="true">
就算需要的空间大了应该改变的滚动条是表格内部的滚动条而不是整个页面出现一个新的滚动条吧？
设置了 layout expand=“table”
在线示例中，展开就没有出现额外的滚动条。应该还是你的页面有什么地方导致的这个问题，方便发一下整个页面的 xml 吗
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://jmix.io/schema/ui/window"
xmlns:c="http://jmix.io/schema/ui/jpql-condition"
caption="msg://veterinarianBrowse.caption"
focusComponent="veterinariansTable">
<data readOnly="true">
<collection id="veterinariansDc"
class="io.jmix.petclinic.entity.veterinarian.Veterinarian">
<fetchPlan extends="_base"/>
<loader id="veterinariansDl">
<query>
<![CDATA[select e from petclinic_Veterinarian e]]>
</query>
</loader>
</collection>
</data>
<facets>
<dataLoadCoordinator auto="true"/>
<screenSettings id="settingsFacet" auto="true"/>
</facets>
<actions>
<action id="lookupSelectAction"
caption="msg:///actions.Select"
icon="LOOKUP_OK"
primary="true"
shortcut="${COMMIT_SHORTCUT}"/>
<action id="lookupCancelAction"
caption="msg:///actions.Cancel"
icon="LOOKUP_CANCEL"/>
</actions>
<dialogMode height="600"
width="800"/>
<layout expand="veterinariansTable" spacing="true">
<filter id="filter"
dataLoader="veterinariansDl">
<properties include=".*"/>
</filter>
<dataGrid id="veterinariansTable"
width="100%"
dataContainer="veterinariansDc">
<actions>
<action id="create" type="create"/>
<action id="edit" type="edit"/>
<action id="remove" type="remove"/>
</actions>
<columns>
<column property="firstName" id="firstName"/>
<column property="lastName" id="lastName"/>
<column id="detailGeneratorBtn">
<componentRenderer/>
</column>
</columns>
<simplePagination/>
<buttonsPanel id="buttonsPanel"
alwaysVisible="true">
<button id="createBtn" action="veterinariansTable.create"/>
<button id="editBtn" action="veterinariansTable.edit"/>
<button id="removeBtn" action="veterinariansTable.remove" stylename="danger"/>
</buttonsPanel>
</dataGrid>
<hbox id="lookupActions" spacing="true" visible="false">
<button action="lookupSelectAction"/>
<button action="lookupCancelAction"/>
</hbox>
</layout>
</window>
我用demo打开多个数据详情，也能重现这个问题
package io.jmix.petclinic.screen.veterinarian.veterinarian;
import io.jmix.petclinic.entity.veterinarian.Veterinarian;
import io.jmix.ui.UiComponents;
import io.jmix.ui.action.BaseAction;
import io.jmix.ui.component.*;
import io.jmix.ui.navigation.Route;
import io.jmix.ui.screen.*;
import io.jmix.ui.screen.LookupComponent;
import org.springframework.beans.factory.annotation.Autowired;
@UiController("petclinic_Veterinarian.browse")
@UiDescriptor("veterinarian-browse.xml")
@LookupComponent("veterinariansTable")
@Route(value = "veterinarians")
public class VeterinarianBrowse extends StandardLookup<Veterinarian> {
@Autowired
private DataGrid<Veterinarian> veterinariansTable;
@Autowired
private UiComponents uiComponents;
@Install(to = "veterinariansTable.detailGeneratorBtn", subject = "columnGenerator")
private Component detailGeneratorBtnColumnGenerator(DataGrid.ColumnGeneratorEvent<Veterinarian> columnGeneratorEvent) {
Veterinarian item = columnGeneratorEvent.getItem();
Button button = uiComponents.create(Button.class);
button.setCaption("...");
button.addClickListener(e -> {
veterinariansTable.setDetailsVisible(item, true);
});
return button;
}
@Install(to = "veterinariansTable", subject = "detailsGenerator")
private Component tableDetailsGenerator(Veterinarian bean) {
VBoxLayout mainLayout = uiComponents.create(VBoxLayout.class);
mainLayout.setWidth("100%");
mainLayout.setMargin(true);
HBoxLayout headerBox = uiComponents.create(HBoxLayout.class);
headerBox.setWidth("100%");
Label<String> infoLabel = uiComponents.create(Label.TYPE_STRING);
infoLabel.setHtmlEnabled(true);
infoLabel.setStyleName("h1");
infoLabel.setValue("Customer info:");
Component closeButton = createCloseButton(bean);
headerBox.add(infoLabel);
headerBox.add(closeButton);
headerBox.expand(infoLabel);
Component content = getContent(bean);
mainLayout.add(headerBox);
mainLayout.add(content);
mainLayout.expand(content);
return mainLayout;
}
protected Component createCloseButton(Veterinarian entity) {
Button closeButton = uiComponents.create(Button.class);
closeButton.setIcon("font-icon:TIMES");
BaseAction closeAction = new BaseAction("closeAction")
.withHandler(actionPerformedEvent ->
veterinariansTable.setDetailsVisible(entity, false))
.withCaption("");
closeButton.setAction(closeAction);
return closeButton;
}
protected Component getContent(Veterinarian entity) {
Label<String> content = uiComponents.create(Label.TYPE_STRING);
content.setHtmlEnabled(true);
content.setId("contentLabel");
StringBuilder sb = new StringBuilder();
sb.append("<b>Full name</b><br>")
.append(entity.getFirstName() + " " + entity.getLastName() + "<br><br>")
.append("<b>Country</b><br>")
.append("country"+ "<br><br>")
.append("<b>City</b><br>")
.append("city");
content.setValue(sb.toString());
return content;
}
}
controller的代码 FYI
谢谢提供的代码
这个问题是表格内的内容展开后超出表格的高度了。可以先给表格加一个样式：
<dataGrid id="veterinariansTable"
width="100%"
dataContainer="veterinariansDc"
stylename="detail-expand-grid">
然后在主题样式文件中：
.detail-expand-grid{
overflow-y: hidden;
}
这样溢出的部分被隐藏，不会影响整个页面的布局了。
已解决，感谢！