PDA

View Full Version : How to draw a shape and make an event drag and drop



alexanderHs
26 Aug 2011, 2:33 PM
I'm was looking but i cant find a way to draw a shape(circle,square) in sencha touch, just for drag that shape in a tablet. if some one knows how make this, would appreciate the help.

NickT
26 Aug 2011, 8:13 PM
I ended up building an SVGPanel and an SVGTag class... something like this...



Ext.ux.svg.SVGPanel = Ext.extend(Ext.Container, {
html:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1600" height="1600">',
initComponent : function() {
Ext.ux.svg.SVGPanel.superclass.initComponent.call(this);
var sb = new Squiggle.StringBuffer();
sb.append('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1600" height="1600">');
if(this.items && this.items.items && Ext.isArray(this.items.items)){
// loop through all of the items and collect the composite svg structure
for(var i=0; i < this.items.items.length; i++){
if(this.items.items[i].isSVG && this.items.items[i].svg){
sb.append(this.items.items[i].svg)
}
}


}
sb.append('</svg>');
this.html = sb.toString();
}
});


Ext.reg('svg', Ext.ux.svg.SVGPanel);

Ext.ux.svg.Tag = Ext.extend(Ext.Container, {
isSVG:true,
initComponent : function() {
Ext.ux.svg.Tag.superclass.initComponent.call(this);
var sb = new Squiggle.StringBuffer();
sb.append('<' + this.tag + ' ');
if (this.initialConfig) {
for (var key in this.initialConfig) {
if (Ext.isString(this.initialConfig[key]) && key != 'xtype') {
if (key != 'tag') {
if (key != 'innerHtml') {
sb.append(key + '="' + this.initialConfig[key] + '" ');
}
}
}
}
}
sb.append('>');
if(this.initialConfig['innerHtml']){
sb.append(this.initialConfig['innerHtml'] );
}
if (this.items && this.items.items && Ext.isArray(this.items.items)) {
// loop through all of the items and collect the composite svg structure
for (var i = 0; i < this.items.items.length; i++) {
if (this.items.items[i].isSVG && this.items.items[i].svg) {
sb.append(this.items.items[i].svg)
}
}


}
sb.append('</' + this.tag + '>');
this.svg = sb.toString();
}
});


Ext.reg('svg.tag', Ext.ux.svg.Tag);

then, just define your svg inline... like ...

{
xtype:'svg.tag',
tag:'defs',
items:[
{
xtype:'svg.tag',
tag:'symbol',
id:'sliderSymbol',
overflow: 'visible',
items:[
{
xtype:'svg.tag',
tag:'line',
x1:'0',
y1:'-10',
x2:'0',
y2:'10',
stroke:'green',
'stroke-width': '5',
'pointer-events':'none'
}
]
},
{
xtype:'svg.tag',
tag:'radialGradient',
id:'glowGradient',
items:[
{
xtype:'svg.tag',
tag:'stop',
offset:'5%',
'stop-color':'#F60'
},
{
xtype:'svg.tag',
tag:'stop',
offset:'95%',
'stop-color':'#FF6'
}
]
}
]
}