extjs开发实例一_extjs 小项目-CSDN博客

本文链接：https://blog.csdn.net/ldy889/article/details/100008043

首先从helloworld开始吧。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>app</title>
  	<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
        <!-- ENDLIBS -->

    <script type="text/javascript" src="ext-all.js"></script> 
   
</head>
<body>
 
<input type="button" id="show-btn" value="Hello World" />  

<div id="hello-win" class="x-hidden">
    <div class="x-window-header">Hello Dialog</div>
    <div id="hello-tabs">
        <!-- Auto create tab 1 -->
        <div class="x-tab" title="Hello World 1">
            <p>Hello...</p>
        </div>
        <!-- Auto create tab 2 -->
        <div class="x-tab" title="Hello World 2">
            <p>... World!</p>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
 

		Ext.onReady(function(){
		    var win;
		    var button = Ext.get('show-btn');

		    button.on('click', function(){
		        // create the window on the first click and reuse on subsequent clicks
		        if(!win){
		            win = new Ext.Window({
		                applyTo     : 'hello-win',
		                layout      : 'fit',
		                width       : 500,
		                height      : 300,
		                closeAction :'hide',
		                plain       : true,
		                items       : new Ext.TabPanel({
		                    applyTo        : 'hello-tabs',
		                    autoTabs       : true,
		                    activeTab      : 0,
		                    deferredRender : false,
		                    border         : false
		                }),

		                buttons: [{
		                    text     : 'Submit',
		                    disabled : true
		                },{
		                    text     : 'Close',
		                    handler  : function(){
		                        win.hide();
		                    }
		                }]
		            });
		        }
		        win.show(button);
		    });
		});


</script>