javascript - Ext JS component in a dynamically created div -

i m trying put ext js component div. scenario is, when user double clicks on div, gets configuration window has 3 tabs. on third tab want show component created ext js. though use renderto correct id of div want, still page of 3th tab empty. 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;     } 

you defining extjs form class never creating instance of it. add end of function:

new kitchensink.view.form.fieldtypes; 

p.s. better move class definition out of function.

p.p.s. better consider not mixing jquery , extjs unnecessarily. both windows , tabs can done of them, better use 1 or another.