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
}, ]
}]
}]
})
}
});
Related
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' }
]
}
});
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
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!
Trying to learn Sencha Touch 2 and I can't seem to find out how to set the default selected option in a selectfield. Here's what I've tried in my Main.js view:
Ext.define('mobile-form.view.Main', {
extend: 'Ext.Container',
requires: [
'Ext.TitleBar',
'Ext.form.FieldSet',
'Ext.field.Select',
],
config: {
fullscreen: true,
layout: 'vbox',
items: [
{
xtype: 'titlebar',
docked: 'top',
cls: 'titlebar'
},
{
xtype: 'panel',
scrollable: 'vertical',
cls: 'form_container',
flex: 1,
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'selectfield',
label: 'Desired Policy Type',
labelWidth: 'auto',
name: 'test',
options: [
{text: 'Test 1', value: '1'},
{text: 'Test 2', value: '2'},
// this doesn't work
{text: 'Test 3', value: '3', selected: true},
{text: 'Test 4', value: '4'}
],
listeners: {
// this doesn't work
painted: function() {
console.log(this);
this.select(3);
}
}
}
]
}
]
}
]
}
});
Do I need to instead wait till the Application itself is ready? Something like this:
Ext.application({
name: 'mobile-form',
requires: [
'Ext.MessageBox'
],
views: ['Main'],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('mobile-form.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
},
onReady: function() {
{SomeWayToTargetElement}.select(2);
}
});
If so how do I set an identifier on elements in my views so that I can target them within the onReady event of the application?
Any assistance is greatly appreciated. Loving Sencha so far. Their docs are great. Just need to find more examples of those docs and I the ink we'll all be much better off. :P
Just use the value attribute on the selectfield's config :
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose one',
value:'second',
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
}
]
}
]
});
You can also do it with listeners, like your were trying to do
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose one',
listeners:{
initialize:function(){
this.setValue('second');
}
},
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
}
]
}
]
});
Hope this helps