Расширение dojo.gfx.Group с созданными по умолчанию фигурами

Question

Я пытаюсь создать несколько простых компонентов пользовательского интерфейса с помощью dojo.gfx. Мне удалось расширить dojo.gfx.Group, но я не в силах вытащить любую из фигур по умолчанию, нарисованную на поверхности. Осматривая визуализированный SVG в Firebug, по праву есть узел, но нет прямоугольника.

Упрощенный класс выглядит так:

dojo.provide("gfxui.SimpleButton");

dojo.require("dojox.gfx.shape");//-¿ needed?
dojo.require("dojox.gfx.svg");
dojo.require("dojox.gfx._base");

dojo.declare("gfxui.SimpleButton", dojox.gfx.Group, {
    constructor: function(){
        this.draw();
    },
    draw:function(){
        var bg = this.createRect(this.rect_props);
        //var bg = this.createObject(dojox.gfx.Rect);
    }
}

gfxui.SimpleButton.nodeType = dojox.gfx.Group.nodeType;

dojo.extend(dojox.gfx.Surface, {
    createButton: function(){
        var button = this.createObject(gfxui.SimpleButton, null, true);
        this.add(button);
        return button;
    }
});

И JavaScript в HTML выглядит так:

dojo.require("dojox.gfx");
dojo.require("gfxui.SimpleButton");

function init(){
    var g = dojox.gfx;
    var surface = dojox.gfx.createSurface(dojo.byId("gfx_holder"), 800, 280, "#eee");
    var button = container.createButton();
};
dojo.addOnLoad(init);

Answer 1

Я предпочитаю простую технику увеличения. Ниже приводится содержание тега сценария:

// let's include gfx (renderer will be selected dynamically)
dojo.require("dojox.gfx");

// useful short names
var d = dojo, g = dojox.gfx;

// our creator function
function createButton(color){
  // let's create our main shape: group
  var group = this.createGroup();
  // add custom properties, if any
  group._rect = group.createRect().
    setShape({x: 5, y: 5, width: 100, height: 30}).
    setStroke("black").
    setFill(color);
  return group;
}

// we want it to be available on groups and surfaces
d.extend(g.Surface, {createButton: createButton});
d.extend(g.Group,   {createButton: createButton});

// let's test the result
dojo.addOnLoad(function(){
  var s = g.createSurface(dojo.byId("surface"), 500, 400),
      b = s.createButton("red");
});

В приведенном выше примере предполагается, что существует <div> называется "поверхность".

Техника дополнения работает для любого средства визуализации, независимо от его реализации, и использует только опубликованные API.