extjs学习之旅day01HelloWorld

来源：互联网发布：windows server个版本编辑：程序博客网时间：2024/05/27 20:09

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

阅读全文

0 0