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'
});
}
});