extjs学习笔记

原创于 2014-06-19 14:23:14 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs

web开发专栏收录该内容

2 篇文章

订阅专栏

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