HTML程式碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一個簡單的示例面板</title>
<link rel="stylesheet" type="text/css" href="../../css/sencha-touch.css">
<script src="../../sencha-touch.js"></script>
<script src="app-all.js"></script>
</head>

<body>
<div>Hello, World</div>
</body>
</html>

JS程式碼：

Ext.application({
    name : 'myApp',
    icon : '../../images/icon.png',
    glossOnIcon : false,
    phoneStartupScreen : '../../images/phone_startup.png',
    tabletStartupScreen : '../../images/tablet_startup.png',
    launch : function() {
        //panel以div元素的形式顯示在頁面中
        var panel = Ext.create('Ext.Panel', {
        //或var panel = Ext.create('Ext.lib.Panel', {
            fullscreen : true,    //指定面板尺寸是否自動擴充套件為瀏覽器視窗的尺寸
            id : 'myPanel',        //id將作為面板元素生成的div層的id，切記唯一性
            style : 'color:red',    //CSS樣式，當styleHtmlContent配置選項為false時，CSS樣式將被忽略，預設為true
            html : '一個簡單的示例面板'    //生成html程式碼，這段程式碼將被插入div層中
        });
        /*
            還可以
            var panel = new Ext.Panel({
               
            });
            或
            var panel = new Ext.lib.Panel({
               
            });
        */
        Ext.Viewport.add(panel);    //在這裡它可以省去
        //Viewport和panel類似，也是以div形式顯示在頁面中，但它在launch之前就被建立，且可以向它裡面新增其他元件
    }
});