Extjs布局扩展在ext-all.js中导致错误

我想学习Extjs，我立即想出一个问题。我的Html已正确包含ext-base.js和ext-all.js。然后我在我的js文件如下：Extjs布局扩展在ext-all.js中导致错误

Ext.BLANK_IMAGE_URL = '<%= Url.Content("~/Content/ext/images/default/s.gif") %>'; 
Ext.ns('MyNamespace'); 

Ext.onReady(function() { 
    alert("onReady() fired"); 
});

到目前为止，一切正常，没有错误和警告正确抛出。然后我onReady后添加以下代码：

MyNamespace.BaseLayout = Ext.Extend(Ext.Viewport({ 
    layout: 'border', 
    items: [ 
     new Ext.BoxComponent({ 
      region: 'north', 
      height: 32, 
      autoEl: { 
       tag: 'div', 
       html: '<p>North</p>' 
      } 
     }) 
    ] 
}));

这将导致在镀铬以下JavaScript错误：

Uncaught TypeError: Object #<an Object> has no method 'addEvents'  ext-all.js:7 
Ext.Component  ext-all.js:7 
Ext.apply.extend.K  ext-base.js:7 
Ext.apply.extend.K  ext-base.js:7 
Ext.apply.extend.K  ext-base.js:7 
(anonymous function)  MyApp.js:13 (pointing to the Ext.Extend line)

如果我参加了视口代码，并把它直接进入OnReady功能它（如以下）

Ext.onReady(function() { 
    var bl = new Ext.Viewport({ 
     layout: 'border', 
     items: [ 
     new Ext.BoxComponent({ 
      region: 'north', 
      height: 32, 
      autoEl: { 
       tag: 'div', 
       html: '<p>North</p>' 
      } 
     }) 
    ] 
    }); 
});

它的工作原理。任何人都可以告诉我，我在做什么错误的Extend方法？

来源

2010-11-10 KallDrexx

这是一个更复杂的例子，你想要完成什么。我强烈建议看看Saki的3 part series用ExtJS构建大型应用程序，它将帮助您了解如何正确使用扩展来创建可重用组件。

Ext.ns('MyNamespace'); 

MyNamespace.BaseLayout = Ext.extend(Ext.Viewport, { 
    initComponent:function() { 
     var config = { 
      layout: 'border', 
      items: [ 
       new Ext.BoxComponent({ 
        region: 'north', 
        height: 32, 
        autoEl: { 
         tag: 'div', 
         html: '<p>North</p>' 
        } 
       }) 
      ] 
     }; 
     Ext.apply(this, Ext.apply(this.initialConfig, config)); 

     MyNamespace.BaseLayout.superclass.initComponent.apply(this,arguments); 
    }//end initComponent 

}); 

//this will give you an xtype to call this component by. 
Ext.reg('baselayout',MyNamespace.BaseLayout); 

Ext.onReady(function() { 
    new MyNamespace.BaseLayout({}); 
});

来源

2010-11-10 04:25:36 rwilliams

只是注意 - 有没有需要覆盖的OnRender，除非有将是一些实际的代码在里面。（以防万一有人过来，并从这个答案复制/粘贴。） – 2010-11-10 07:56:09

是的，我得到了我从读Saki的博客写的代码，但当我回去使用它作为参考时，我显然认为有围绕'ViewPort'调用。愚蠢的我：）。谢谢！ – KallDrexx 2010-11-10 13:02:01

@bmoeskau：感谢提示 – rwilliams 2010-11-10 14:38:32

要修复您的代码，问题是Extend语句中的语法错误。你需要一个逗号Ext.Viewport后，没有额外的（）对：

MyNamespace.BaseLayout = Ext.Extend(Ext.Viewport, { 
    layout: 'border', 
    items: [ 
     new Ext.BoxComponent({ 
      region: 'north', 
      height: 32, 
      autoEl: { 
       tag: 'div', 
       html: '<p>North</p>' 
      } 
     }) 
    ] 
});

不过，我建议采取@ R-配音的意见，并于你想做什么读多了起来。

来源

2010-11-10 07:54:09

Doh在阅读Saki博客时误读了Extend语法。我已经读过它，我只是误读了它的语法！ – KallDrexx 2010-11-10 13:00:15

这不起作用。这会导致以下错误：未捕获的类型错误：对象＃没有方法'扩展'' – KallDrexx 2010-11-10 21:45:26

这与此代码无关，如图所示，这是正确的。这通常是您如何设置包含的问题。 – 2010-11-11 01:50:29

ExtJS推荐使用define而不是extend。下面是一个类似的例子是如何使用定义：

Ext.define('Grid', { 
    extend: 'Ext.grid.Panel', 
    config: {   
     height: 2000   
    }, 

    applyHeight: function (height) {   
      return height; 
    }  
}); 

new Grid({ 
    store: store, 
    columns: [{ 
     text: 'Department', 
     dataIndex: 'DepartmentName', 
     renderer: function (val, meta, record) { 
      return '<a href="DepartmentEmployees/' + record.data.ID + '">' + record.data.DepartmentName + '</a>'; 
     }, 
     width: 440, 
     flex: 1, 
     filter: 'string', 
     sortable: true, 
     hideable: false 
    }, { 
     text: 'Department Code', 
     dataIndex: 'DepartmentKey', 
     width: 100, 
     flex: 1, 
     filter: 'string', 
     sortable: true, 
     hideable: false 
    }, { 
     text: 'Main Phone', 
     dataIndex: 'MainPhone', 
     flex: 1, 
     filter: 'string', 
     sortable: true, 
     hideable: false 
    }, { 
     text: 'Room', 
     dataIndex: 'RoomLocation', 
     flex: 1, 
     filter: 'string', 
     sortable: true, 
     hideable: false 
    }, { 
     text: 'Hideway Location', 
     dataIndex: 'HideawayLocation', 
     flex: 1, 
     filter: 'string', 
     sortable: true, 
     hideable: false 
    }, { 
     text: 'Hideway Phone', 
     dataIndex: 'HideawayPhone', 
     flex: 1, 
     filter: 'string', 
     sortable: true, 
     hideable: false 
    }, { 
     text: 'Has OEC', 
     dataIndex: 'OECFlag', 
     xtype: 'checkcolumn', 
     width: 50, 
     filter: { 
      type: 'boolean', 
      active: true 
     }, 
     flex: 1, 
     sortable: true, 
     hideable: false 
    }, 
     { 
      text: 'Action', 
      dataIndex: 'ID', 
      renderer: function (value) { 
       return '<a href="DepartmentEdit/' + value + '">Edit</a>'; 
      }, 
      hideable: false 
     }], 
    forceFit: false, 
    split: true, 
    renderTo: 'departmentSearchGrid', 
    frame: false, 
    width: 1300, 
    plugins: ['gridfilters'] 
});

我用下面的帖子作为参考： http://docs.sencha.com/extjs/5.0/core_concepts/classes.html

来源

2014-09-02 13:20:53

Extjs布局扩展在ext-all.js中导致错误

回答

相关问题