Question

我想组合一个创建窗口和画架画布的extjs应用程序但是当我尝试同时加载它们时窗口完全被搞砸了:(这是我的代码。与可移动窗口有冲突吗？我是否必须把我的窗户放在一个容器里？我对这些东西很陌生，我一直在修补extjs大约一个星期，而且只是在画架上乱了大约2天。我只有一个星期。 5个JS的经历，如果我的问题似乎太过于道歉，我很抱歉。

var myImage;
var stage;
function init() {
stage = new createjs.Stage("demoCanvas");
myImage = new createjs.Bitmap('dbz.jpg');
stage.addChild(myImage);
 stage.update();


myImage.addEventListener("click", function(){
var seed = new createjs.Bitmap("seed.jpg");
seed.alpha = 0.5;
stage.addChild(seed);

stage.update();
 }); //end seed 
} //end easel 

var animals = Ext.create('Ext.data.Store', {
 fields: ['itemId', 'name'],
 data: [{
       "itemId": 'mycat',
       "name": "mycat"
    }, {
         'itemId' : 'mydog',    
        "name": "mydog"
    }, {
        'itemId' : 'sbBarGirls', 
        "name": "BarGirls-when-drunk"
           }

          ]
   }); //end animals.create


Ext.define('ryan', {   // create better namespace company.project.class

extend: 'Ext.Window',
//  config: {

       itemId: 'ryanWindow',
       bodyStyle:{"background-color":"green"},
       title: 'Animal sanctuary, one animal per location  ',
       width: 300,
       bodyPadding: 10,
       test: 'mycat',
       style: 'background-color: #Fdd;',


          items: [{
             itemId: 'button1',
             xtype: 'button',
             text: 'click the button',
             handler: function(theButton){
                Ext.Ajax.request({
                url: 'stuff.txt',
                method: 'GET',
                success: function (result){
                 theButton.up('window').queryById('wildAnimal').setValue(result.responseText)
                                          }
                                 })
                                          } 

           },{
    itemId: 'wildAnimal',
    xtype: 'textfield',
    fieldLabel: 'animal:',
    name: 'myanimal'
       }, { //end text field
    itemId: 'myCombo',
    xtype: 'combo',
    fieldLabel: 'choose your animal',
            store: animals,
    queryMode: 'local',
    displayField: 'name',
    listeners: {
             'change': function(field, selectedValue) {
             this.up('window').queryById('wildAnimal').setValue(selectedValue);
                                                       }
                       }
               }// end combo

    ] //end items



    //} // end config



}); //end define ryan



////////// object instantiation

Ext.onReady(function(){
var a = Ext.create('ryan', {
renderTo: Ext.getBody()

});
    a.show();

     var b = Ext.create('ryan', {
renderTo: Ext.getBody()
});
    b.show();    
      });

Answer 1

从快速浏览一下，画架似乎不会污染全局命名空间，Ext4也不会，因此没有理由不能在同一页面上播放。

我在this fiddle中测试了这个理论，它确实有效。

我希望以下代码可以帮助您入门。它使用窗口的html选项来创建画布。

Ext.define('EaselWindow', {
    extend: 'Ext.Window'

    ,html: '<canvas id="demoCanvas" width="500" height="300">'
        + 'alternate content'
        + '</canvas>'

    // The canvas markup will only be available after the window has rendered.
    // This is a useful protected method, but you could use a afterrender event instead.
    ,afterRender: function() {
        this.callParent(arguments);

        // The canvas is available to do easel stuffs... Have fun!
        var stage = new createjs.Stage("demoCanvas");

        var circle = new createjs.Shape();
        circle.graphics.beginFill("red").drawCircle(0, 0, 50);
        circle.x = 100;
        circle.y = 100;
        stage.addChild(circle);

        stage.update();
    }
});

如何组合extjs图形元素和画架元素

1 个答案: