UPDATE:
I found if do this
this.add([topToolbar, {
xtype: "fieldset",
items: [showNameEditor, textEditor]
},
showsList, bottomToolbar
]);
and
layout: {
type: 'fit'
}
Then the list shows but the textfields don't appear
Original:
I am trying to get a list to show in my panel the two textFields show but the list doesn't appear. I tried different Stores with the list but still it doesn't show.
var showNameEditor = {
xtype: 'textfield',
name: 'name',
label: 'Name',
required: true
};
var textEditor = {
xtype: 'textfield',
name: 'name',
label: 'Name',
required: true
};
var showsList = {
xtype: 'list',
title: 'Sample',
itemTpl: '{title}',
data: [{
title: 'Item 1'
}, {
title: 'Item 2'
}, {
title: 'Item 3'
}, {
title: 'Item 4'
}
]
};
this.add([topToolbar, {
xtype: "fieldset",
items: [showNameEditor, showsList, textEditor]
},
bottomToolbar
]);
You have to specify dimensions for fieldset & form if you want to display their contents so use width & height configs
Related
I'm new to ExtJS and have some trouble implementing a radiogroup.
My structure is as follows:
I have a tab.Panel that loads form.Panel which is supposed to include a radiogroup amongst other things.
The file for the tab panel contains:
Ext.define('Test-Application.view.tab.Panel',{
extend: 'Ext.tab.Panel',
alias: 'widget.tab',
xtype: 'tab',
fullscreen: true,
controller: 'main',
requires: [
'Test-Application.view.form.TestForm'
],
items: [
{
title: 'Testform',
xtype: 'testform'
}
]
});
And the file for the testform contains:
Ext.define('Test-Application.view.form.TestForm', {
extend: 'Ext.form.Panel',
xtype: 'testform',
// layout: 'form',
items: [
{
xtype: 'radiogroup',
label: 'Auto Layout:',
items:
[
{ label: 'Item 1', value: 1},
{ label: 'Item 2', value: 2, checked: true },
{ label: 'Item 3', value: 3},
{ label: 'Item 4', value: 4},
{ label: 'Item 5', value: 5},
]
}
]
});
All I get is the error "Uncaught Error: [Ext.createByAlias] Unrecognized alias: widget.radiogroup".
Note that things like radiofields, textfields, comboboxes etc. seem to work just fine (though the radiofields don't work if I use layout: 'form' for some reason. They don't throw an error but simply don't show up).
Are you sure you used extjs 7 instead of extjs 6.7 ?
Check alert(Ext.versions.ext.version) to check the version.
radiogroup is only available from 7.0.
Using radiogroup in extjs 6.7 is not allowed and you will get error message (as you got)
Uncaught Error: [Ext.createByAlias] Unrecognized alias:
widget.radiogroup
Here is example of working code in extjs 7.0.0:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create("Ext.Panel", {
renderTo: Ext.getBody(),
fullscreen:true,
autoShow: true,
items: [{
xtype: 'formpanel',
items: [{
xtype: 'radiogroup',
label: 'Auto Layout:',
items: [{
label: 'Item 1',
value: 1
}, {
label: 'Item 2',
value: 2,
checked: true
}, {
label: 'Item 3',
value: 3
}, {
label: 'Item 4',
value: 4
}, {
label: 'Item 5',
value: 5
}, ]
}]
}]
})
}
});
My app requires a lot of data-input from the user. And there's repetition, so for example the person fields must be filled in three times (all possibly different).
Person fieldset that I want to reuse
Ext.define('MyApp.form.PersonForm',
{
extend: 'Ext.form.FieldSet',
xtype: 'personform',
config:
{
items:
[
{
xtype: 'textfield',
name: 'surname',
label: 'Naam:',
placeHolder: ''
},
{
xtype: 'textfield',
name: 'adres',
label: 'Adres:',
placeHolder: 'Straat en huisnummer'
},
{
xtype: 'textfield',
name: 'zipCode',
label: 'Postcode:',
placeHolder: '1234AB'
},
{
xtype: 'textfield',
name: 'city',
label: 'Plaats:',
placeHolder: 'Of stad'
},
{
xtype: 'textfield',
name: 'country',
label: 'Land:',
placeHolder: ''
},
{
xtype: 'textfield',
name: 'phone',
label: 'Telefoon:',
placeHolder: ''
},
{
xtype: 'textfield',
name: 'email',
label: 'e-mail:',
placeHolder: ''
}
]
}
});
So I've made small fieldset and am trying to reuse them several times in the form. But when I try to load the saved data it concats all fields with the same name into an array of fields, so they don't get updated.
So instead of having one fieldset with others in it, each fieldset now only contains the fields directly in it. And the must all be placed in their own container so I can access them in the controller and update\load their respective data.
Ext.define('MyApp.form.UserDataForm',
{
extend: 'Ext.Container',
requires:
[
'Ext.form.FieldSet',
'Ext.form.Panel',
'Ext.field.Hidden',
'MyApp.form.PersonForm'
],
xtype: 'userdataform',
config:
{
items:
[
{
xtype: 'formpanel',
itemId: 'userDataForm',
flex: 1,
items:
{
xtype: 'fieldset',
items:
[
{
xtype: 'hiddenfield',
name: 'id'
},
{
xtype: 'textfield',
name: 'reportCode',
label: 'Meld code:',
itemId: 'txtReportCode'
},
{
xtype: 'textfield',
name: 'firstName',
label: 'Voornaam:',
itemId: 'txtFirstName'
}
]
}
},
{
xtype: 'personform',
name: 'person'
}
]
}
});
The problem is that the fieldset directly in the panel is invisible (unlike when all fieldsets where nested in each other). So this only shows the personform. However the first fieldset is shown when I force the height to a set value.
Code for loading saved data and saving input:
onLoadUserData: function ()
{
var userDataStore = Ext.getStore('userDataStore');
var userDataRecord = userDataStore.getFirst();
var userDataView = this.getUserDataView();
var userDataForm = this.getUserDataForm();
userDataForm.setRecord(userDataRecord);
userDataForm.down('personform[name=insured]').setRecord(userDataRecord.data.person);
},
onTapBtnSave: function ()
{
var userDataView = this.getUserDataView();
var userDataStore = Ext.getStore('userDataStore');
var isNew = userDataStore.getCount() == 0;
var userDataRecord = userDataStore.getFirst();
userDataView.updateRecord(userDataRecord);
userDataRecord.data.person = userDataRecord.data.person|| Ext.create('MyApp.model.PersonModel');
userDataView.updateRecord(userDataRecord.data.person);
if (isNew)
{
userDataStore.add(userDataRecord);
}
else
{
userDataRecord.setDirty();
}
userDataStore.sync();
}
I tried using layout: 'vbox' and layout: 'flex' and or not using the flex: 1 on the containing panel.
So how do I get Sencha to show those fields when they are there, without forcing a specific height?
Edit: the problem seems to lie in using a form.Panel instead of a container. While the container will simply take the space it needs the Panel won't. But I need it to be a panel to get the loading and saving of user input working.
Using Sencha Touch:
I want to create a slide out menu. But not like the facebook type:
What I want it to do instead is slide out on top(over the container under the title) and under the menu so it goes over it and not push it off to the right:
Ive searched and havent found any samples. Can anyone recommend a site or a tutorial on doing this.
Update - 5/24/2014
Thanks all for the different advice. The only thing is that I dont want it to look like the FB sliders. Ive seen those. I want it to slide over like the second screen shot i added. I was able to create it. Here is my code:
Ext.define('Slider.view.Main',
{
extend: 'Ext.Container',
xtype: 'mainPage',
requires:
[
'Ext.TitleBar',
'Ext.form.Panel',
'Ext.List',
'Ext.navigation.View',
'Ext.Component',
'Ext.Panel'
],
config:
{
layout: 'fit',
items:
[
{
xtype: 'titlebar',
docked: 'top',
title: 'Slider Test',
items:
[
{
iconCls: 'list',
align: 'left',
handler: function()
{
var con1 = Ext.ComponentQuery.query('container > #container1')[0];
var draggable = Ext.ComponentQuery.query('container > #navContainer')[0];
if(con1.element.hasCls('out'))
{
draggable.hide({type: 'slideOut', direction: 'left', duration : 500});
con1.element.removeCls('out').addCls('in');
}
else
{
con1.element.removeCls('in').addCls('out');
draggable.show({type:'slideIn', direction:'right', duration : 500});
}
}
}
]
},
{
xtype: 'container',
layout: 'hbox',
itemId: 'container1',
items:
[
{
xtype: 'container',
layout: 'card',
width: 250,
hidden: true,
itemId: 'navContainer',
style: 'position: absolute; top: 0; left: 0; height: 100%;z-index: 2',
zIndex : 1,
items:
[
{
xtype: 'list',
itemTpl: '{title}',
data:
[
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
}
]
},
{
xtype: 'container',
itemId: 'mainContainer',
width: '100%',
html: 'Main content area'
}
]
}
]
}
});
Check this sample Slide navigation with sencha touch
Set cover to true.
Ext.Viewport.setMenu(this.createMenu(), {
side: 'left',
cover: true
});
This will have the menu slide out on top of the container. I'm not sure about having it under the nav bar, but some maybe some clever css can solve that problem.
Thanks everyone for the tips. I was able to create what I wanted and posted the code under the update
Ext.define('myapp.view.alerts.Alerts', {
extend : 'Ext.List',
fullscreen: true,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
});
The list gets displayed, but not text inside them. Why is this happening? This is the exaple from Sencha Docs. http://docs.sencha.com/touch/2.3.1/#!/api/Ext.dataview.List Please help.
In the example, they are using Ext.create, meaning they can pass the config options directly. You, on the other hand, extend the class, so you must put overridden config options in the config, not the root:
Ext.define('myapp.view.alerts.Alerts', {
extend : 'Ext.List',
config: {
fullscreen: true,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
}
});
I'm trying to reuse a radiogroup class that I've created, but I can't seem to get it working. Here's my code:
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'Test',
appFolder: 'app',
controllers: ['RadioController'],
launch: function() {
Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
xtype: 'panel',
region: 'center',
title: 'buttons',
items: [{
xtype: 'form',
items: [{
xtype: 'radiobuttons',
fieldLabel: 'group 1',
//name: '1',
defaults: {
name: 'button1'
}
}, {
xtype: 'radiobuttons',
fieldLabel: 'group 2',
//name: '2',
defaults: {
name: 'button2'
}
}]
}]
}]
});
}
});
RadioController.js
Ext.define('Test.controller.RadioController', {
extend: 'Ext.app.Controller',
models: [],
stores: [],
views: ['RadioButtons'],
init: function() {
}
});
RadioButtons.js
Ext.define('Test.view.RadioButtons', {
extend: 'Ext.form.RadioGroup',
alias: 'widget.radiobuttons',
items: [{
boxLabel: 'radio 1',
inputValue: 'radio 1'
}, {
boxLabel: 'radio 2',
inputValue: 'radio 2'
}]
});
What happens is, the page gets loaded, and everything looks right. However, when I click a radio button in 'group 1' and then click a radio button in 'group 2', I lose the clicked button in 'group 1'. I thought radio buttons worked off of the 'name' property, and if they had a different name property, they'd basically be in a different group... thus, I shouldn't lose group 1's clicked button. Basically, I'm trying to create this jsfiddle code by reusing a class I've made. Is this possible?
It's good to note that if I use the class's code in place of using the class, I can get my results, but this isn't good practice because that's what classes try to eliminate.
This works for me... thanks to bizcasfri on the Sencha forums.
RadioButtons.js
Ext.define('RadioButtons', {
extend : 'Ext.form.RadioGroup',
alias : 'widget.radiobuttons',
constructor: function (config) {
Ext.apply(this, {
defaults: {
xtype: 'radio',
name: config.name
},
items: [
{
boxLabel: 'Radio 1',
inputValue: '1'
},
{
boxLabel: 'Radio 2',
inputValue: '2'
}
]
});
this.callParent(arguments);
}
});
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'Test',
appFolder: 'app',
launch: function() {
Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
xtype: 'panel',
region: 'center',
title: 'buttons',
items: [{
xtype: 'form',
items: [{
xtype: 'radiobuttons',
fieldLabel: 'group 1',
name: 'radiogroup1'
}, {
xtype: 'radiobuttons',
fieldLabel: 'group 2',
name: 'radiogroup2'
}]
}]
}]
});
}
});
Take note of the constructor method in the RadioButtons class... that's the trick to it all!