搭建Extjs框架(二)

搭建Extjs 框架

二、编写入口文件 app.js,配置extjs 组件\视图文件路径 并将app.js引入index.html

      在app.js中指定一些文件的路径，Extjs页面的起始页。还有一些Extjs 的全局配置也可以写在app.js中

Ext.Loader.setPath({
    'myapp.ux': AppConfig.appUrl+'Content/ux',
    'Ext.ux': AppConfig.appUrl+'lib/ux',
    'Ext.draw.ContainerBase':AppConfig.appUrl+'lib/build/charts.js'
});
Ext.setGlyphFontFamily('FontAwesome');
Ext.application({
    name: AppConfig.appName,
    appFolder: AppConfig.appUrl + AppConfig.appName,
    enabled: true,
    requires: [
        'Ext.window.MessageBox',   
    ],
    autoCreateViewport: "webapp.view.main.Main"
});

app.js一般放在webapp 也就是你写页面层的根目录

全局配置

var AppConfig={
        //项目根目录，物理路径
        appUrl:"./",
        //view页面路径
        appName:"webapp",
        //项目版本
        appVersion:"1.0.0",
}

三、配置node服务器

package.json 配置如下

{
  "name": "extjs6.2.0demo",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "dependencies": {
    "body-parser": "^1.18.1",
    "express": "^4.15.4"
  },
  "author": "status404",
  "license": "ISC"
}

serve.js  配置如下（使用express 模块 作为服务器）

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
 
// 创建 application/x-www-form-urlencoded 编码解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })
 
app.use(express.static('./'));
 
app.get('/index.html', function (req, res) {
   res.sendFile( __dirname + "/index.html" );
})
 
app.post('/process_post', urlencodedParser, function (req, res) {
 
   // 输出 JSON 格式
   var response = {
       "first_name":req.body.first_name,
       "last_name":req.body.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})
 
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("应用实例，访问地址为 http://%s:%s", host, port)
 
})