`
lixiamani
  • 浏览: 38853 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

columnlayout

阅读更多
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试Ext.layout.ColumnLayout</title>
<link rel="stylesheet" type="text/css"
	href="script/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/buttons.css" />
<script type="text/javascript" src="script/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="script/ext-all.js"></script>
<script type="text/javascript" src="script/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
function init() 
{
	var form = new Ext.form.FormPanel({
	    title: 'Form',
	    labelAligh:'right',
	    labelWidth:50,	    	    
 		frame:true, 		
	    width:600,	    
	    url:'test.jsp',	   
	    layout:'column', 
	    defaults:{
	    	layout:'form',
	    	columnWidth: .33
	    },
		items:[{
	        items:[{xtype:'textfield',fieldLabel:'姓名'}]
	    },{
	    	defaultType:"textfield",
	        items:[{fieldLabel:'居住地1'},{fieldLabel:'居住地2'}]  
	    },{
	    	defaultType:"textfield",
	        items:[{fieldLabel:'爱好1'},{fieldLabel:'爱好2'},{fieldLabel:'爱好3'}]
	    }],
	    buttons:[{
			text:'提交',
			handler:function(){ form.getForm().submit();}
		    }]
	});
	form.render("form");
}  
Ext.onReady(init);   
</script>
</head>
<body>
<br>
<br>
<center>
<div id="form"></div>
</center>
</body>
</html>
分享到:
评论

相关推荐

    ColumnLayout:用于在列中显示文本的 Android 视图。 支持跨区文本

    列布局 用于在列中显示文本的 Android 视图。 该视图将 CharSequence 作为文本并将其呈现到彼此相邻的列中。 可以调整列宽、文本大小和列之间的空白空间。 目前仅支持 fill_parent 或固定布局大小参数。...

    qml界面布局的小demo

    例如,可能有一个`ColumnLayout`用来垂直排列几个按钮,或者一个`GridLayout`展示图片网格。 让我们详细了解一下QML中的几种主要布局: 1. **ColumnLayout**: 这种布局将元素沿垂直轴排列。在处理多行内容时非常...

    示例layout.7z

    QML中的布局分为多个类型,例如ColumnLayout、GridLayout、RowLayout等,它们各自负责特定方向上的元素排列。例如: 1. ColumnLayout:沿垂直方向排列元素,从上到下,可以灵活控制每个元素的高度和宽度。 2. ...

    基于QT的表情包

    QML允许我们通过JSON风格的语法定义UI元素,如Rectangle、Image、ColumnLayout等,这些元素可以组合起来构建复杂的界面布局。例如,我们可以使用Image组件加载并显示表情图片,用ColumnLayout或RowLayout组织表情包...

    ext三列拖动

    实现这个功能的关键在于使用`Ext.grid.header.Container`类和`Ext.grid.ColumnLayout`布局。`header.Container`负责管理所有列头,而`ColumnLayout`布局则处理列的布局和拖放行为。在配置Grid时,我们需要启用`...

    一个可以自适应换行的标签列表控件

    FlowLayout是一个非官方的Android库,它允许子视图按照行优先的方式排列,而ColumnLayout则可能是专门为实现这种功能定制的布局组件。 4. **测量与布局**:在Android中,自定义布局需要重写`onMeasure()`方法来精确...

    qml实现登录界面

    在上面的代码中,我们使用ColumnLayout将各个组件垂直排列,形成一个简洁的登录表单。当用户点击“登录”按钮时,可以编写JavaScript或C++代码来处理登录逻辑,例如验证用户名和密码的有效性。 关于界面跳转,Qt ...

    ExtJS之布局详解

    - **列布局(ColumnLayout)**:使用`layout: "column"`,子组件按列排列,可通过`columnWidth`或`width`指定列宽。 - **填充布局(FitLayout)**:通过`layout: "fit"`,使子组件完全填充其容器,适用于需要...

    QML + 日历功能Demo

    9. **布局(Layouts)**:为了组织和定位界面元素,QML提供了布局管理器,如`ColumnLayout`和`RowLayout`,用于按列或行排列组件。 在压缩包文件`MyCalendar`中,可能包含了实现这些功能的QML源文件,以及可能的CSS...

    EXT中文手册8

    - **ColumnLayout**:允许多个列并排排列,各列的宽度可以由像素或百分比定义,高度则自适应内容。 - **FitLayout**:简单布局,使子组件自动填充整个容器,是默认的布局选择。 - **AnchorLayout**:允许元素相...

    qml制作的简易计算器界面源码

    计算器的界面设计通常会使用`GridLayout`或`ColumnLayout`、`RowLayout`等布局管理器来排列按钮。例如,数字按钮可能按照网格布局排列,运算符按钮则可能会单独一行或一列。每个`Button`都有其独特的ID和文本,对应...

    qt中实现fluentui超璇ui客户端,实现客户端程序的前后端分离及超炫界面

    Qt Quick的Layouts模块提供了一些方便的布局组件,如ColumnLayout和RowLayout,可以确保元素在不同屏幕尺寸下都能正确对齐和缩放。 6. **前后端分离**:在实现客户端程序的前后端分离时,通常会使用模型-视图-控制...

    QML小程序:布局元素的展示

    在实际开发中,我们还可以使用`RowLayout`和`ColumnLayout`组件,它们提供了更直观的行和列布局方式。但有时,特别是对于更复杂的自适应布局,使用anchors能提供更大的灵活性和控制权。 总之,QML的anchors系统是...

    QmlCircularProgress.7z

    例如,在一个文件下载场景中,可以将QmlCircularProgress嵌入到一个Rectangle或ColumnLayout中,通过Button触发下载,并在下载过程中更新QmlCircularProgress的value属性。 总的来说,QmlCircularProgress是QML中...

    Qml弹出菜单QmlPopMenu.7z

    这些项可能通过`ListView`或`ColumnLayout`等布局管理器进行组织,并通过`Repeater`组件动态生成。 3. **样式定制**:QmlPopMenu可能支持自定义样式,包括背景颜色、字体、边框、阴影等视觉效果。这通常通过CSS样式...

    QT QML Quick Controls2(Swipe View滑动翻页以及隐藏面板)

    ColumnLayout { // 面板内容 } } } Button { text: "打开面板" onClicked: drawer.open() } ``` 在这个例子中,我们创建了一个从左侧滑出的Drawer,并添加了一些内容。当用户点击按钮时,Drawer会被打开。 ...

    components.7z

    3. 布局组件:如`RowLayout`、`ColumnLayout`和`GridLayout`,帮助组织和排列其他组件。 4. 视图组件:如`ListView`、`GridView`,用于展示动态数据集合。 5. 动画和效果:如`Transition`、`SequentialAnimation`,...

    qml例程,供参考学习用

    - **布局管理器**:如ColumnLayout、RowLayout、GridLayout等,用于自动调整元素的排列和大小。 - **行为和动画**:Transition、SequentialAnimation、ParallelAnimation等,用于实现动态效果。 5. **QML事件和...

    Qt Quick编程之Qt Quick元素布局,适合Qt初学者

    - **ColumnLayout (列布局)** - **GridLayout (表格布局)** 这些布局管理器的工作原理与Qt Widgets中的布局管理器相似,可以根据窗口尺寸的变化自动调整元素的大小。 #### 八、总结 本文详细介绍了Qt Quick中的两...

    Qml侧边滑动菜单QmlSlidingMenu.7z

    7. **布局管理器**:如Grid、ColumnLayout或RowLayout可以帮助组织和对齐菜单项,确保在不同屏幕尺寸下保持良好的布局。 8. **触摸和鼠标事件**:为了响应用户的触摸或鼠标操作,QmlSlidingMenu需要正确处理这些...

Global site tag (gtag.js) - Google Analytics