Ext JS component in a dynamically created div

Question

I m trying to put an Ext JS component into a div. The scenario is, when user double clicks on a div, gets a configuration window which has 3 tabs. On the third tab i want to show a component which i created with Ext JS. But even though i use renderTo with correct id of the div i want, still the page of 3th tab is empty. Any ideas ?

function createPropertiesWindowForApp(appName) {
        var wnd = $('<div class="modal fade" id="AppPropertiesWindow"/>');
        var dialog = $('<div class="modal-dialog"/>').appendTo(wnd);
        var content = $('<div class="modal-content" id="app-x" style="width: 1000px; margin-left:-200px ;"/>').appendTo(dialog);


        var header = $('<div class="modal-header" style="cursor:move"/>').appendTo(content);
        var body = $('<div class="modal-body"style="margin: 1px;padding: 0 15px; height: 600px; overflow-y: auto;"/>').appendTo(content);
        var footer = $('<div class="modal-footer" style="cursor:move">').appendTo(content);
        var errorText=$('<div class="scriptError" style="color:red; float:left; margin-top: 0.5cm;"></div>').appendTo(footer); 
        var closeButton = $('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>').appendTo(header);
        var title = $('<a class="modal-title" data-type="text" style="font-size:20px;cursor:text">' +appName+ '</a>').appendTo(header);
        var tabs = $('<ul class="nav nav-tabs"/>').appendTo(body);//nav tabs
        var tabContent = $('<div class="tab-content" style="margin: 5px"/>').appendTo(body);//tab panes
        var cancelButton = $('<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>').appendTo(footer);
        var saveButton = $('<button type="button" class="btn btn-primary"  id="saveButton">Save changes</button>').appendTo(footer);
        $('<li class="active"><a href="#tab1" data-toggle="tab">Output Table</a></li>').appendTo(tabs);
        $('<li><a href="#tab2" data-toggle="tab">Alignment Formula</a></li>').appendTo(tabs);
        $('<li><a href="#tab3" data-toggle="tab">Configurations</a></li>').appendTo(tabs);

      var outputTableContent=$('<div class="tab-pane active" id="tab1">'+"Page 1" +'</div>').appendTo(tabContent);
      var alignmentFormulaContent=$('<div class="tab-pane" id="tab2">'+"Page 2" +'</div>').appendTo(tabContent);
      var configurationsContent=$('<div class="tab-pane" id="tab3">'+"Page 3" +'</div>').appendTo(tabContent);

        wnd.appendTo($('body'));

        Ext.define('KitchenSink.view.form.FieldTypes', {
    extend: 'Ext.form.Panel',
    xtype: 'form-fieldtypes',
    renderTo:"tab3",

    frame: true,
    title: 'Form Fields',
    width: 400,
    bodyPadding: 10,
    layout: 'form',

    items: [{
        xtype: 'textfield',
        name: 'textfield1',
        fieldLabel: 'Text field',
        value: 'Text field value'
    }, {
        xtype: 'hiddenfield',
        name: 'hidden1',
        value: 'Hidden field value'
    },{
        xtype: 'textfield',
        name: 'password1',
        inputType: 'password',
        fieldLabel: 'Password field'
    }, {
        xtype: 'filefield',
        name: 'file1',
        fieldLabel: 'File upload'
    }, {
        xtype: 'textareafield',
        name: 'textarea1',
        fieldLabel: 'TextArea',
        value: 'Textarea value'
    }, {
        xtype: 'displayfield',
        name: 'displayfield1',
        fieldLabel: 'Display field',
        value: 'Display field <span style="color:green;">value</span>'
    }, {
        xtype: 'numberfield',
        name: 'numberfield1',
        fieldLabel: 'Number field',
        value: 5,
        minValue: 0,
        maxValue: 50
    }, {
        xtype: 'checkboxfield',
        name: 'checkbox1',
        fieldLabel: 'Checkbox',
        boxLabel: 'box label'
    }, {
        xtype: 'radiofield',
        name: 'radio1',
        value: 'radiovalue1',
        fieldLabel: 'Radio buttons',
        boxLabel: 'radio 1'
    }, {
        xtype: 'radiofield',
        name: 'radio1',
        value: 'radiovalue2',
        fieldLabel: '',
        labelSeparator: '',
        hideEmptyLabel: false,
        boxLabel: 'radio 2'
    }, {
        xtype: 'datefield',
        name: 'date1',
        fieldLabel: 'Date Field'
    }, {
        xtype: 'timefield',
        name: 'time1',
        fieldLabel: 'Time Field',
        minValue: '1:30 AM',
        maxValue: '9:15 PM'
    }]
});


        return wnd;
    }

Answer 1

You are defining your ExtJS form class but never actually creating an instance of it. Add to the end of your function:

new KitchenSink.view.form.FieldTypes;

P.S. It will be better to move the class definition out of the function.

P.P.S. It will be even better to consider not mixing jQuery and ExtJS unnecessarily. Both windows and tabs can be done by any of them, so better use only one or another.