EXT JS6 학습지 (5)
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout: 'fit',
bodyPadding: 20,
items: [{
title: 'Item 1',
html: 'Fills the container',
}]
});
});2 The hbox layout (hbox 레이아웃과column 레이아웃이 매우 비슷하기 때문에 아래 코드는 두 가지 방식이 모두 있습니다)
column 레이아웃은 폭이 부모 용기를 초과할 때 아래로 흐르고 hbox는 움직이지 않으며 독자가 스스로 비교할 수 있습니다
Ext.onReady(function() {
var win = Ext.create('Ext.Window', {
width: 700,
height: 400,
title: "Column",
defaults: {
height: 50,
width: 300
},
layout: {
type: 'column'
},
items: [{
xtype: 'panel',
title: 'Inner Panel One'
}, {
xtype: 'panel',
title: 'Inner Panel Two'
}, {
xtype: 'panel',
title: 'Inner Panel Three'
}]
});
win.show()
var win2 = Ext.create('Ext.Window', {
width: 700,
height: 400,
title: "Hbox",
defaults: {
height: 50,
width: 300
},
layout: {
type: 'hbox'
},
items: [{
xtype: 'panel',
title: 'Inner Panel One'
}, {
xtype: 'panel',
title: 'Inner Panel Two'
}, {
xtype: 'panel',
title: 'Inner Panel Three'
}]
});
win2.show()
});3 The table layout
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout: {
type: 'table',
columns: 4,
tableAttrs: {
style: {
width: '100%'
}
}
},
items: [{
rowspan: 3,
title: 'Item 1',
html: 'Item 1'
}, {
title: 'Item 2',
html: 'Item 2'
}, {
title: 'Item 3',
rowspan: 3,
html: 'Item 3'
}, {
title: 'Item 4',
html: 'Item 4'
}, {
title: 'Item 5',
html: 'Item 5'
}, {
title: 'Item 6',
html: 'Item 6'
}, {
title: 'Item 7',
html: 'Item 7'
}]
});
});이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
