extjs学习之旅day01HelloWorld

最新推荐文章于 2024-07-10 01:10:22 发布
最新推荐文章于 2024-07-10 01:10:22 发布
阅读量145 收藏
点赞数
分类专栏： extjs 文章标签： html helloworld
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39588541/article/details/78479402
版权

extjs5.0包下载
extjs的第一个测试小程序helloworld
结构图
像jQuery或者AngularJS囊括了html的声明标记，但是ext js不是这样，你只需要在我们内部类辅助系统和js中书写就够了。你可以看到像如下结构的例子：
1.Ext.create(‘Ext.Panel’, {
2. renderTo : Ext.getBody(),
3. width : 200,
4. height : 150,
5. bodyPadding : 5,
6. title : ‘Hello World’,
7. html : ‘Hello World…’
8. });
现在讲上述代码嵌入到你的app.js文件中，在index.html同级目录下新建app.js内容粘贴上去即可

如果你现在刷新页面，你可能无法看到运行结果，因为现在框架还没有被完全加载。这就是为什么我们需要在应用程序中增加launch()函数，这个函数是当页面准备结束的时候就被调用。

现在我们给app.js内容替换为如下：
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 World…’
});
}
});
index.html内容如下


Welcome to Ext JS!





Ext.onReady(function () {
Ext.MessageBox.alert('标题', 'Hello World!');
}); 

</head>  
    <body>
</body>


说明：
(1)Ext.onReady():ExtJS Application的入口…就相当于Java或C#的main函数.
(2)Ext.MessageBox.alert()：弹出对话框。
运行结果如下
结果
此外，创建窗口方法如下

test.js的内容

Ext.onReady(testWindow);

function testWindow() {

Ext.create('Ext.window.Window',{

                     title : 'Hello',

                     height : 200,

                     width : 400,

                     html : "Hellow word!"

              }).show();

};
这里写图片描述

这三个学习内容参照如下网址：
http://blog.csdn.net/sushengmiyan/article/details/38331347
http://blog.csdn.net/u013340027/article/details/38371791

