正文 

当前位置： 首页 > 问答 >

Sencha Touch - 在面板中水平放置而不是垂直放置的标签

     2023-02-26     25

关键词：

【中文标题】Sencha Touch - 在面板中水平放置而不是垂直放置的标签【英文标题】：Sencha Touch - Labels horizontally placed instead of vertically in a panel 【发布时间】：2011-12-05 15:31:47 【问题描述】：

我想在垂直布局中放置两个标签、一个文本字段和一个按钮。 但是这两个标签是水平放置的，而文本字段和按钮是垂直放置的。

标签1 |标签 2 |文本字段/按钮

我尝试了各种布局选项，但没有帮助。我的布局是否存在根本性错误？ 有什么建议吗？

面板代码：

Ext.define('MyApp.view.Demoview', 
extend: 'Ext.Panel',
xtype: 'demoview',
fullscreen : false,
config: 
    items : [ 
        docked : 'top',
        xtype : 'toolbar',
        title : 'A title'
    , 
        xtype : 'panel',
        layout : 
            type : 'vbox',
            pack : 'center',
            align : 'center'
        ,
        defaults : 
            margin : 5
        ,
        items : [ 
            xtype : 'label',
            styleHtmlContent: true,
            height:'100px',
            html : 'label 1'
        , 
            xtype: 'label',
            styleHtmlContent: true,
            height: '100px',
            html: 'label 2'
        , 
            xtype : 'textfield',
            label: 'Name',
            required: true
        , 
            xtype : 'button',
            itemId : 'demoButton',
            text : 'Button',
            ui : 'round'
        ]
     ]
);

它们嵌套在具有卡片布局的容器中：

Ext.define('MyApp.view.Main', 
extend : 'Ext.Container',
requires : [ 'MyApp.view.Someview', 'MyApp.view.Demoview'],
config : 
    fullscreen : false,
    layout : 'card',
    activeItem : 0,
    items : [ 
        layout : 'fit',
        xtype : 'somview'
    
        layout : 'fit',
        xtype : 'demoview'
     
]
);

【问题讨论】：

【参考方案1】：

你可以使用

labelAlign:'top'

在文本字段上方垂直对齐标签的属性。

【讨论】：

您好，谢谢您的回复。文本字段及其标签完美运行。问题出在 xtype 上：'label'！它们水平显示为大的水平框，而不是垂直显示在文本字段和按钮上方。【参考方案2】：

更新到 Sencha Touch 2 Developer Preview 3 解决了我的问题。

【讨论】：

Sencha Touch 在导航栏中水平居中搜索字段

】SenchaTouch在导航栏中水平居中搜索字段【英文标题】：SenchaTouchHorizontallyCenterSearchFieldinNavigationBar【发布时间】：2012-04-1322:53:13【问题描述】：这个问题非常愚蠢，我可能偶然发现了一个错误，但我需要在SenchaTouch的导航栏中将... 查看详情

如何在相同高度的材质ui中水平放置卡片

】如何在相同高度的材质ui中水平放置卡片【英文标题】：howtoplacecardshorizontallyinmaterialuiwithsameheight【发布时间】：2021-06-0200:59:27【问题描述】：我是材料ui的新手。我希望图像中的所有这些卡片都具有相同的高度，但无法做到：... 查看详情

我如何在sencha touch中垂直滚动面板

】我如何在senchatouch中垂直滚动面板【英文标题】：Howcaniverticallyscrollpanelinsenchatouch【发布时间】：2017-05-0409:57:20【问题描述】：以下是我的视图，除了“betsFooter”面板之外，我正在尝试垂直滚动。在这个视图中，我在“activeBetO... 查看详情

Sencha Touch，嵌套列表内的停靠面板

】SenchaTouch，嵌套列表内的停靠面板【英文标题】：SenchaTouch,dockpanelinsideNestedList【发布时间】：2011-08-1412:32:41【问题描述】：我有一个带有嵌套列表的SenchaTouch应用程序。nestedList自动创建自己的工具栏。我想在工具栏下方停靠一... 查看详情

sencha touch :: 如何在 iFrame 中创建用于网站预览的面板

】senchatouch::如何在iFrame中创建用于网站预览的面板【英文标题】：senchatouch::howtocreateapanelforwebsite-previewinsideiFrame【发布时间】：2011-05-2613:41:54【问题描述】：我需要在senchatouch中允许一些网站预览。我看到了两种不同的可能性：... 查看详情

在 Sencha Touch MVC 应用程序中更新子面板

】在SenchaTouchMVC应用程序中更新子面板【英文标题】：UpdatingChildPanelsinSenchaTouchMVCApp【发布时间】：2011-08-3001:39:08【问题描述】：开发从json存储中提取数据的SenchaTouchMVC应用程序（设置为从Wordpress博客中提取内容的数据库）。一... 查看详情

