[Dojo-interest] extending dijit.Dialog
Mike Wilcox
mwilcox at sitepen.com
Fri Jul 24 07:26:42 EDT 2009
Suggestions:
If its a few nodes, do it programmatically
If it's more than a few, use dojo.create or innerHTML
dialog.containerNode
If it's a lot of noes, I copy the dialog template string, rename it to
my extending widget and write my stuff into it.
Mike Wilcox
mwilcox at sitepen.com
http://www.sitepen.com
work: 650.968.8787 x218
cell: 214.697.4872
On Jul 23, 2009, at 11:36 PM, John Cartwright wrote:
> Thanks Mike, that makes sense. The Dialog is now displaying, but not
> using the template. Can that be done or do you have to create the DOM
> programatically?
>
> --john
>
> On Jul 23, 2009, at 6:19 PM, Mike Wilcox wrote:
>
>> dijit._Templated will give you errors there - it's already in Dialog.
>> It otherwise looks correct.
>>
>> in postCreate, connect the button like this:
>>
>> this.connect(this.closeButton, "onClick", this, "hide");
>>
>> Mike Wilcox
>> mwilcox at sitepen.com
>> http://www.sitepen.com
>> work: 650.968.8787 x218
>> cell: 214.697.4872
>>
>> On Jul 23, 2009, at 6:14 PM, John.C.Cartwright at noaa.gov wrote:
>>
>>> Thanks for your reply Mike.
>>>
>>> When I try to extend dijit.Dialog directly, I get the error:
>>> multibeam.SurveySelect2 is not a constructor
>>>
>>> the calling code is:
>>>
>>> var popup = new multibeam.SurveySelect2({title: 'this is the title',
>>> foo:'testme'});
>>> popup.show();
>>>
>>> and the new class is listed below. Could you share w/ me an example
>>> where you're extending Dialog and how you're programatically calling
>>> it?
>>>
>>> Thanks again for your help!
>>>
>>> --john
>>>
>>>
>>> new class directly extending Dialog:
>>>
>>> dojo.provide('multibeam.SurveySelect2');
>>>
>>> dojo.require('dijit.Dialog');
>>>
>>> dojo.declare('multibeam.SurveySelect2', [dijit.Dialog,
>>> dijit._Templated], {
>>>
>>> templatePath: dojo.moduleUrl('multibeam','templates/
>>> SurveySelect2.html'),
>>> widgetsInTemplate: true,
>>> foo: 'foo...',
>>> bar: 'bar!',
>>> title: 'Default Title',
>>>
>>> //set variables for the template
>>> postMixInProperties: function() {
>>> this.inherited(arguments);
>>> },
>>>
>>> postCreate: function() {
>>> this.closeButton.onClick=dojo.hitch(this,'hide');
>>> this.inherited(arguments);
>>> }
>>> });
>>>
>>>
>>> ----- Original Message -----
>>> From: Mike Wilcox <mwilcox at sitepen.com>
>>> Date: Thursday, July 23, 2009 3:14 pm
>>> Subject: Re: [Dojo-interest] extending dijit.Dialog
>>>
>>>> It's odd that you heard not to extend a Dialog, I do it all the
>>>> time.
>>>> Heather doesn't give solid reasons for it not to work. Regardless
>>>> her
>>>> solution is good enough to work with.
>>>>
>>>> You're probably running into the problem with Dialog that it fades
>>>> out
>>>> - so you technically can't destroy it for 500 ms or so. The browser
>>>>
>>>> won't let you because there are still objects pointing at dom
>>>> nodes.
>>>>
>>>> There are many ways around this, but my suggestions are:
>>>>
>>>> - Reuse the same dialog - just hide it, and show it. This requires
>>>> reseting your forms or whatever content is in there.
>>>> - Create new dialogs and ignore the old ones that are hidden but
>>>> not
>>>> destroyed. This is hard for me to do, but I've been told old dom
>>>> nodes
>>>> laying around won't hurt anything.
>>>>
>>>> You could also try timers to destroy after 500ms, but things start
>>>> to
>>>> get hairy and its harder than it sounds.
>>>>
>>>> Mike Wilcox
>>>> mwilcox at sitepen.com
>>>> http://www.sitepen.com
>>>> work: 650.968.8787 x218
>>>> cell: 214.697.4872
>>>>
>>>> On Jul 23, 2009, at 3:58 PM, John.C.Cartwright at noaa.gov wrote:
>>>>
>>>>>
>>>>> I realized that in my hide function, I was destroying the embedded
>>>>> dijit.Dialog instance, but not containing instance itself. That
>>>>> seems to
>>>>> address the duplicate ids problem, but seems rather inefficient -
>>>>> is
>>>>> there a better way? If I destroy the containing instance should
>>>>> embedded Dialog instance be explicitly destroyed as well?
>>>>>
>>>>> Thanks again for the help!
>>>>>
>>>>> --john
>>>>>
>>>>> ----- Original Message -----
>>>>> From: John.C.Cartwright at noaa.gov
>>>>> Date: Thursday, July 23, 2009 2:42 pm
>>>>> Subject: [Dojo-interest] extending dijit.Dialog
>>>>>
>>>>>> Hello All,
>>>>>>
>>>>>> I'm trying to create a custom dialog dijit. I've understood that
>>>>
>>>>>> there
>>>>>> were complications in extending dijit.Dialog directly and that
>>>> it was
>>>>>> simpler to create a new dijit from _Widget and create a
>>>> dijit.Dialog>> instance in composition.
>>>>>>
>>>>>> Heather describes the process at
>>>>>> http://heather.koyuk.net/refractions/?p=246
>>>>>> Seems to make sense, and the dialog comes up fine, however
>>>> subsequent>> attempts to call it complain about the ids for the
>>>> embedded>> NumberSpinner dijits already being in use. This despite
>>>> calling>> destroyon the widget when it closes.
>>>>>>
>>>>>> I've included the JavaScript and template below - can someone
>>>> please>> point out what I'm doing wrong? If I'm operating on a
>>>>>> misconception and
>>>>>> it's better to directly extend dijit.Dialog, could you
>>>>>> recommend a
>>>>>> reference on how to do that properly?
>>>>>>
>>>>>> Thanks for the help!
>>>>>>
>>>>>> --john
>>>>>>
>>>>>>
>>>>>> call from the main page:
>>>>>> function showSurveySelectDialog() {
>>>>>> var popup = new multibeam.SurveySelect({foo:'testme'});
>>>>>> popup.show();
>>>>>> }
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> SurveySelect.js:
>>>>>>
>>>>>> dojo.provide('multibeam.SurveySelect');
>>>>>>
>>>>>> dojo.require('dijit.Dialog');
>>>>>>
>>>>>> dojo.declare('multibeam.SurveySelect', [dijit._Widget,
>>>>>> dijit._Templated], {
>>>>>>
>>>>>> templatePath:
>>>>>> dojo.moduleUrl('multibeam','templates/SurveySelect.html'),
>>>>>> popup :
>>>>>> null, //dijit.Dialog in composition
>>>>>> widgetsInTemplate: true,
>>>>>> foo: 'foo...',
>>>>>> bar: 'bar!',
>>>>>>
>>>>>> //set variables for the template
>>>>>> postMixInProperties: function() {
>>>>>> this.popup = new dijit.Dialog({});
>>>>>> this.inherited(arguments);
>>>>>> },
>>>>>>
>>>>>> postCreate: function() {
>>>>>> this.closeButton.onClick=dojo.hitch(this,'hide');
>>>>>> this.inherited(arguments);
>>>>>> },
>>>>>>
>>>>>> show: function() {
>>>>>> this.popup.attr("content", this.domNode);
>>>>>> this.popup.show();
>>>>>> },
>>>>>>
>>>>>> hide: function(){
>>>>>> this.popup.destroy();
>>>>>> }
>>>>>>
>>>>>> });
>>>>>>
>>>>>>
>>>>>> SurveySelect.html
>>>>>> <div class="surveyselect_class">
>>>>>> <table bgcolor="yellow">
>>>>>> <tr>
>>>>>> <td colspan='2'><h3>Custom Popup</h3></td>
>>>>>> <td>
>>>>>> <div dojoAttachPoint='closeButton'
>>>>>> dojoType='dijit.form.Button'>Close</div>
>>>>>> </td>
>>>>>> </tr>
>>>>>> <tr>
>>>>>> <td style='width: 48px'>Foo:</td>
>>>>>> <td style='width: 48px'>${foo}</td>
>>>>>> </tr>
>>>>>> <tr>
>>>>>> <td style='width: 48px'>Bar:</td>
>>>>>> <td style='width: 48px'>${bar}</td>
>>>>>> </tr>
>>>>>> </table>
>>>>>>
>>>>>> <h4>Specify the Date Range</h4>
>>>>>> <table>
>>>>>> <tr>
>>>>>> <td><label for="startYear">Start Year</label></td>
>>>>>> <td>
>>>>>> <div dojoType="dijit.form.NumberSpinner"
>>>>>> style="width: 75px;"
>>>>>> intermediateChanges="true"
>>>>>> id="startYear"
>>>>>>
>>>>>> constraints="{min:1900,max:2010,pattern:'0000'}"
>>>>>> value="2009">
>>>>>> </div>
>>>>>> </td>
>>>>>> <td><label for="endYear">End Year</label></td>
>>>>>> <td>
>>>>>> <div dojoType="dijit.form.NumberSpinner"
>>>>>> style="width: 75px;"
>>>>>> intermediateChanges="true"
>>>>>> id="endYear"
>>>>>>
>>>>>> constraints="{min:1900,max:2010,pattern:'0000'}"
>>>>>> value="2009">
>>>>>> </div>
>>>>>> </td>
>>>>>> </tr>
>>>>>> </table>
>>>>>> </div>
>>>>>>
>>>>>> _______________________________________________
>>>>>> FAQ: http://dojotoolkit.org/support/faq
>>>>>> Book: http://dojotoolkit.org/docs/book
>>>>>> Forums: http://dojotoolkit.org/forum
>>>>>> Dojo-interest at mail.dojotoolkit.org
>>>>>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
>>>>>>
>>>>> _______________________________________________
>>>>> FAQ: http://dojotoolkit.org/support/faq
>>>>> Book: http://dojotoolkit.org/docs/book
>>>>> Forums: http://dojotoolkit.org/forum
>>>>> Dojo-interest at mail.dojotoolkit.org
>>>>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
>>>>>
>>>>
>>>> _______________________________________________
>>>> FAQ: http://dojotoolkit.org/support/faq
>>>> Book: http://dojotoolkit.org/docs/book
>>>> Forums: http://dojotoolkit.org/forum
>>>> Dojo-interest at mail.dojotoolkit.org
>>>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
>>>>
>>> _______________________________________________
>>> FAQ: http://dojotoolkit.org/support/faq
>>> Book: http://dojotoolkit.org/docs/book
>>> Forums: http://dojotoolkit.org/forum
>>> Dojo-interest at mail.dojotoolkit.org
>>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
>>>
>>
>> _______________________________________________
>> FAQ: http://dojotoolkit.org/support/faq
>> Book: http://dojotoolkit.org/docs/book
>> Forums: http://dojotoolkit.org/forum
>> Dojo-interest at mail.dojotoolkit.org
>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
>
> _______________________________________________
> FAQ: http://dojotoolkit.org/support/faq
> Book: http://dojotoolkit.org/docs/book
> Forums: http://dojotoolkit.org/forum
> Dojo-interest at mail.dojotoolkit.org
> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
>
More information about the Dojo-interest
mailing list