Exjs 入门篇

看到Extjs如此绚丽的界面，突然有种莫名的冲动来学习下！

Extjs是从yui-ext发展来的一套ajax控件，是一套完整的富客户端解决方案，也因为功能完整，ext-all.js有400多k（最新的extjs3.2.0 有600多k），以为是基于js和css的功能实现，对客户端机器性能也有一定的要求，比如对ie6以下版本的不支持。

　　下面开始Extjs的学习（本人也是刚学，希望大家提出文中出现的问题）。"Hello World"是当今程序语言经典的入门程序，很多教科书上都是用"Hello World"来引领我们进入精彩的程序世界。

　　在进行是用Extjs框架开发应运程序前，必须将Extjs资源包导入到你的项目中来，最新的Extjs开发包版本为3.2.0，在Extjs官方网站可以进行下载，网址为www.extjs.com/download。下载完成后，进行解压，解压后的结构图如下所示。

　　下载了Extjs开发包后，我们就可以可以Extjs的开发了，首先我们打开VS2008，新建一个工程，我就取名为Com.KimiYang.Web。建完工程后，将刚才解压后的Extjs开发包拷到到项目中来。目录adapter，resources和文件ext-all.js必须拷到项目中来。我在工程的根目录新建了文件夹Extjs3.2.0，然后将以上文件夹及文件拷到文件夹Extjs3.2.0来。目录结构如下图所示：

　　现在我们开始写"Hello World"程序，我们直接写在页面Default.aspx上面了，打开Default.aspx页面。要使用Extjs开发应用程序，仅仅将Extjs开发导入到项目是不够的，还需要在页面中引用相应文件。最核心的文件有以下3个：resources/css/ext-all.css（控制界面样式，不引入次样式，将直接导致页面混乱），adapter/ext/ext-base.js和ext-all.js（这两个文件是包含了Extjs的所有功能），除了以上3个文件必须引入外，对于中国的开发者还必须引入一个文件：Extjs3.2.0/src/locale/ext-lang-zh_CN.js（中文翻译）。以上几个文件引用时有先后次序的，不然将导致程序出错。以下为"Hello World"代码，当用户打开页面时候，将弹出一个对话框，显示Hello Wold。


代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Com.KimiYang.Web._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<link href="Extjs3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="Extjs3.2.0/resources/css/xtheme-gray.css" rel="stylesheet" type="text/css" />
<script src="Extjs3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Extjs3.2.0/ext-all.js" type="text/javascript"></script>
<script src="Extjs3.2.0/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function openMsg()
{
Ext.MessageBox.alert('状态', 'Hello World' , 'showResult');
}
Ext.onReady(openMsg);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>

执行上面代码，将出现如下效果。

首先在定义了一个方法openMsg，此方法的功能就是弹出一个 Extjs的对话框，Ext.onReady()是使用Extjs的入口，只有当Extjs框架加载完成后，才会执行Ext.onReady里面的函数。

赞 (0)

