- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我遇到了 vbox
的问题布局所以我创建了一个简单的例子
这说明了问题,这是我的 vbox
布局到 fit
屏幕的高度。
关于 hbox
屏幕, View 看起来像预期的那样。
然而,当我简单地改变hbox
至 vbox
左上角的所有文本覆盖。
下面给出了所有代码,它位于 Sencha Fiddle
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'SenchaFiddle',
views: ['MainView', 'HboxView', 'VboxView'],
launch: function() {
Ext.Viewport.add(Ext.create('SenchaFiddle.view.MainView'));
}
});
MainView.js
Ext.define("SenchaFiddle.view.MainView", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar'
],
config: {
tabBarPosition: 'bottom',
items: [{
title: 'hbox',
iconCls: 'action',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Hbox'
}, {
xtype: 'hbox-view'
}]
}, {
title: 'vbox',
iconCls: 'action',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Vbox'
}, {
xtype: 'vbox-view'
}]
}]
}
});
HboxView.js
Ext.define("SenchaFiddle.view.HboxView", {
extend: 'Ext.Container',
xtype: 'hbox-view',
config: {
style: 'background-color: #0f0',
layout: 'hbox',
items: [{
xtype: 'panel',
html: 'baz',
style: 'background-color: #ff0',
flex: 1
}, {
xtype: 'panel',
html: 'foo',
style: 'background-color: #f00',
flex: 2
}, {
xtype: 'panel',
html: 'bar',
style: 'background-color: #fff',
flex: 3
}]
}
});
VboxView.js
Ext.define("SenchaFiddle.view.VboxView", {
extend: 'Ext.Container',
xtype: 'vbox-view',
config: {
style: 'background-color: #0f0',
layout: 'vbox',
items: [{
xtype: 'panel',
html: 'baz',
style: 'background-color: #ff0',
flex: 1
}, {
xtype: 'panel',
html: 'foo',
style: 'background-color: #f00',
flex: 2
}, {
xtype: 'panel',
html: 'bar',
style: 'background-color: #fff',
flex: 3
}]
}
});
最佳答案
问题出在 MainView.js 结构中。
您的 vbox 包装容器没有布局:
{
title: 'vbox',
iconCls: 'action',
layout: card, // or fit, etc. :)
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Vbox'
},
{
xtype: 'vbox-view'
}
]
},
Ext.define("SenchaFiddle.view.VboxView", {
extend: 'Ext.Container',
xtype: 'vbox-view',
config: {
style: 'background-color: #0f0',
layout: 'vbox',
title: 'Vbox', // this is better place for title and iconCls :)
iconCls: 'action',
items: [
// title bar is here :)
{
type: 'titlebar',
docked: 'top',
title: 'Navigation',
},
{
xtype: 'panel',
html: 'baz',
style: 'background-color: #ff0',
flex: 1
},
{
xtype: 'panel',
html: 'foo',
style: 'background-color: #f00',
flex: 2
},
{
xtype: 'panel',
html: 'bar',
style: 'background-color: #fff',
flex: 3
}
]
}
});
Ext.define("SenchaFiddle.view.MainView", {
extend: 'Ext.tab.Panel',
// ...
config: {
tabBarPosition: 'bottom',
items: [
{xtype: 'hbox-view'}, // very nice code :)
{xtype: 'vbox-view'},
]
}
});
关于sencha-touch - 选项卡面板中的 Vbox 布局问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10757088/
VBox classBox = new VBox(); className = new Text("defaultClass"); classBox.setAlignment(Pos.CENTER);
VBox classBox = new VBox(); className = new Text("defaultClass"); classBox.setAlignment(Pos.CENTER);
JavaFX GridPane、VBox、HBox 是否有预定义的 CSS 类? 我在 CSS reference 中找不到任何内容,但默认组件没有定义似乎很奇怪。 如果没有预定义的类,有没有比在所有
我正在尝试为我的 JavaFX 项目添加拖放功能。它有点有效,但并不是同时有效 VBox questions = new VBox(); questions.getChildren().add(cre
我已经编写了使用 VBox 作为布局的代码。我希望按钮出现在顶行,然后绘制 2 条水平线,在 400x400 场景中应位于 y=200 和 300 处。但输出显示了我给出的不同坐标处的线条。 我知道这
如何使用 JavaFX 和 VBox 在一行中包含多个元素。假设我需要一个 TextField 和一个 Button。 最佳答案 将它们放入HBox中,并将HBox放入VBox中。 VBox vbox
对于我正在开发的程序,我决定创建自己的“命令提示符”,这意味着通常发送到控制台的错误消息将发送到它进行调试。以前,当唯一的功能是显示文本时,一切都工作正常。然而现在,当我将根设为 VBox 而不是 S
我正在基于 JavaFX 的游戏中创建弹出确认消息,并试图弄清楚布局是如何工作的。我的 PopUp 类扩展了 StackPane,其构造函数如下所示: public PopUp (String str
我正在创建一个视频分析系统。目前,我正在使用 JavaFX 处理播放器本身。在我的播放器旁边,我想要一个在分析过程中放置的标记列表(见图)。 我想要什么: 但它又重叠了... 直到它变成这样: 列
我在 ScrollPane 中有一个 JavaFx VBox: VBox container = new VBox(); container.setAlignment(Pos.CENTER); ...
我使用 VBox 提供 3 个输入字段。 它们都是这样设置的: tf = new TextField(); tf.setPrefWidth(Double.MAX_VALUE); sp = new Sp
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 关闭 10 年前。 Improve th
我无法在 Java 代码中将 VBox 中的 Button 居中!我使用 Scene Builder 创建了一个 SplitPane,其中左侧的 AnchorPane 有一个位于 VBox 中心的 B
我有几个 UI 元素,我想垂直堆叠在面板的中心,所有元素都在中心的左边缘对齐。我试着用 VBox 来做这件事,它一直有效,直到我添加了一个文本太长的项目;它总是用省略号截断文本,我无法让它将文本换行到
我正在做一个涉及复选框数组的项目。但是当我在 VBox 中添加所有复选框时遇到问题。下面是我的屏幕截图 无法查看其他复选框。 这是我的复选框代码 public void initializeSenat
我有一个包含两行的 vbox 布局。第一行有一个菜单栏,第二行有一个 TabPane 布局。 Vbox 布局的第二行可见,第一行不出现。我提供了 fxml 以及渲染窗口的屏幕截图。我认为菜单栏应该位于
我正在尝试构建一个 javafx 修剪器,我已经做到了,但是当我在 ImageViews 上添加 setOnMouseClicked 时,我制作的修剪器隐藏了这些节点,因此未处理该操作。 我已经设置了
问题:我对 vbox 和 gridpane 之间有一个困惑。通常当你可以使用 vbox 时,你也可以使用 1 列和 n 行的 gridPane,所以我不确定何时使用它们和区别。 事实: 我知道网格 P
我在向 fxml 文件静态添加标签时遇到一些问题。这是我尝试过的,但它不起作用,placeholder 以红色突出显示。我基本上想要一个 ListView 的标题/标题。
我试图将 Hbox 放置在 Vbox 中,这意味着每个 Hbox 应该是一行,但我得到了这个结果 标签的名字及其对应的文本框应为一行,姓氏应为另一行。 我该怎么做才能使每个水平盒成为垂直盒中的单独行。
我是一名优秀的程序员,十分优秀!