Extjs表单元素实现横向、多列布局，最简单的代码示例

最新推荐文章于 2017-08-29 22:33:06 发布

涂有

最新推荐文章于 2017-08-29 22:33:06 发布

阅读量1.5w

点赞数 2

分类专栏： html/css/js 文章标签： extjs

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/ty497122758/article/details/32161401

版权

html/css/js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Ext.onReady(function(){

	Ext.create('Ext.form.Panel',{
	
		title : '横向布局测试',
		height : 130,
		width : 550,
		frame : true,
		layout : 'form',
		renderTo : Ext.getBody(),
		items : [{
			
			layout : 'column',
			frame : true,
			items : [{
				
				xtype : 'textfield',
				fieldLabel : '姓名',
				name : 'name'
			},{
				
				xtype : 'textfield',
				fieldLabel : '姓名',
				name : 'name'
			}]
		},{
			
			layout : 'column',
			frame : true,
			items : [{
				
				xtype : 'textfield',
				fieldLabel : '姓名'
			},{
				
				xtype : 'textfield',
				fieldLabel : '姓名'
			}]
		}]
	});
});

效果图：

如果要去掉每行的边框，只需加上一个属性：

Ext.onReady(function(){

    Ext.create('Ext.form.Panel',{
    
        title : '横向布局测试',
        height : 130,
        width : 550,
        frame : true,
        layout : 'form',
        renderTo : Ext.getBody(),
        items : [{
            
            layout : 'column',
            frame : true,
            baseCls : 'my-panel-no-border',  //去掉边框
            items : [{
                
                xtype : 'textfield',
                fieldLabel : '姓名',
                name : 'name'
            },{
                
                xtype : 'textfield',
                fieldLabel : '姓名',
                name : 'name'
            }]
        },{
            
            layout : 'column',
            frame : true,
            baseCls : 'my-panel-no-border',  //去掉边框
            items : [{
                
                xtype : 'textfield',
                fieldLabel : '姓名'
            },{
                
                xtype : 'textfield',
                fieldLabel : '姓名'
            }]
        }]
    });
});

效果图：