参考资料: 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>