PDA

View Full Version : problem on extending 'Ext.draw.Component' iClass



smkkiran
28 Jan 2012, 8:27 AM
hi,

i am trying to extend 'Ext.draw.Component' draw class. object is created for the class but its not rendered in a window panel... can any one help me how to do this....

findajit
28 Jan 2012, 8:50 PM
@smkkiran,

Can you paste the class definition which you have defined by extending the draw component? Also, paste the code to show how you are instantiating and adding it to the Window.

smkkiran
28 Jan 2012, 10:26 PM
Ext.define('ddr.Chart', { extend: 'Ext.draw.Component',
title: 'Welcome!',
viewBox: false,
initComponent: function() {
this.items = [{
type: 'rect',
fill: '#000', //red
width: 2,
height: 400,
x: 65,
y: 30
}],
this.callParent(arguments);
}
});





Ext.onReady(function(){var win = Ext.create('ddr.Chart');
Ext.create('Ext.Window', {
title: 'ddr Chart',
width: 1000,
height: 500,
layout: 'fit',
items: [win]
}).show();
});


this is working for panel i.e., if i extend panel its working fine but not for draw compnent......

findajit
30 Jan 2012, 12:19 AM
@smkkiran,

Change the definition to


Ext.define('ddr.Chart', {
extend : 'Ext.draw.Component',
title : 'Welcome!',
viewBox : false,
initComponent : function() {
var cfg = {items: [{
type : 'rect',
fill : '#000',
width : 20,
height : 400,
x : 65,
y : 30
}]};
Ext.apply(this, Ext.apply(this.initialConfig, cfg));

this.callParent(arguments);
}
});

this.items does not work as the draw component uses surface object for rendering and it is the surface object which uses the items to show the sprites..and by setting this.items, the items array does not reach the surface object.

So, you first add the items config to the initialConfig object and then apply it to the draw component:

Ext.apply(this, Ext.apply(this.initialConfig, cfg));

With this change, you shall be able to get you draw component working.

smkkiran
31 Jan 2012, 2:58 AM
thanks for ur response, i hav a issue on adding sprite into the surface but its not adding to the surface......

findajit
31 Jan 2012, 3:01 AM
please past your code and mention the ExtJS version where you have the problem

smkkiran
31 Jan 2012, 8:34 AM
new Ext.draw.Sprite({ id : 'draw-sprite-3',
type : 'text',
surface: comp.surface,
text : 'Simple text',
font : '12px Arial',
x : 50,
y : 50,
width : 100,
height : 100
}).show(true);
var textsprite = new Ext.draw.Sprite({
type :'circle', //<-- add a type
x: 50,
y: 160,
surface: comp.surface,
radius: 50,
fill: '#888999',
zIndex: 1,
listeners: {
click: {
fn: function() {
//exibirJanelaDetalhes(this.idDadoLinhaVida, this.x, this.y);
}
},
mouseover: {
fn: function() {
alert(23);
}
},
mouseout: {
fn: function() {
alert(123);
}
}
}
}).show(true);
var textsprite1 = new Ext.draw.Sprite({
type: 'rect',
x: 50,
y: 160,
height: 100,
width: 200,
zIndex: 11,
surface: comp.surface,
fill: '#000' ,
stroke: "black",
'stroke-width': 2
}).show(true);31188


31189
this images are one for ie and other for other browsers than ie u can see der is zIndex problem and i want to fire mouse up events which are not working... thanq in advance