SenchaTouch-テーマ
Sencha Touchは、アプリケーションで使用されるいくつかのテーマを提供します。クラシックテーマの代わりにさまざまなテーマを追加して、アプリケーションに使用しているデバイスに基づいて出力の違いを確認できます。これは、次の例で説明するように、テーマのCSSファイルを置き換えるだけで実行できます。
デスクトップテーマ
最初のHelloWorldアプリケーションについて考えてみましょう。アプリケーションからの次のCSSは、デスクトップテーマに使用されます。
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css効果を確認するには、次のプログラムを試してください-
<!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.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>これにより、次の結果が生成されます-
Windowsテーマ
最初のHelloWorldアプリケーションについて考えてみましょう。次のCSSをアプリケーションから削除します-
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css次のCSSを追加して、Windowsテーマを使用します。
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css効果を確認するには、次のプログラムを試してください-
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.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.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>これにより、次の結果が生成されます-
IOSテーマ
最初のHelloWorldアプリケーションについて考えてみましょう。次のCSSをアプリケーションから削除します。
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css次のCSSを追加して、Windowsテーマを使用します
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css効果を確認するには、次のプログラムを試してください-
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.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.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>これにより、次の結果が生成されます-
IOSクラシックテーマ
最初のHelloWorldアプリケーションについて考えてみましょう。次のCSSをアプリケーションから削除します-
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css次のCSSを追加して、Windowsテーマを使用します-
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css効果を確認するには、次のプログラムを試してください-
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.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.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>これにより、次の結果が生成されます-
Androidのテーマ
最初のHelloWorldアプリケーションについて考えてみましょう。次のCSSをアプリケーションから削除します。
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css次のCSSを追加して、Windowsテーマを使用します。
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css効果を確認するには、次のプログラムを試してください-
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.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.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>これにより、次の結果が生成されます-
BlackBerryのテーマ
最初のHelloWorldアプリケーションについて考えてみましょう。次のCSSをアプリケーションから削除します。
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css次のCSSを追加して、Windowsテーマを使用します。
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css効果を確認するには、次のプログラムを試してください-
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.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.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>これにより、次の結果が生成されます-