PDA

View Full Version : new class derived from Ext.container.Container - rendering within that container



senchatotherescue
14 Feb 2014, 9:25 AM
I'm trying to utilize an object model to render some SVG components. I have an MVC implementation, in a layout I have a content panel from which this rendering would be shown. I don't want it in a window. So basically I am trying to have a few classes. I'll keep it simple for this purpose.


I am trying to create 2 classes:

* MM.Glass - derive from Ext.container.Container. This is going to be basically the entire rendering container. I was going to add some logic in this class to help encapsulate what we need. So I think the code here I don't necessarily have any questions at the moment


* MM.StartNode - derive from Ext.container.Container. The reason why I made this a container is because this class would render a few controls - such as a circle, some text and maybe one or two other things. I wanted to encapsulate some logic here as well. All this would be considered one unit. This is the class where I have a question


* Then I have a JsStart.cshtml - where I would be creating an instance of MM.Glass, and an instance of MM.StartNode. For this purpopse I am not doing it entirely how I want it. I'm creating instances of both of these inside the JsStart.cshtml. Ideally I would be creating an instance of MM.Glass from JsStart.cshtml, then from within MM.Glass that is where I could create an instance of MM.StartNode.


Anyway, let me provide some code so you can see what I'm explaining. then if you can answer the question I show below it would be much appreciated.


class - MM.Glass
------------------------
Ext.define('MM.Glass', {
extend: 'Ext.container.Container',


gridColor: '',
bodyStyle: { background: '#FFF' },
frame: false,
margin: '2 2 2 2',


listeners: {
afterrender: {
fn: function () {
}
}
},


constructor: function (config) {


MM.Glass.superclass.constructor.call(this, config);
}
});




class - MM.StartNode:
-----------------------------
Ext.define('MM.StartNode', {
extend: 'Ext.container.Container',
variantText: 'unknown',


listeners: {
afterrender: {
fn: function () {
}
}
},


initComponent: function () {
// this is where I wanted to add the components such as circle, text, etc.
var drawComponent = Ext.create('Ext.draw.Component', {
viewBox: false,
width: this.width,
height: this.height

});


// I don't want to render this in a window. I want to render it in this container (itself)
/*Ext.create('Ext.Window', {
x: 0,
y: 0,
width: this.width,
height: this.height,
border: 0,
frame: false,
layout: 'fit',
items: [drawComponent]
}).show();
*/


// Question: so how do I create the drawComponent and then draw the objects I want to render ? the problem is about setting the renderTo. I tried setting renderTo -- to different approaches. the articles in Sencha didn't help with this context of deriving from a class and adding them this way


// the below will fail because the renderTo - is not supported properly


var c = drawComponent.surface.add({
type: 'circle',
x: 50,
y: 50,
radius: 100,
fill: '#cc5'
});
},
constructor: function (config) {
MM.StartNode.superclass.constructor.call(this, config);
}
});




then finally, here's a snippet from JsStart.cshtml
---------------------------------------------------------
var wsGlass = Ext.create("MM.Glass", {
height: 500,
width: 500
});



var wsNode = Ext.create("MM.StartNode", {
x: 50,
y: 50,
height: 100,
width: 100,
itemId: 'start1'
});


contentPanel.add(wsGlass);


wsGlass.add(wsNode);




in case you missed it look at the question "// question" up above. Thank you.

slemmon
19 Feb 2014, 1:04 PM
I will address this one on the open Support Ticket.