ExtJs5入门_HelloWorld

最新推荐文章于 2021-02-21 05:13:03 发布

weixin_30747253

最新推荐文章于 2021-02-21 05:13:03 发布

阅读量92

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fkeyta/p/9518653.html

版权

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

转载于:https://www.cnblogs.com/fkeyta/p/9518653.html

weixin_30747253

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs5入门_HelloWorld

ExtJS5是一个JavaScript应用程序框架,它为您提供了一整套工具用于创建跨平台的应用程序。Ext JS 5支持所有现代浏览器,IE8的最新版本以及Chrome和介于两者之间的。Ext JS是面向对象的、基于类库的。第一个ExtJs案例：HelloWorld: ①、下载extjs类库 ②、编写html文件 index.html...
复制链接

扫一扫