Sencha Touch 2：在选项卡面板中创建嵌套列表

】SenchaTouch2：在选项卡面板中创建嵌套列表【英文标题】：SenchaTouch2:CreatingaNestedListinsideatabpanel【发布时间】：2012-06-2615:37:34【问题描述】：我现在已经尝试了上千种不同的方式来完成这项工作，SenchaTouch文档远非清晰或有帮助... 查看详情

在sencha touch 2中滚动面板时的文本字段焦点问题

】在senchatouch2中滚动面板时的文本字段焦点问题【英文标题】：Textfieldfocusissuewhilescrollingthepanelinsenchatouch2【发布时间】：2013-03-0709:06:56【问题描述】：我正在开发一个CordovaiOS应用程序(iPad)。我有一个表单面板，里面有一些煎茶... 查看详情

在 Sencha Touch 2 中显示加载程序而不阻塞用户

】在SenchaTouch2中显示加载程序而不阻塞用户【英文标题】：ShowloaderwithoutblockingtheuserinSenchaTouch2【发布时间】：2015-02-1305:20:43【问题描述】：在我的SenchaTouch应用程序中，我想显示加载器，但我不想阻止用户与应用程序交互。是否... 查看详情

如何使用 Sencha Touch 2 获取表单面板和禁用选择字段

】如何使用SenchaTouch2获取表单面板和禁用选择字段【英文标题】：howtogetformpanelanddisableselectfieldswithSenchaTouch2【发布时间】：2012-10-0613:31:59【问题描述】：我正在尝试在应用启动时禁用某些选择字段。我的主要导航是一个选项卡... 查看详情

Sencha Touch 2：面板中不显示列表

】SenchaTouch2：面板中不显示列表【英文标题】：SenchaTouch2:ListdoesnotdisplayinPanel【发布时间】：2012-05-3016:04:21【问题描述】：我正在SenchaTouch2中开发MVC应用程序，但无法在嵌套的panel中显示列表。应用程序的结构有一个主视图，它... 查看详情

如何在 VBOX 布局中显示 Sencha Touch 列表？

】如何在VBOX布局中显示SenchaTouch列表？【英文标题】：howdoimakeaSenchaTouchlistdisplayinaVBOXlayout?【发布时间】：2012-04-3004:54:16【问题描述】：我有一个布局设置为vbox的主面板。我想在面板中添加两个单独的列表。我希望这两个列表垂... 查看详情

在 Sencha Touch 中设置 numberfield 的值而不触发“change”事件

】在SenchaTouch中设置numberfield的值而不触发“change”事件【英文标题】：Setvalueofnumberfieldwithoutfiring"change"eventinSenchaTouch【发布时间】：2013-06-0415:58:22【问题描述】：我在SenchaTouch中有一个数字字段和一个列表。当我单击列... 查看详情

sencha touch 2：轮播面板之一内的卡片布局

】senchatouch2：轮播面板之一内的卡片布局【英文标题】：senchatouch2:cardlayoutwithinoneofthepanelofacarousel【发布时间】：2012-08-0808:28:03【问题描述】：我在这里尝试做的是在轮播面板中使用卡片布局。但是创建卡片布局并不常见，而轮... 查看详情

Sencha Touch Panel 渲染问题

】SenchaTouchPanel渲染问题【英文标题】：SenchaTouchPanelrenderingissue【发布时间】：2011-10-0113:20:39【问题描述】：我们正在SenchaTouch中开发一个面向平板电脑的应用程序，其中多个List对象并排围绕着一个面板，所有这些都在我们的Viewp... 查看详情

Sencha Touch 2 - 旋转木马仅在构建后卡在第一个面板上

】SenchaTouch2-旋转木马仅在构建后卡在第一个面板上【英文标题】：SenchaTouch2-CarouselStuckonFirstPanelOnlyAfterBuild【发布时间】：2012-09-2600:32:33【问题描述】：在我通过senchasdk构建应用程序之前，我在面板中有一个轮播，它显示和工作... 查看详情

Sencha Touch 2 - 选项卡式面板中的轮播

】SenchaTouch2-选项卡式面板中的轮播【英文标题】：SenchaTouch2-CarouselinTabbedPanel【发布时间】：2012-08-0323:24:55【问题描述】：我想查看2个v-box位于两个不同选项卡中的视图。我的代码没有显示错误，但唯一显示在没有选项卡的选项... 查看详情

sencha touch :: 为视口动态创建面板

】senchatouch::为视口动态创建面板【英文标题】：senchatouch::dynamicallycreatepanelsforviewport【发布时间】：2012-01-2610:03:52【问题描述】：我有一个MVC风格的煎茶触摸应用程序，我通常使用Ext.apply(app.views,loginPage:newapp.views.Login(),mainView:new... 查看详情