zoukankan      html  css  js  c++  java
  • mvc5引用ExtJS6

    mvc5引用ExtJS6

    摘要:VisualStuio2015 asp.net mvc如何引用ExtJS6,使用BundleConfig。

    首先下载ExtJS6.0 gpl版。ExtJS有自己的程序框架,但我们需要asp.net mvc5,ExtJS只用作界面库。

    接下来要把下载好的ExtJS6的核心部分抽取出来,目录结构是这样的:

    image

    要引用的东西全在build目录下,这个目录有400多M,对于vs项目引用太大了。先把build目录复制到VS项目目录下重命名为ExtJS60。

    1、将目录examples、welcome,文件index.html、release-notes.html删除。

    2、删除调试用的文件。这个目录里有许多*debug.js、*debug.scss文件,删除之。用Everything

    image

    这样一处理就剩下40多M了。可以直接使用我处理好的 http://pan.baidu.com/s/1qYMtE0W 密码: 1q14。

    接下来就是利用@Scripts.Render和@Styles.Render引用ExtJS。MVC提供了BundleConfig.cs文件用于增加js脚本和css样式,View视图统一调用,还能对js和css进行压缩。

    App_StartBundleConfig.cs

    复制代码
    using System.Web;
    using System.Web.Optimization;
    
    namespace WebApplication1
    {
      public class BundleConfig
      {
        // 有关绑定的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
          bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                      "~/Scripts/jquery-{version}.js"));
    
          bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                      "~/Scripts/jquery.validate*"));
    
          // 使用要用于开发和学习的 Modernizr 的开发版本。然后,当你做好
          // 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
          bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                      "~/Scripts/modernizr-*"));
    
          bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/bootstrap.js",
                    "~/Scripts/respond.js"));
    
          bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/bootstrap.css",
                    "~/Content/site.css"));
    
          //********自己的JavaScript************************
          ScriptBundle Ext_ScriptBL = new ScriptBundle("~/ExtJS");
          Ext_ScriptBL.Include("~/ExtJS60/ext-all.js");
          Ext_ScriptBL.Include("~/ExtJS60/classic/locale/locale-zh_CN.js");                 //中文资源
    
          ScriptBundle jquery_ScriptBL = new ScriptBundle("~/jquery");
          jquery_ScriptBL.Include("~/Scripts/jquery-2.1.4.min.js");
    
          Ext_ScriptBL.Transforms.Clear();
          bundles.Add(jquery_ScriptBL);
          bundles.Add(Ext_ScriptBL);
    
          CssRewriteUrlTransformWrapper crut = new CssRewriteUrlTransformWrapper();
          StyleBundle StyleBL = new StyleBundle("~/ExtJS_CSS_triton");
          StyleBL.Include("~/ExtJS60/classic/theme-triton/resources/theme-triton-all_1.css", crut);
          StyleBL.Include("~/ExtJS60/classic/theme-triton/resources/theme-triton-all_2.css", crut);
    
          StyleBundle StyleBL2 = new StyleBundle("~/ExtJS_CSS_neptune");
          StyleBL2.Include("~/ExtJS60/classic/theme-neptune/resources/theme-neptune-all_1.css", crut);
          StyleBL2.Include("~/ExtJS60/classic/theme-neptune/resources/theme-neptune-all_2.css", crut);
          
          StyleBundle StyleBL3 = new StyleBundle("~/ExtJS_CSS_gray");
          StyleBL3.Include("~/ExtJS60/classic/theme-gray/resources/theme-gray-all.css", crut);
    
          bundles.Add(StyleBL);
          bundles.Add(StyleBL2);
          bundles.Add(StyleBL3);
          //********自己的JavaScript END************************
        }
      }
    
      public class CssRewriteUrlTransformWrapper : IItemTransform
      {
        public string Process(string includedVirtualPath, string input)
        {
          return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);
        }
      }
    }
    复制代码

    Controllers目录右键→添加→控制器 →mvc5控制器 空。控制器名称ExtTest。增加视图(不要布局页)

    image

    ViewsExtTestIndex.cshtml

    复制代码
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
      @Styles.Render("~/ExtJS_CSS_neptune")
      @Scripts.Render("~/ExtJS")
    
      <script type="text/javascript">
        Ext.onReady(function ()
        {
          Ext.create('Ext.tab.Panel', {
             450,
            height: 400,
            renderTo: document.body,
            items: [{
              title: '页面1',
            },
            {
              title: '页面2',
            }]
          });
          Ext.Msg.alert("Ready", "ExtJS就绪");
        });
      </script>
    </head>
    <body>
        <div> 
        </div>
    </body>
    </html>
    复制代码

    运行看看效果:

    image

     

     

     

     
    标签: ExtJS

  • 相关阅读:
    jquery.autocomplete 使用解析
    《SEO实战密码》
    Thinkphp 生成的验证码不显示问题解决
    css去除li的小圆点
    css隐藏input边框阴影
    HBuilde 申请密钥证书
    请求筛选模块被配置为拒绝包含 hiddenSegment 节的 URL 中的路径
    js 判断屏幕下拉上滑操作
    gis 从WGS84转百度
    GIS个坐标系转换
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/6058962.html
Copyright © 2011-2022 走看看