Components not responding.

[mgfeller]

I built a small application accordingly to the Kitchensink example. On the left side I have a FormPanel which has a Toolbar. However, Components on the left side (like the button or the datefieldpicker) are not responding.

The main code for the view is here:


this.searchFormPanel = Ext.create("Ext.form.FormPanel", {
id: "leftSidePanel",
floating: false,
centered: false,
hidden: Ext.dom.AbstractElement.getOrientation() == "portrait" ? true : false,
docked: "left",
scroll: "vertical",
autoScroll: true,
width: 400,
items: [{
id: "mainSearchToolbar",
xtype: "titlebar",
ui: "light",
docked: "top",
title: "Search...",
items: [{
xtype: "button",
id: "clearButton",
action: "onClearButtonTap",
hidden: false,
align: "left",
disabled: false,
text: "Clear"
}]
},
{
xtype: "fieldset",
style: "clear: both;",
items: [{
xtype: "textfield",
name: "name",
label: "Name"
},
{
xtype: "textfield",
name: "description",
label: "Description"
},
{
xtype: "datepickerfield",
name: "dateScored",
label: "Date scored"
},
{
xtype: "spacer"
},
{
xtype: "button",
name: "submit",
text: "Search",
handler: function() {
alert("search clicked!");
},
scope: this
}]
}]
});


if(Ext.os.deviceType == "Phone") {
Ext.define("MyApp.view.Main", {
id: "mainNestedList",
extend: "Ext.form.FormPanel",
requires: [
"Ext.TitleBar"
],
config: {
title: "myApp",
useTitleAsBackText: false,
toolbar: {
id: "mainNavigationBar"
},
fullscreen: true
}
});
}
else {
Ext.define("MyApp.view.Main", {
extend: "Ext.Container",
requires: [
"Ext.TitleBar"
],
config: {
fullscreen: true,
items: [{
id: 'launchscreen',
cls : 'launchscreen',
html: "<br /<br /><br /><br /><br />Welcome to my Application!"
}, this.searchFormPanel,
{
id: 'mainNavigationBar',
xtype : 'titlebar',
docked: 'top',
style: "clear: both",
title : Ext.is.Phone ? "myApp" : "my Application",
items: [{
xtype: "button",
id: "backButton",
hidden: false,
align: "left",
ui: "back",
text: "Back"
},{
xtype: "button",
id: "searchFormButton",
hidden: (Ext.dom.AbstractElement.getOrientation() == "landscape"),
align: "left",
text: "Search..."
}]
}]
}
});
}




The spacer on the FormPanel is not displaying correctly, too.

30612

[mitchellsimoens]

is this code outside of Ext.application#launch or Ext.setup? I think you need to have your searchFormPanel as it's own class using Ext.define and give it an xtype and then in your MyApp.view.Main, you can use { xtype : 'searchpanelxtype' }

[mgfeller]

I have it in my main view, so it is automatically loaded when launching the application.

How can I set the xtype for my view?

[mitchellsimoens]

Ext.define('MyClass', {
extend : 'Ext.form.Panel',
xtype : 'myxtype'
});

[mgfeller]

Ok, tried that but did not work. It was not visible.

But it is ok, had to restruct the whole application and I am using a different layout now.