So I have a panel with a top and bottom toolbar that is created within the dockedItems config:
dockedItems: [
Ext.create('AM.view.TopToolbar',{}), // //This line alone breaks the app
{ //Toolbars
xtype: 'toolbar',
dock: 'bottom',
items: [
{ text: 'About', itemId: 'about' },
'-',
{ text: 'Legal', itemId: 'legal' },
...
The code works fine in FF, but breaks in IE9. I think it has to do with the syntax of my create statement, but I cannot find a solution on the forums.
Here's my TopToolbar class:
Ext.define('AM.view.TopToolbar', {
extend: 'Ext.toolbar.Toolbar',
alias: 'widget.toptoolbar',
defaults: { arrowCls: '' }, //Removing black arrow from toolbar items
items: [
{ text : 'Tools',
menu : {
items: [
//rest of my toolbar items and menus
All file structures are correct and working.
Namespace is 'AM'
Application breaks in Internet Explorer-have not tried in Chrome or Safari
I get this Error
: SCRIPT16389: Unspecified error.
ext-all.js, line 38 character 51878
Any ideas?
Cheers!
Related
I need to develop a view in Sencha Touch where some form fields, textarea & button have to be put just after a list; following is the source code:
Ext.define('myapp.view.MyNotes',{
extend: 'Ext.Panel',
xtype: 'admissionnotes',
requires: [
'myapp.view.MyAppTitle',
'myapp.view.MyList',
'myapp.view.MyForm',
'myapp.view.MyAppTabBar'
],
config: {
layout: 'fit',
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'myapptitle'
},
{
xtype: 'myapplist'
},
{
xtype: 'myform'
},
{
xtype: 'myapptabbar'
}
]
}
});
The problem is that these form fields are overlapping my list. Can somebody assist to resolve this isssue?
Thanks
Maybe vbox layout would be more appropriated than fit?
layout: {type: 'vbox', align: 'stretch'}
I have simple view that extends from Ext.form.Panel and have three items.
First item is toolbar with property docked: 'top', the second is fieldset and the third item is toolbar but it's docked to bottom.
This view looks ok, but when I open it on iPhone 4 or iPhone 5 (both with iOS 6) with Google Chrome, the third item is gone.
Can sameone explain why the toolbar that is docked to bottom is not shown only on Google Chrome on iPhone ?
Ext.define("TestApp.view.Test", {
extend: "Ext.form.Panel",
requires: "Ext.form.FieldSet",
alias: "widget.testview",
config: {
scrollable: 'vertical',
items: [
{
xtype: "toolbar",
docked: "top",
title: "Title",
items: [
{
xtype: "button",
ui: "back",
text: "back",
itemId: "backBtn"
}
]
},
{ xtype: "fieldset",
items: [
{
xtype: 'textfield',
name: 'title',
label: 'Title'
},
{
xtype: 'textareafield',
name: 'description',
label: 'Description'
}
]
},
{
xtype: "toolbar",
docked: "bottom",
items: [
{
xtype: "button",
iconCls: "trash",
iconMask: true,
itemId: "deleteBtn"
}
]
}
]
}
});
Well I have a similar problem that may be the same as yours. On chrome, the navigation bar (or 'omnibar' as they call it) pushes down the app space and the bottom gets cut off.
You'll know this is the same problem if going to full screen mode unhides your bottom bar. Full screen is typically achieved in chrome by scrolling up. However, if the item docked at the top is not scrollable, you can't hide it from there. Try to hide it on the loading screen. For more information, Google search 'ios chrome fullscreen' or 'ios chrome hide navigation bar'. There are also ways to do it within your application.
This seems like a trivial issue, but... I have a list of addresses in a panel to which I wish to add geolocation coordinates (and to display them on a map) that is rendered in a form panel, so that when I click on the address of interest in the panel an onTap is fired to do execute the onSelectGeolocation given below to open the form panel rendered in the ViewPort and to add any existing records to the associated form elements:
onSelectGeolocation: function(view, index, target, record, event) {
console.log('Selected a Geolocation from the list');
var geolocationForm = Ext.Viewport.down('geolocationEdit');
if(!geolocationForm){
geolocationForm = Ext.widget('geolocationEdit');
}
geolocationForm.setRecord(record);
geolocationForm.showBy(target);
}
The line that uses the setRecord method to write any existing records in my store to the form elements, however, is preventing the default values in my form panel below from getting written to the desired form elements. When I comment this out, all is good. Problem is that I need to grab those records that exist in my store, e.g., address, to display in my form. How can I do this AND write default values to my textfield elements in my form?
My form panel that is rendered as a ViewPort via the onTap is:
Ext.define('EvaluateIt.view.GeolocationEdit', {
extend: 'Ext.form.Panel',
alias : 'widget.geolocationEdit',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Number',
'Ext.field.DatePicker',
'Ext.field.Select',
'Ext.field.Hidden'
],
config: {
// We give it a left and top property to make it floating by default
left: 0,
top: 0,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Set the width and height of the panel
width: 400,
height: 330,
scrollable: true,
layout: {
type: 'vbox'
},
defaults: {
margin: '0 0 5 0',
labelWidth: '40%',
labelWrap: true
},
items: [
{
xtype: 'datepickerfield',
destroyPickerOnHide: true,
name : 'datOfEvaluatione',
label: 'Date of evaluation',
value: new Date(),
picker: {
yearFrom: 1990
}
},
{
xtype: 'textfield',
name: 'address',
label: 'Address',
itemId: 'address'
},
{
xtype: 'textfield',
name: 'latitude',
label: 'Latitude',
itemId: 'latitude',
value: sessionStorage.latitude,
},
/* {
xtype: 'textfield',
name: 'longitude',
label: 'Longitude',
itemId: 'longitude',
value: sessionStorage.longitude
},
{
xtype: 'textfield',
name: 'accuracy',
label: 'Accuracy',
itemId: 'accuracy',
value: sessionStorage.accuracy
},*/
{
xtype: 'button',
itemId: 'save',
text: 'Save'
}
]
}
});
Behavior is as expected. I will use Ext.getCmp on the id's for each item instead.
I have a simple Ext JS 4 form inside a window (MVC style app). The example below shows 4 fields. This example is simplified, but now I need to take these fields and lay them out using hbox and vbox (and possibly others?)
How would I for example, take the first two fields and put the in a hbox at the top of the form so they display horizontally, at the top of the form, then take the rest of the fields and put them in a vbox below that hbox so they display vertically?
(my actual form has a lot more fields and I will have various other hbox/vboxes, but I am just looking to get started):
Ext.define('ESDB.view.encounter.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.encounteredit',
title : 'Edit Encounter',
layout: 'fit',
width: 700,
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'displayfield',
name: 'id',
fieldLabel: 'ID'
},
{
xtype: 'displayfield',
name: 'cid',
fieldLabel: 'cid#'
},
{
xtype: 'displayfield',
name: 'addedDate',
fieldLabel: 'Added'
},
{
xtype: 'displayfield',
name: 'clientID',
fieldLabel: 'Client#'
}
}
]
}
I have looked at various examples of layout sencha page , sencha docs, and finally another one -- this last one has something that looks close - in the form tree, fieldsets in 2 columns, it shows a form with items[] and inside there some layout code, and I was able to get that to partially work, but was not able to convert it to an hbox/vbox style layout. When I set it to hbox, there is no height to the hbox, so I can not see the fields.
Here is example:
Ext.define('ESDB.view.encounter.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.encounteredit',
title : 'Edit Encounter',
layout: 'fit',
width: 700,
autoShow: true,
items: [{
xtype: 'form',
items: [
{
xtype: 'panel',
border: false,
layout: 'hbox',
items: [
{
xtype: 'displayfield',
name: 'id',
fieldLabel: 'ID',
flex: 0.5
},
{
xtype: 'displayfield',
name: 'cid',
fieldLabel: 'cid#',
flex: 0.5
}
]
},
{
xtype: 'displayfield',
name: 'addedDate',
fieldLabel: 'Added'
},
{
xtype: 'displayfield',
name: 'clientID',
fieldLabel: 'Client#'
}
]
}]
});
If you want to displays blocks in form from up to down, you don't need to change layout. I've wrapped only 2 first display fields into panel with hbox layout (because you want to split only first row).
You can't mix two layouts in a single panel. So, you have to use sub-panels to lay-out the fields according to various rules. These sub-panels don't need (and shouldn't) be form panels, just normal panels with form layout (so you will get field labels).
I routinely did something similar to achieve column-like layout for the form fields (which isn't very well supported by extjs): so the top form panel had a vbox layout, then there were some sub-panels with hbox layout and sub-sub-panels (or fieldsets) with form layout that contained the fields. Column layout could also be helpful in some cases.
PS the last example you mention (2 columns with fieldsets) is actually a form panel with column layout containing two fieldsets (subpanels) with form layout. So it's structured similar to what I've described above.
Learning Sencha Touch, and already love it. Much better then JQTouch in my opinion. Just working on some app idea I had, and I need to have 2 tabs where the first tab will hold a ext.List with some data. I've come this far, but have one problem I can't figure out.
Problem: The detailpanel won't show when I touch a name from the list. When it wasn't in a tab panel, I had no problems at all. Tried the forums, can't find the solution.
This is my entire code (based upon many examples):
ShotjesApp = new Ext.Application({
name: "Shotjes",
launch: function() {
ShotjesApp.detailPanel = new Ext.Panel({
id: 'detailpanel',
tpl: 'Omschrijving: {Naam} <br> <br> {Inhoud}',
dockedItems: [
{
xtype: 'toolbar',
items: [{
text: 'terug',
ui: 'back',
handler: function() {
ShotjesApp.Viewport.setActiveItem('listwrapper', {type:'slide', direction:'right'});
}
}]
}
]
});
ShotjesApp.listPanel = new Ext.List({
id: 'disclosurelist',
store: ListStore,
itemTpl: '<div class="contact">{Naam} {Basis}</div>',
grouped: true,
onItemDisclosure: function(record, btn, index) {
var naam = record.data.Naam;
ShotjesApp.detailPanel.update(record.data);
ShotjesApp.Viewport.setActiveItem('detailpanel') //THIS WON'T WORK?
ShotjesApp.detailPanel.dockedItems.items[0].setTitle(naam);
}
});
ShotjesApp.listWrapper = new Ext.Panel ({
id: 'listwrapper',
layout: 'fit',
items: [ShotjesApp.listPanel],
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Shotjes'
}],
});
this.mainView = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
ui: 'dark',
layout: { pack: 'center' }
},
cardSwitchAnimation: {
type: 'fade',
cover: true
},
items:[{
title: 'Shotjes',
cls: 'card 1',
id: 'card 1',
items: [ShotjesApp.listWrapper, ShotjesApp.detailPanel] ,
iconCls: 'home',
layout: 'card',
}, {
title: 'About',
cls: 'card 2',
id: 'card 2',
html: 'about',
iconCls: 'calendar',
layout: 'card',
}
],
tabBarDock: 'bottom',
fullscreen: true,
layout: 'fit'
});
this.Viewport = this.mainView;
}
});
try this
ShotjesApp.Viewport.setActiveItem(ShotjesApp.detailPanel);
Also in your code the semicolon is missing.
Cool, thanks. I also added this, otherwise the slide would open as a new tab:
ShotjesApp.Viewport = new Ext.Panel ({
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
items: [ShotjesApp.listWrapper, ShotjesApp.detailPanel]
});
Combined with your change, it works perfectly..
One huge problem though. Because the Viewport is Fullscreen, The second tab won't show when I press it. When I set the second tab to Fullscreen: true, I see the animation, but first tab is still on top of it.
When I change fullscreen: false in the Viewport, the old problem comes back and the details pane won't show.