DialogBox to show when you click a button with JavaScript

Question

I'm having problem connecting my Dialog box with a clickable button. I want to show a dialogbox when I click a button but unfortunately, I can't do the function very well. This is my code, I know its really bad and I need some idea or a hand:

define: function () {
    var dialog = new Ext.LayoutDialog('test', {
        modal: true;
        height: 500;
        width: 500;)
      };

                                     
           var button = new Ext.Button("btn", {
        text: "検索実行",
        handler: this.showdialog.createDelegate(this)
       });
        }
        },

Answer 1

I think, when creating an Ext.LayoutDialog, the id that will be used should be taken from a div tag then you'll simply add the method, addButton, so that the layoutdialog will have buttons. Don't use semicolons when adding configurations to the layoutdialog, you'll only use commas then the last config should no longer have a comma. Visit this link to know more about ext >> http://dev.sencha.com/deploy/ext-1.1.1/docs/ :)

var sample = Class.create();

sample.prototype = {

initialize: function () {
    this.define();
}

define: function () {

    var createDialog = function () {

        var dialog = new Ext.LayoutDialog('test', {
            modal: true,
            height: 500,
            width: 500,
            center: {
            autoscroll: true
            }
        });

        button = dialog.addButton({ text: "????" });
        button.on('click', function() {
            //name of the dialog that you want to display
            showdialog.show();
        });

        var layout = dialog.getLayout();
        layout.beginUpdate();
        var center = layout.getRegion('center');
        center.add(new Ext.ContentPanel("test", { titlebar: false }));
        layout.endUpdate();
        }
    }
}