ExtJs一(Hello World)

前言

  本文原文链接地址 http://aehyok.com/Blog/Detail/48.html

  来学习一下ExtJs,今天主要来了解一下ExtJs在Asp.Net Mvc3.0中的基本架构搭建。

  所使用的ExtJs版本为4.1.1,下载地址为http://cdn.sencha.io/ext-4.1.1-gpl.zip?ref=extjs.org.cn

搭建ExtMVC环境

 1.创建一个Asp.Net Mvc3.0的Web空项目,视图引擎选择Razor。

创建好项目后,要在解决方案资源管理器中进行处理:

  •   将Content和Scripts目录下的文件全部删除。
  •   再在Content目录下创建一个Images目录。
  • 在Scripts目录下创建app和ExtJS两个目录。
  •   在app目录下,再创建controller、model、store和 view这4个目录,分别用来存放项目中Ext JS的控制器、模型、Store和视图文件。
  • 再在ExtJS目录下创建一个ux目录,用来存放Ext JS的扩展组件。

管理系统将使用Ext JS是4.1.1的版本。

  • 在Ext JS 4.1.1包中将bootstrap.js、ext-all.js和ext-all-dev.js这三个文件和resources目录复制到解决方案的ExtJS目录下。
  •   将local目录下的中文语言包ext-lang-zh_CN.js也复制到ExtJS目录下。
  • 在Ext JS包目录内搜索s.gif文件,将其复制到Content目录下的Images目录。

实现Hello World

   1.在Controllers添加控制器HomeController,并在Index Action上直接添加视图(添加视图时记得  使用布局或母版页的选项不勾)。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
</head>
<body>
    <div>
        
    </div>
</body>
</html>

 2.添加页面编码说明及Ext JS样式和脚本的引用将上面视图内容修改为

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <link rel="stylesheet" type="text/css" href="@Url.Content("Scripts/ExtJs/resources/css/ext-all.css")" />      
    <script type="text/javascript" src="@Url.Content("Scripts/ExtJs/bootstrap.js")"></script>  
    <script type="text/javascript" src="@Url.Content("Scripts/ExtJs/Ext-lang-zh_CN.js")"></script> 
</head>
<body>
    <div>
        
    </div>
</body>
</html>

 3.然后将body中的div删除,添加一个script块,在块内添加Ext.onReady函数块,并在onReady函数内先添加空白图片的验证,这里要注意图片的目录,具体代码如下

最后再添加一个alert的提示信息

<script>
    Ext.onReady(function () {
        if (Ext.BLANK_IMAGE_URL.substr(0, 4) != "data") {
            Ext.BLANK_IMAGE_URL = "Content/Images/s.gif";
        }
        Ext.Msg.alert("提示信息", "你好!");
    })   
</script>

4.点击运行。

总结

   就这样,你就初步实现了一个Hello World。

  示例代码下载地址为http://files.cnblogs.com/aehyok/ExtMVCOne.rar

个人网站地址:aehyok.com

QQ 技术群号:206058845,验证码为:aehyok

本文文章链接:http://www.cnblogs.com/aehyok/p/3981965.html

感谢您的阅读,如果您对我的博客所讲述的内容有兴趣,那不妨点个推荐吧,谢谢支持:-O。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ASP.NETCore

在ASP.NET Core使用Middleware模拟Custom Error Page功能

在传统的ASP.NET MVC中,我们可以使用HandleErrorAttribute特性来具体指定如何处理Action抛出的异常.只要某个Action设置了...

13130
来自专栏ASP.NETCore

Asp.Net Core 通过中间件防止图片盗链

  要实现防盗链,我们就必须先理解盗链的实现原理,提到防盗链的实现原理就不得不从HTTP协议说起,在HTTP协议中,有一个表头字段叫referer,采用URL的...

21030
来自专栏ASP.NETCore

WebSocket in ASP.NET Core

  WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算)

17020
来自专栏ASP.NETCore

ASP.NET Core中如何调整HTTP请求大小的几种方式

一般的情况下,我们都无需调用HTTP请求的大小,只有在上传一些大文件,或者使用HTTP协议写入较大的值时(如调用WebService)才可能会调用HTTP最大请...

49840
来自专栏ASP.NETCore

在ASP.NET CORE 2.0使用SignalR技术

上次讲SignalR还是在《在ASP.NET Core下使用SignalR技术》文章中提到,ASP.NET Core 1.x.x 版本发布中并没有包含Signa...

12330
来自专栏ASP.NETCore

细说ASP.NET Core静态文件的缓存方式

  我们在优化Web服务的时候,对于静态的资源文件,通常都是通过客户端缓存、服务器缓存、CDN缓存,这三种方式来缓解客户端对于Web服务器的连接请求压力的。

27520
来自专栏ASP.NETCore

解决ASP.NET Core Mvc文件上传限制问题

  在ASP.NET Core MVC中,文件上传的最大上传文件默认为20MB,如果我们想上传一些比较大的文件,就不知道怎么去设置了,没有了Web.Config...

19440
来自专栏ASP.NETCore

如何在多个项目中分离Asp.Net Core Mvc的Controller和Areas

软件系统中总是希望做到松耦合,项目的组织形式也是一样,本篇文章将介绍在ASP.NET CORE MVC中怎么样将Controller与主网站项目进行分离,并且对...

35730
来自专栏ASP.NETCore

ASP.NET Core中使用Razor视图引擎渲染视图为字符串

  在有些项目需求上或许需要根据模板生产静态页面,那么你一样可以用Razor语法去直接解析你的页面从而把解析的页面生成静态页,这样的使用场景很多,不限于生成静态...

41040
来自专栏ASP.NETCore

在ASP.NET Core下使用SignalR技术

  上次我们讲到过如何在ASP.NET Core中使用WebSocket,没有阅读过的朋友请参考 WebSocket in ASP.NET Core 文章 。这...

22220

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励