相关推荐

  • Exjs 入门篇

    Exjs 入门篇

    看到Extjs如此绚丽的界面,突然有种莫名的冲动来学习下! Extjs是从yui-ext发展来的一套ajax控件,是一套完整的富客户端解决方案,也因为功能完整,ext-all.js有400多k(最新的extjs3.2.0 有600多k),以为是基于js和css的功能实现,对客户端机器性能也有一定的要求,比如对ie6以下版本的不支持. 下面开始Extjs的学习(本人也是刚学,希望大家提出文中出现的问题)."Hello World"是当今程序语言经典的入门程序,很多教科书上都是用"

  • ASP漏洞全接触-入门篇

    随着B/S模式应用开发的发展,使用这种模式编写应用程序的程序员也越来越多.但是由于这个行业的入门门槛不高,程序员的水平及经验也参差不齐,相当大一部分程序员在编写代码的时候,没有对用户输入数据的合法性进行判断,使应用程序存在安全隐患.用户可以提交一段数据库查询代码,根据程序返回的结果,获得某些他想得知的数据,这就是所谓的SQL Injection,即SQL注入. SQL注入是从正常的WWW端口访问,而且表面看起来跟一般的Web页面访问没什么区别,所以目前市面的防火墙都不会对SQL注入发出警报,如果

  • spring boot(一)之入门篇

    spring boot(一)之入门篇

    本文给大家介绍构建微服务:Spring boot 入门篇,具体内容详情如下所示: 什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.用我的话来理解,就是spring boot其实不是什么新的框架,它默认配置了很多框架的使用方式,就像maven整合了所有的jar包,spring boot整合了所有的框架(不知道这样比喻是否合

  • 基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解

    基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解

    Pyplot matplotlib.pyplot是一个命令型函数集合,它可以让我们像使用MATLAB一样使用matplotlib.pyplot中的每一个函数都会对画布图像作出相应的改变,如创建画布.在画布中创建一个绘图区.在绘图区上画几条线.给图像添加文字说明等.下面我们就通过实例代码来领略一下他的魅力. import matplotlib.pyplot as plt plt.plot([1,2,3,4]) plt.ylabel('some numbers') plt.show() 上图是我们通

  • 扩展你的 PHP 之入门篇

    扩展你的 PHP 之入门篇

    扩展你的php 扩展你的php 扩展的3种方式 extension dll方式的扩展 小结 首先注意,以下所有的一切皆在 win 下进行,使用的工具的 VC++6.0. 扩展你的PHP PHP以方便快速的风格迅速在web系统开发中占有了重要地位. PHP本身提供了丰富的大量的函数及功能. 长话短说. 我们看看我们如何进行扩展. 扩展的3种方式 External Modules Built-in Modules The Zend Engine 3 种方式的优缺点可参见 PHP 手册:http://

  • Spring Boot 简介(入门篇)

    1.什么是SpringBoot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置, 从而使开发人员不再需要定义样板化的配置.通过这种方式,Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者. 2.SpringBoot特性 1).创建独立的Spring项目 2).内置Tomcat和Jetty容器 3).提供一个sta

  • spring boot 学习笔记（入门篇）

    简介: Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.用我的话来理解,就是spring boot其实不是什么新的框架,它默认配置了很多框架的使用方式,就像maven整合了所有的jar包,spring boot整合了所有的框架(不知道这样比喻是否合适). 优点: 其实就是简单.快速.方便!平时如果我们需要搭建一个spring web项目的时候需要怎么

  • 小白入门篇使用Python搭建点击率预估模型

    点击率预估模型 0.前言 本篇是一个基础机器学习入门篇文章,帮助我们熟悉机器学习中的神经网络结构与使用. 日常中习惯于使用Python各种成熟的机器学习工具包,例如sklearn.TensorFlow等等,来快速搭建各种各样的机器学习模型来解决各种业务问题. 本文将从零开始,仅仅利用基础的numpy库,使用Python实现一个最简单的神经网络(或者说是简易的LR,因为LR就是一个单层的神经网络),解决一个点击率预估的问题. 1.假设一个业务场景 声明:为了简单起见,下面的一切设定从简-. 定义需

  • 详解用场景去理解函数柯里化(入门篇)

    前言 函数柯里化就是将多参简化为单参数的一种技术方式,其最终支持的是方法的连续调用,每次返回新的函数,在最终符合条件或者使用完所有的传参时终止函数调用. 场景实例 与其他文章不同,我在本文会重点分享一些柯里化的经典使用场景,让你在学会这点技巧后能切实的提升代码的可维护性. 编写可重用小模块代码 比如我们有个方法部分逻辑前置是相同的,后面的执行是因为参数不同导致结果不同的,下面是代码部分. 计算商品的折扣,我们需要根据不同的折扣以及商品的入参返回其实际的价格. // before function

  • C++基础入门篇之强制转换

    引言 假设有基类 A,包含了虚函数 func1,以及有派生类 B,继承于类 A,派生类 B 中实现了函数 func1.此时可以用 A 类型的指针指向 B 类型的对象,并用 A 类型的指针调用 B 类型对象中的函数 func1.这时,就形成了多态.包含虚函数的类 A,我们也称为多态类. 由于派生类 B 完整包含了 基类 A 的所有定义,将 B 类型的指针转换为 A 类型的指针总是安全的. 而将 A 类型的指针强制转换为 B 类型的指针时,如果 A 类型指针指向的对象确实为 B 类型的对象,那么转换

随机推荐