Sencha-touch-components
提供：Dev Guides
Sencha Touch-コンポーネント
成分
通常、コンポーネントはSencha Touchで作業できるものです。 それは結合されてアプリケーション全体を作るアプリケーションの最小部分です。 Sencha Touchのすべての要素はコンポーネントです。 コンポーネントには、表示または非表示にできる機能、折りたたみ可能な機能、ページにレンダリングできる機能などのさまざまな機能があります。
容器
Sencha Touchのコンテナもコンポーネントですが、その中に別のコンポーネントを追加できる特別なタイプのコンポーネントです。 名前が示すように、コンテナは内部にさまざまなコンポーネントを含むコンポーネントです。 コンテナには、コンポーネントのすべての機能に加えて、コンポーネントの追加や削除、レイアウトの決定など、さまざまな機能があります。
コンテナの作成
構文
Ext.create('Ext.Panel', {
html: 'About this app'
});例
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" >
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript"> Ext.application({
name: 'Sencha', launch: function() {
Ext.create('Ext.Panel', {
fullscreen: true,layout: 'hbox',defaults: {
flex: 1
},
items: {
html: 'First Panel',style: 'background-color: #5E99CC;'
}
});
}
});</script>
</head>
<body>
</body>
</html>これにより、次の結果が生成されます–
コンポーネントを追加する
構文
container.add(component);コンテナにコンポーネントを追加する例
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" >
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var aboutPanel = Ext.create('Ext.Panel', {
html: 'Newly added'
});
//this is the Panel we'll be adding to
var mainPanel = Ext.create('Ext.Panel', {
fullscreen: true, layout: 'hbox', defaults: {
flex: 1
},
items: {
html: 'First Panel',
style: 'background-color: #5E99CC;'
}
});
//now we add the first panel inside the second
mainPanel.add(aboutPanel);
}
});
</script>
</head>
<body>
</body>
</html>これにより、次の結果が生成されます–
コンテナの非表示と表示
構文
container.hide();
container.show();コンテナを破壊する
構文
container.destroy();