您的位置：首页 > Web前端 > JavaScript

快速搭建codeigniter3.0和extjs5.0开发平台

2014-11-23 17:49 453 查看

步骤1：

在CodeIgniter项目目录下面用sencha生成extjs5项目

$sencha generate app HRM ./HRM





步骤2：修改bootstrap.js文件下面两个地方

修改1：

            run: function() {

                Microloader.init();

                var manifest = Ext.manifest;



                if (typeof manifest === "string") {

                    var extension = ".json",

                        url = manifest.indexOf(extension) === manifest.length - extension.length

                            ? manifest

                            : manifest + ".json";



   url = Boot.baseUrl + url;

   //console.log('json路径：', url);



                    Boot.fetch(url, function(result){

                        manifest = Ext.manifest = JSON.parse(result.content);

                        Microloader.load(manifest);

                    });

                } else {

                    Microloader.load(manifest);

                }

            },







修改2：





                  loadResources = function(resources, addLoadedFn){

                        for (len = resources.length, i = 0; i < len; i++) {

                            resource = resources[i];

                            include = true;

                            if (resource.platform && !Boot.filterPlatform(resource.platform)) {

                                include = false;

                            }

                            if (include) {



    //console.log('Resource路径：', Boot.baseUrl+resource.path);

                                    urls.push(Boot.baseUrl + resource.path);

    //urls.push(resource.path);



                            }

                        }











步骤3：拷贝CSS文件



将ext-theme-neptune的样式文件放到你的项目如HRM项目ci3\HRM\build\production\HRM\resources 目录下面，并把前缀都改成你的项目名称HRM-all.css

打开HRM-all.css文件，修改成下面的内容

@import 'HRM-all_01.css';@import 'HRM-all_02.css';







步骤4：

修改HRM/app.js 文件添加appFolder目录

Ext.application({

    name: 'HRM',

    appFolder : 'HRM/app',

    extend: 'HRM.Application',



    autoCreateViewport: 'HRM.view.main.Main'



    //-------------------------------------------------------------------------

    // Most customizations should be made to HRM.Application. If you need to

    // customize this file, doing so below this section reduces the likelihood

    // of merge conflicts when upgrading to new versions of Sencha Cmd.

    //-------------------------------------------------------------------------

});



步骤5：

修改HRM/app/Application.js 文件添加appFolder目录



Ext.define('HRM.Application', {

    extend: 'Ext.app.Application',

    appFolder : 'HRM/app',

    name: 'HRM',



    stores: [

        // TODO: add global / shared stores here

    ],



    launch: function () {

        // TODO - Launch the application

    }

});







步骤6：

做完上面操作后就能在CodeIgniter的View目录下面修改index.php 模板文件，就可以在将前台的extjs5的项目独立放在自己定义的项目HRM目录下面





"<!DOCTYPE HTML>

<html manifest="""">

<head>

    <meta http-equiv=""X-UA-Compatible"" content=""IE=edge"">

    <meta charset=""UTF-8"">

    <title>HrManager</title>

<script id=""microloader"" type=""text/javascript"" src=""<?php echo $this->config->base_url(); ?>/HRM/bootstrap.js""></script>

</head>

<body>

</body>

</html>"

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： codeigniter extjs ext sencha app

相关文章推荐

新的分享

章节导航