2014-01-06 27 views
0

我有一个应用程序,我必须在单个页面上重复一个自定义组件,说200次,并保存每个组件的引用。我尝试使用for循环来添加它,但是这样做会给我一个脚本错误。有没有其他方法可以在extjs中重复使用自定义组件? 这是我使用的代码。在extjs中重复一个自定义元素

Ext.application({ 
requires: ['Ext.container.Viewport'], 
name: 'Excel', 

launch: function() { 
    Ext.define('ExcelCell',{ 
      extend: 'Ext.panel.Panel', 
      itemcls: 'excelCell', 
      height: 20, 
      width: 64 
     }); 

    var port = Ext.create('Ext.container.Viewport', { 
     layout: 'absolute' 
    }); 


    var totalRowsToDraw = port.height/20; 
    var totalColumnsToDraw = port.width/64; 

    var cellDictionary = new Object(); 
    var cell; 

    for(var r=0; r < totalRowsToDraw ;r++){ 
     for(var c=0; c < totalColumnsToDraw ;c++){ 
      cell = Ext.create('ExcelCell'); 
      cell.x = c*64; 
      cell.y = r*20; 
      port.add(cell); 
      cellDictionary[r+','+c] = cell; 
     } 
    } 
} 
}); 

而且我的CSS代码是

.excelCell{ 
padding-bottom: 0; 
padding-left: 0; 
padding-right: 0; 
padding-top: 0; 
border: 1; 
border-style: solid; 
border-color: #B7BABC; 
background-color: #000000; 
} 
+0

工作正常:http://jsfiddle.net/XGdu9/(但我认为你更喜欢使用'XTemplate'或'容器'或'盒'代替面板') –

+0

当我使用Hbox或Vbox我没有得到边界只为面板我正在获取围绕单元格的边框。我是ExtJs的新手,所以我没有深入的知识为什么会发生这种情况。 – Ashok

回答

0

您的代码完美的作品。我唯一想到的是,也许你想用其他方法使用cellDictionary

如果是这样的话,你想,而不是使之全局入店,:

var cellDictionary = {}; 

你必须做的:

Excel.cellDictionary = {}; 

然后,对其进行访问,你” d做一些像Excel.cellDictionary["2,2"](也许这是显而易见的)

希望这有助于。干杯

+0

它工作正常吗?因为对我来说,当我在Firefox中运行它时,它会引发无响应的脚本错误,甚至不会在Chrome和IE中打开它。 – Ashok

+0

嗯它适用于我在与ExtJs 4.1.1铬,我在这里检查:http://jsfiddle.net/XGdu9/ –

+0

http://jsfiddle.net/XGdu9/4/现在尝试它会给错误 – Ashok

相关问题