參考資料： http://www.cnblogs.com/iamlilinfeng/archive/2012/06/18/2553627.html
1、基礎部署（helloworld）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>extjs example</title>
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href = "../js/ext/resources/css/ext-all.css"/>
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert('title','message');
});
</script>
</head>
<body>
</body>
</html>2、窗體組件(Window)
<script type="text/javascript">
Ext.onReady(function () {
var win = new Ext.Window({
title: '窗口',
width: 476,
height: 374,
html: '<div>這裏是窗體內容</div>',
resizable: true,
modal: true,
closable: true,
maximizable: true,
minimizable: true
});
win.show();
});
</script>2、表單(FormPanel)
<script type="text/javascript">
Ext.onReady(function () {
var form = new Ext.form.FormPanel({
frame: true,
title: '表單標題',
style: 'margin:10px',
html: '<div style="padding:10px">這裏表單內容</div>'
});
var win = new Ext.Window({
title: '窗口',
width: 476,
height: 374,
html: '<div>這裏是窗體內容</div>',
resizable: true,
modal: true,
closable: true,
maximizable: true,
minimizable: true,
items: form
});
win.show();
});
</script>