Question

我试图将一个Ext JS组件放入div中。方案是，当用户双击div时，会获得一个包含3个选项卡的配置窗口。在第三个选项卡上，我想显示我使用Ext JS创建的组件。但即使我使用renderTo与我想要的div的正确id，仍然第3个选项卡的页面是空的。有什么想法吗？

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

您定义您的ExtJS表单类但从未实际创建它的实例。添加到函数末尾：

new KitchenSink.view.form.FieldTypes;

P.S。最好将类定义移出函数。

P.P.S。考虑不要不必要地混合jQuery和ExtJS会更好。窗口和标签都可以由它们中的任何一个完成，因此最好只使用一个或另一个。

Ext JS组件在动态创建的div中

1 个答案: