ExtJS5是一个JavaScript应用程序框架,它为您提供了一整套工具用于创建跨平台的应用程序。Ext JS 5支持所有现代浏览器,IE8的最新版本以及Chrome和介于两者之间的。Ext JS是面向对象的、基于类库的。
第一个ExtJs案例：
HelloWorld:
①、下载extjs类库
②、编写html文件 index.html
③、编写js代码 app.js
index.html
<html>
<head> <title>Welcome to Ext JS!</title> <link rel="stylesheet" type="text/css" href="ext-5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"> <script type="text/javascript" src="ext-5.0.0/build/ext-all.js"></script> <script type="text/javascript" src="ext-5.0.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script> <script type ="text/javascript" src="app.js"></script> </head> <body></body></html>
app.js
Ext.application({
name: "ExtJSTest", launch: function(){ Ext.create('Ext.Panel', { renderTo : Ext.getBody(), width : 200, height : 150, bodyPadding : 5, title : 'Hello World', html : 'Hello <b>World</b>...' }); }});
了解ExtJs
我们先来定义一个类
定义一个panel类如下:
Ext.define(
'MyApp.MyPanel', { extend : 'Ext.Panel', title : 'Hello World', html : 'Hello <b>World</b>...' });你可以看到，我们定义了一个东西叫做MyPanel，它继承于ext js panel类 现在我们可以使用这个模板来创建一个新的对象。
我们需要两个面板，他们之间的唯一区别就是内容不一样，我们就可以创建两个实例，现在你的app.js内容应该像下面这样：
Ext.define(
'ExtJSTest.MyPanel', { extend : 'Ext.Panel', title : 'Hello World', html : 'Hello <b>World</b>...' });Ext.application({ name: "ExtJSTest", launch: function(){ Ext.create('ExtJSTest.MyPanel', { renderTo : Ext.getBody(), title : 'MyFirst Panel', html : 'MyFirst Panel' }); Ext.create('ExtJSTest.MyPanel', { renderTo : Ext.getBody(), title : 'MySecend Panel', html : 'MySecend Panel' }); }});