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

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 : '姓名'

}]

}]

});

});

效果图：

听说，打赏我的人最后都找到了真爱。