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' }
]
}
});
Related
How do you get a list's itemTpl to interpret variables that are not a part of its immediate store / data binding? For example, I want to refer to some viewModel data of a parent component. Here's the simplest example I could come up with:
Ext.define('ListItemTplTest.view.main.MainView', {
extend: 'Ext.Container',
xtype: 'mainview',
viewModel : {
data : {
message: 'is available'
}
},
items: [
{
xtype: 'list',
itemTpl: '{title} {message}', // how to get the itemTpl to interpret the message variable?
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
}
]
})
Assume that the viewModel's message property can be updated to different values (ex/ press a button, and a controller will update the message), so hardcoding 'is available' into the itemTpl won't work.
Although my real use case is a bit different (child and parent store instead of child and parent data), the underlying principle is the same: My list component needs to interpret variables from a parent data source.
This applies to ExtJS 7.3.1 using modern toolkit.
https://docs.sencha.com/extjs/6.5.3/modern/Ext.dataview.List.html#cfg-viewModel
According to the docs, you can bind the data property for example.
Here is a fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3dvl
let list = Ext.create({
xtype: 'list',
viewModel: {
data: {
tplData: [{
title: 'Item 1',
message: 'a'
}, {
title: 'Item 2',
message: 'b'
}, {
title: 'Item 3',
message: 'c'
}, {
title: 'Item 4',
message: 'd'
}]
}
},
fullscreen: true,
itemTpl: '{title} {message}',
bind: {
data: '{tplData}'
}
});
Ext.defer(function() {
list.getViewModel().set('tplData', [{
title: 'Item 4',
message: 'a'
}])
list.getViewModel().notify() // not sure if really needed
}.bind(list), 2000)
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
}, ]
}]
}]
})
}
});
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
I have a panel with 2 radiogroups. I am trying to bind change event to these items from a controller file. Don't want to use listeners config in view file.
In View file
items : [{
xtype:'radiogroup',
fieldLabel: 'Two Columns',
// Arrange radio buttons into two columns, distributed vertically
columns: 2,
id:'new_0',
vertical: true,
items: [
{ boxLabel: 'Item 1', name: 'rb1', inputValue: '1' },
{ boxLabel: 'Item 2', name: 'rb1', inputValue: '2', checked: true},
{ boxLabel: 'Item 3', name: 'rb1', inputValue: '3' },
{ boxLabel: 'Item 4', name: 'rb1', inputValue: '4' },
{ boxLabel: 'Item 5', name: 'rb1', inputValue: '5' },
{ boxLabel: 'Item 6', name: 'rb1', inputValue: '6' }
]
},
{
xtype:'radiogroup',
fieldLabel: 'Two Columns',
id:'new_1',
// Arrange radio buttons into two columns, distributed vertically
columns: 2,
vertical: true,
items: [
{ boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
{ boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
{ boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
{ boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
{ boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
{ boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
]
}],
And in the controller I am trying to bind the change event as follows:
refs : [
{
ref :'myradio',
selector:'radiogroup'
}],
Here its pointing to the 1st item and not binding the event for 2nd radiogroup. If am binding with ids its working fine. So the question is how I can bind change events to all radiogroup without passing ids in selector. Lets say inside a panle I have 2 radiogroup items and want to bind the change event to each radiogroup.
Thanks a ton in advance for your answers!!!!
What you could do is give each radiogroup an itemId instead of an id. Then in your controller you should be able to reference each radiogroup and bind all the events you want to each. So your controller should look something like this:
...
refs: [
{
autoCreate: true,
ref: 'firstbtngroup',
selector: '#firstbtngroup', // itemId for first radio group
xtype: 'Ext.form.RadioGroup'
},
{
autoCreate: true,
ref: 'secondbtngroup',
selector: '#secondbtngroup', // itemId for second radio group
xtype: 'Ext.form.RadioGroup'
}
],
onFirstbtngroupChange: function(field, newValue, oldValue, eOpts) {
console.log('Hey you...');
},
onSecondbtngroupEnable: function(component, eOpts) {
console.log('Hey there again...');
},
onFirstbtngroupAfterRender: function(component, eOpts) {
console.log('Dude I just renedered.');
},
onSecondbtngroupDestroy: function(component, eOpts) {
console.log('Why would you destroy me!!!');
},
init: function(application) {
this.control({
"#firstbtngroup": {
change: this.onFirstbtngroupChange,
afterrender: this.onFirstbtngroupAfterRender
},
"#secondbtngroup": {
enable: this.onSecondbtngroupEnable,
destroy: this.onSecondbtngroupDestroy
}
});
}
...
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