Nodejs中使用ext问题

Nodejs中使用ext问题

使用Ext做第二个页面的时候，把ext的代码基本copy过来…model、view、store 、controller等只是把名字改成另外的一个名. 为什么连最基本展示都没有了…代码如下 loadMenu:function(selModel, record){

if (record.get('leaf')) {
  var my = this;
 // console.log(my);
  var panel = Ext.getCmp(record.get('id'));
  if(!panel){
    switch (record.get('id')) {
      case "article-list":
//第一个页面的对象
        Ext.require('Demo.controller.Articles', function() {
          //此处会异步执行，先执行ext.require之外的代码

          var article = new Demo.controller.Articles();
          article.init(Demo);
          panel = { xtype: 'article-list' };
          my.openTab(panel,record.get('id'));
        });
        break;
case "instrumentEnter-list":

//第二个页面的对象

Ext.require(‘Demo.controller.instrumentEnter’,function(){

  var instrumentEnter = new Demo.controller.instrumentEnter();
  instrumentEnter.init(Demo);
  panel = {xtype: 'instrumentEnter-list'};
  my.openTab(panel,record.get('id'));
 
});

break;

default: panel ={ title: 'New Tab ’ + record.get(‘id’), //iconCls: ‘tabs’, html: 'Tab Body ’ + record.get(‘id’) + ‘<br/><br/>’, closable: true }; my.openTab(panel,record.get(‘id’)); };

其他地方都时基本一样的


3 回复

在Node.js中使用Ext JS（Sencha Ext JS）时，遇到问题是很常见的。从你提供的代码来看，问题可能出在如何正确加载和初始化控制器以及组件上。以下是一些可能的原因和解决方案：

原因分析

  1. 控制器初始化：确保每个控制器都正确初始化。
  2. 命名空间和模块：确认所有的命名空间和模块名称一致。
  3. 组件注册：确保所有自定义组件都已正确注册。

示例代码及解释

假设我们有两个页面：ArticleList 和 InstrumentEnterList。我们需要确保这两个页面的控制器和视图都能正确加载和渲染。

控制器文件 (ArticleController.js)

Ext.define('Demo.controller.Articles', {
    extend: 'Ext.app.Controller',
    views: ['ArticleList'],
    init: function() {
        this.control({
            'article-list': {
                itemclick: this.onItemClick
            }
        });
    },
    onItemClick: function(view, record) {
        console.log('Article clicked:', record.data);
    }
});

控制器文件 (InstrumentEnterController.js)

Ext.define('Demo.controller.InstrumentEnter', {
    extend: 'Ext.app.Controller',
    views: ['InstrumentEnterList'],
    init: function() {
        this.control({
            'instrumentEnter-list': {
                itemclick: this.onItemClick
            }
        });
    },
    onItemClick: function(view, record) {
        console.log('Instrument Enter clicked:', record.data);
    }
});

视图文件 (ArticleListView.js)

Ext.define('Demo.view.ArticleList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.article-list',
    title: 'Articles',
    store: 'Articles',
    columns: [
        { text: 'ID', dataIndex: 'id' },
        { text: 'Title', dataIndex: 'title' }
    ]
});

视图文件 (InstrumentEnterListView.js)

Ext.define('Demo.view.InstrumentEnterList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.instrumentEnter-list',
    title: 'Instrument Enter',
    store: 'InstrumentEnter',
    columns: [
        { text: 'ID', dataIndex: 'id' },
        { text: 'Name', dataIndex: 'name' }
    ]
});

主程序文件 (app.js)

Ext.application({
    name: 'Demo',
    controllers: ['Articles', 'InstrumentEnter'],
    launch: function() {
        Ext.create('Ext.tab.Panel', {
            renderTo: Ext.getBody(),
            width: 800,
            height: 600,
            items: [{
                title: 'Article List',
                xtype: 'article-list'
            }, {
                title: 'Instrument Enter List',
                xtype: 'instrumentEnter-list'
            }]
        });
    }
});

关键点解释

  1. 控制器注册：在主程序文件中注册所有需要的控制器。
  2. 视图注册：确保所有视图都已正确注册并使用别名。
  3. 数据存储：确保每个视图都有关联的数据存储。

通过这种方式，你可以确保每个页面的控制器和视图都能正确加载和渲染。希望这能解决你的问题！


代码贴错了… 用 <code>```</code> 语法标记下吧…

Ext 不是前端内容吗?

从你的描述来看，问题可能出在 Ext.require 的异步加载机制上。Ext.require 是用来动态加载所需的类的，由于它是异步的，所以在加载完成之前，后续的代码可能会被执行。这可能是导致你的控制器没有初始化的原因。

以下是一些可能的改进措施：

  1. 确保控制器完全加载后再初始化： 你可以将控制器初始化的逻辑放在 Ext.require 的回调函数内部，确保在创建控制器实例之前，所需的类已经被加载。

  2. 使用命名空间： 确保你的命名空间和文件结构正确，避免因为命名冲突或者路径错误导致类无法找到。

以下是改进后的代码示例：

loadMenu: function(selModel, record) {
  if (record.get('leaf')) {
    var my = this;

    var panel;
    switch (record.get('id')) {
      case "article-list":
        Ext.require('Demo.controller.Articles', function() {
          var article = new Demo.controller.Articles();
          article.init(Demo);
          panel = { xtype: 'article-list' };
          my.openTab(panel, record.get('id'));
        });
        break;
      case "instrumentEnter-list":
        Ext.require('Demo.controller.instrumentEnter', function() {
          var instrumentEnter = new Demo.controller.instrumentEnter();
          instrumentEnter.init(Demo);
          panel = { xtype: 'instrumentEnter-list' };
          my.openTab(panel, record.get('id'));
        });
        break;
      default:
        panel = {
          title: 'New Tab ' + record.get('id'),
          html: 'Tab Body ' + record.get('id') + '<br/><br/>',
          closable: true
        };
        my.openTab(panel, record.get('id'));
    }
  }
}

解释：

  • Ext.require：用于异步加载所需的类。当类加载完成后，回调函数会被执行。
  • 控制器初始化：在 Ext.require 的回调函数内部初始化控制器实例，并创建对应的面板。
  • 默认情况：如果 ID 不匹配，则创建一个默认的面板并打开。

确保 Demo.controller.Articles 和 Demo.controller.instrumentEnter 这两个控制器类存在并且路径正确。

回到顶部