qq_39588541
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJs 学习笔记 Hello World!第1/2页
10-30
首先，ExtJS的"Hello World"示例通常涉及到引入必要的库文件。在开始使用ExtJS之前，你需要从官方网站（http://extjs.com/products/extjs/download.php）下载框架的最新版本。解压后，你会看到包含adapter、build、...
ExtJS5学习之Hello World
04-23
在"ExtJS5学习之Hello World"这个主题中，我们将深入探讨如何使用ExtJS5进行基本的开发工作。 首先，ExtJS5的"Hello World"程序通常是一个简单的窗口应用，展示如何创建一个基本的ExtJS应用。在这个例子中，我们...
extjs创建项目
z1048956673的博客
08-16 139
extjs 创建项目 创建项目命令 sencha generate app --ext MyApp ./myapp // 默认使用最新版 sencha generate app --ext@6.0.0.640 MyApp ./myapp // 限定版本创建 运行上面的命令将会创建名为 MyApp 的 Ext JS 应用，应用所有的文件都放在当前目录下名为 myapp 的文件夹。默认创建两套，...
ExtJS应用架构设计（三）
网站开发初中级代码参考-转载
09-22 100
原文：http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-3/?mkt_tok=3RkMMJWWfF9wsRonuKrLZKXonjHpfsX56uolXaS2lMI%2F0ER3fOvrPUfGjI4AT8t0dvycMRAVFZl5nR9dFOOdfQ%3D%3D 在该系列文章的前两篇文章中（一、二），我们探...
ExtJs应用框架设计2
03-09 577
原文：http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/          在《ExtJS应用架构设计》一文，我们探讨了如何使用ExtJS构建一个潘多拉风格的应用程序。我们采用了MVC架构，并将它应用到一个比较复杂的用户界面，应用中带有多个视图和模型。在这篇文章中，我们将在架构的基础上继续探讨控制和模
【工作笔记】从零开始学ExtJs6（二）——登录模块
亦轩丶Javer的博客
03-03 1660
题外话 上章，已经有一个项目框架了。大概是这个样子app/store ： stores文件 app/model : models文件 classic 桌面端文件 modern 手机端文件 classic/view： viewController viewModel以及view文件 override：重写组件 sass：全局样式 app.js ： 入口 app.json : 文件属性配置 appl
extjs中动态加载机制研究
weixin_33735077的博客
07-10 89
昨天我们team对于extjs的动态加载机制做了些深入研究，这里先share下controller加载的结果。以service registry portlet为例：比如，在 liferay-portlet.xml中定义了：所以我们的js的入口点是app.js，这其中创建了Ext.application并且声明了动态加载controller:Ext.application({...
ExtJs开始之旅
08-20
本讲将带你开启ExtJS的探索之旅，通过四个部分的学习，你将逐步掌握其核心概念和实践技巧。 首先，"初识ExtJS" 部分会介绍ExtJS的基本理念和架构，包括MVC（Model-View-Controller）设计模式的应用，以及如何利用这...
ExtJS 2.0实用简明教程 之ExtJS版的Hello
10-30
本教程将带你通过一个简单的示例——创建一个“Hello, World”应用，来了解ExtJS的基础知识。 首先，我们来看一下这个最简单的ExtJS应用的HTML代码。在`hello.html`文件中，我们引入了必要的CSS和JavaScript资源，...
Extjs学习笔记之一 初识Extjs之MessageBox
12-09
我们首先从一个简单的“Hello World”示例开始，然后逐步了解 MessageBox 的主要功能。 在初识ExtJS时，创建一个新的目录`my`用于存放所有样例文件是很好的习惯，这有助于保持项目组织有序。在`Hello World`示例中...
Ext.app.Controller.onLaunch方法介绍。
看不过的黑工坊
10-17 1250
译自：http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.app.Controller-method-onLaunch onLaunch( application )TEMPLATE A template method like init, but called after the viewport is created.
extjs6.0 动态加载_ExtJs中动态加载机制研究(转）
weixin_31937605的博客
12-24 213
昨天我们team对于extjs的动态加载机制做了些深入研究，这里先share下controller加载的结果。以service registry portlet为例：比如，在 liferay-portlet.xml中定义了： 所以我们的js的入口点是app.js，这其中创建了Ext.application并且声明了动态加载controller:1.Ext.application({2.name:...
sencha中launch以及之前的活动
Yelbosh的专栏
06-27 2344
今天写程序的时候遇到一个麻烦，就是我在application中定义了一个变量，发现在controller中使用的时候报错说未定义。感觉是作用域问题。虽然别人说不加var就是全局变量我也将信将疑，但是这次我决定好好探究一下sencha touch在程序开始运行时所进行的一系列活动。 看官方文档上对application的launch过程的四个主要阶段的描述： Launching
extjs中Ext.app.Controller的init方法和onLaunch方法的执行顺序。
看不过的黑工坊
11-03 3059
答案：先执行init()方法，再执行onLaunch()方法。 例子如下： Ext.define('cdkj.controller.correct.CorrectionEndController', { extend : 'Ext.app.Controller', views : [           'correct.end.CorrectionEndListView',
[ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用
weixin_30721077的博客
08-01 236
本文地址：http://blog.csdn.net/sushengmiyan/article/details/38331347本文作者：sushengmiyan-------------------------------------------------------------------------------------------------------------------翻译来...
Extjs 4.2.0 MVC 架构
chipuou4671的博客
08-04 180
内容： 1. 文件结构 2. 创建项目 3. 定义控制器 4. 定义视图 5. 控制Grid 6. 创建Model和Store 7. 通过Model保存数据 8. 保存到服务器端 大型客户端程序通常都难写，难组织，难以维护。项目经常由于增加功能，增加开发人员而很快失控。Ext JS...
关于Ext.application的执行顺序。
看不过的黑工坊
10-10 3666
index.js如下： Ext.application({ name : 'cdkj', appFolder : base + '/static/js/com', paths : base + '/static/js/com',// 设置路径信息 controllers : [ 'login.UserLogin' ], launch : function() { alert(
通过 tomcat 让手机访问到电脑写的 html 网页
最新发布
m0_75138009的博客
07-10 690
通过 tomcat运行的文件，只要处于同一个局域网下，就可以被访问，不过我们需要将防火墙对 8080 这个端口设置允许外部访问，或直接把防火墙先暂时关闭。我们需要在在环境变量中配置 JAVA_HOME 和 CATALINA_HOME 两个变量，分别装入 jdk 和 tomcat 的路径。之前实现的 html 小项目只能在自己的电脑上展示，如果要在其他电脑或者在手机上就看不到网页了。要运行 tomcat ，我们必须要确保我们的环境变量中有 jdk。想要在手机上访问自己写的网页，我们可以借助 tomcat。
extJs+2.1学习笔记.pdf
06-15
"extJs+2.1学习笔记.pdf" 这篇学习笔记详尽地涵盖了ExtJs 2.1版本的关键概念和技术。ExtJs是一种基于JavaScript的富客户端框架，用于构建功能丰富的Web应用程序。笔记分为多个章节，逐步深入地介绍了ExtJs的核心...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值