When moving between panels I get the following error
[WARN][Ext.Component#constructor] Registering a component with a id (`logOutButton`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`.
I can go back to the previous screen but the cannot go forward again without getting the above error.
To combat this I have tried using the code below, but it does not work. Can anyone help me out?
var loginView = Ext.getCmp('login');
if(!loginView){
Ext.getCmp('loginTest2').destroy();
loginView = Ext.create('com.view.Login');
}
Ext.Viewport.setActiveItem('login');
I also tried:
if(Ext.getCmp('login')){
Ext.Viewport.setActiveItem('Login');
}else{
Ext.Viewport.setActiveItem(Ext.create('com.view.Login'));
}
Neither of these work and result in the same error and a blank screen. I am using Sencha Touch 2.
we can simply use following line to navigate from one panel to another..
Ext.Viewport.animateActiveItem({ xtype: "cat" }, { type: "slide", direction: "up" });
here, xtype is that we can define for the panel we want to display, like this...,
Ext.define('BeLocal.view.LeftCurveList', {
extend: 'Ext.Panel',
**xtype: 'cat',**
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
width: '100%',
padding:0,
title: 'BeLocal Places',
items:[{
xtype: 'button',
ui: 'back',
text: 'Back',
]
},
]
}
});
To avoid this error do not use id for button or any other item instead of id use action config for button or use item id .to destroy a component using itemId simply use this`
Ext.ComponentQuery.query('list[action=diaryselectlist]')[0].destroy();
above it just destroying a list to whom i gave action not id you can give itemId instead of action in this ..
hope you will enjoy this
Related
So to give you an idea of what I am working with, I have a popped up modal that contains a series of individual forms in the modal. Based off the current selection, the forms will be either disabled, or enabled. If they are disabled, I would like to display a message box over the disabled form in the modal explaining why it is disabled.
I've tried using Ext.msg.alert and other forms of Ext.msg, however I am unsuccessful in getting them to remain over the forms. I can align them over the form, but upon scrolling it doesn't stay over the form, it just stays fixed in the main window position, instead of follow the form inside the modal. Is this possible to do?
I then tried to do it in a hackish way and set a loading mask over the form, which displays the message, but that as well moves when you scroll down.
I attempted to use the 'fixed' property of the components, but it seemed to do nothing.
I am not sure if I am looking at this from the wrong angle or what, but things don't seem to be working out for me.
Any ideas?
listeners:{
afterlayout: function(form, eOpts){
if(form.disabled){
var msg = Ext.Msg.alert({title:'Disabled', modal: false, fixed: true, msg:'Blah blah blah mmmkay.'});
msg.alignTo(form.el, 'c-c');
//fixed
}
}
},
Try this and let me know the result. Basically, we can override the base components or write our components.
Ext.define('Artlantis.view.OverlayWindow', {
extend: 'Ext.window.Window',
alias: 'widget.overlaywin',
defaults: {
autoScroll: true
},
layout: 'fit',
width: '50%',
height: '50%',
modal: true,
closeAction: 'destroy',
initComponent: function() {
this.callParent(arguments);
}
});
// to call this component
Ext.create('Artlantis.view.OverlayWindow',{
title: 'Disabled',
items: [
{
xtype: 'panel',
items: [
...
]
}
]
});
// or call by xtype
...
xtype: 'overlaywin'
I have a strange problem with all my selectfields. When I enter a view for the first time containing a selectfield with a change event listener defined in the controller, it works fine. I can do a select and the event will fire. But when I enter an other view and pop that view so I return in the view with the selectfield, the change event does not fire anymore. Also the selected value is gone. I've tried to add the listeners to the config in the view, but that is not working at all?
This is more ore less an example of what I'm doing.
Controller:
Ext.define('MyApp.controller.Search', {
extend: 'Ext.app.Controller',
config: {
refs:{
distanceSelect:'#distanceSelect',
},
control:{
distanceSelect:{
change:'filterSearchList',
},
}
},
filterSearchList:function(){
alert('42!!');
}
});
View:
Ext.define('Abedrijven.view.search.Search_main', {
extend:'Abedrijven.view.Screen',
alias:'widget.search_main',
requires:[
'Ext.field.Select',
],
config:{
items:[{
xtype: 'selectfield',
id: 'distanceSelect',
name:'distance',
options: [{
text: '- All -',
value: '0'
}, {
text: '5 Km.',
value: '5'
}, {
text: '10 Km.',
value: '10'
}
}]
}
});
EDIT
I have this in my app.js. I call these when I want to change the views.
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
var view = Ext.create('Abedrijven.view.Main');
Ext.Viewport.add(view);
Abedrijven.app.view = view;
Abedrijven.app.pushView = function(xtype,data){
Abedrijven.app.view.push({xtype:xtype,data:data});
}
Abedrijven.app.popView = function(){
Abedrijven.app.view.pop();
},
Abedrijven.app.goHome = function(){
Abedrijven.app.view.reset();
}
Abedrijven.app.view.add({xtype:'home_main'});
},
My main view:
Ext.define("Abedrijven.view.Main", {
extend:'Ext.NavigationView',
requires:[
'Ext.Toolbar',
'Ext.tab.Panel',
'Ext.TitleBar',
],
alias:'widget.main',
id:'mainview',
config:{
cls:['mainview'],
fullscreen: true,
ui:'dark',
items:[
The first time it all works, change to other view, and than change back to this view and the change event will not fire. I'm using ST 2.0.1.1 GPL. Tested on iOS and browser.
Any help would be great!
Thanks in advance!
I had the same problem because I was using views defined and instantiated at runtime. First time was fine, second one the controller was loosing the listeners.
I solved the problem simply using dom subqueries.
config: {
refs: {
RecordTypeSelectField : 'NewRecordPanel #recordTypeSelectField'
Essentially you simply add the parent container to the query key. That's all!
I've found the bug. I was using id's, but itemId is better. Here the answer that helped me figuring this out.
id:'myid'
replaced to
itemId:'myid'
Needed to change some code to get the right elements again, but now it works
I got some problems loading data into a form which I pushed onSelect.
(loading details for a specific list item)
onProductSelect: function(_dataView, _record)
{
Ext.getCmp('products').push({
title: _record.data.name,
data: _record.data,
styleHtmlContent: true,
xtype: 'productDetails'
});
}
I am pushing another view (productDetails) onto my productView (which is a navigationView). The data (_record.data) is available in the new pushed view via
tpl: '{someField}'
Now I'd like to know how to get this data (the fields data) into a textfield or a button (or sth like this) of a form.
If someone has a better idea how to get the data into the view/form or how to change the views (from list to detail) please let me know :)
here are some suggestions to your code:
1.use of underbar ('_') inside Sencha Touch is meant for variables which have get/set/apply/update. Although you are using local variables, it is best practice.
2.the word '_record' hopefully is a record. If so then you should use:
name = _record.get('name');
data = _record.getData();
The best way to fill a form is to use a formpanel and add the values to the formpanel, while all fields have a popper name assigned:
If your data are:
data = {name: 'Kurt001', password: '12er51wfA!'}
You could use this:
Ext.define('App.view.ProductDetails', {
extend: 'Ext.form.Panel',
xtype: 'productdetails',
config: {
cls: 'product-details',
scrollable: null,
layout: 'vbox',
defaults: {
labelAlign: 'top',
clearIcon: false
},
items: [{
xtype: 'textfield',
name: 'name'
}, {
xtype: 'passwordfield',
name: 'password'
}, {
xtype: 'button',
itemId: 'btnLogin'
}]
}
});
And to add the data simply use:
Ext.Viewport.down('.productdetails').setValues(data);
Alternative:
var view = Ext.Viewport.down('.productdetails')
view.down('.textfield').setValue(data.name);
view.down('.passwordfield').setValue(data.password);
Alternative
view.down('.field[name=name]').setValue(data.name);
view.down('.field[name=password]').setValue(data.password);
To get the data from one view to the next you can follow different options:
1.Set the data to the current view and grab them from that view. It looks like you have a list. So you can apply the data to the list:
view.down('.list').myData = data;
Extended version would be to create a custom list with myData inside the config.
That way you could use:
view.down('.list').setMyData(data);
or in your case
_dataview.setMyData(data);
2.Use a store. As you are passing a record already you might want to add a selected field to your store model and simply set the flag.
I would like to switch views with a button, there is absolutely no examples of it in a MVC context in the sencha documentation although they recommend developers to use their build in MVC architecture. I guess its because Touch 2.0 is rather new.
http://docs.sencha.com/touch/2-0/#!/api
The video about the list component is also about navigation.View, but since the list component is used, they dont show how to switch views with a button.
Video: Intro to List Component
This is the code i have so far:
uddannelser.js (First view)
Ext.define("VUCFyn.view.uddannelser", {
extend: "Ext.navigation.View",
xtype: "uddannelser",
requires: [
"VUCFyn.view.avu"
],
config: {
title: "Uddannelser",
cls: "uddannelser",
items: [
{
title: "Uddannelser",
xtype: "container",
margin: 20,
layout: "vbox",
items: [
{
xtype: "button",
text: "AVU",
width: 100
}
]
}
]
}});
avu.js (subview of uddannelser)
Ext.define("VUCFyn.view.avu", {
extend: "Ext.Panel",
xtype: "avu",
config: {
title: "AVU",
cls: "avu",
scrollable: true,
items: [
{
xtype: "label",
html: [
"<p>Almen Voksenuddannelse - avu - er et tilbud om uddannelse til alle over 18 år. Du kan tage avu-fagene et ad gangen eller i en kombination med flere fag. Du kan også kombinere avu-fagene med andre enkeltfag på FVU og/eller hf.</p>",
"<h5>AVU omfatter kernefagene:</h5>",
].join("")
}
]
}});
Main.js (controller)
Ext.define('VUCFyn.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
uddannelser: "uddannelser"
},
control: {
"uddannelser": {
tap: "showDetail"
}
}
},
showDetail: function () {
this.getUddannelser().push({
xtype: "avu"
});
},
init: function () {
}});
Please, if someone could show me how to do it, based on the above code (or similar) that would be great.
btw: the answers in this thread: Sencha Touch 2 MVC - how to switch views with button is not working for me. (No errors though) I think its for Sencha Touch 1.1, and a lot of things have apparently changed in 2.0
Hi I think you just need to fix the controller and it will work, try the following and let me know how you get on.
config: {
refs: {
uddannelser: "uddannelser",
uddannelserButton: "uddanelser button"
},
control: {
"uddannelserButton": {
tap: "showDetail"
}
}
},
So all I have done is add a selector for the button in your uddanelser view and attached the click listener to that. Good luck!
Are you trying to listen for tap events on the navigationview you've given the uddannelser cls? There's a couple of issues with your setup;
Firstly, it doesn't look like you are using component queries properly in your controller, check this documentation: http://docs.sencha.com/touch/2.4/apidocs/#!/api/Ext.ComponentQuery
Depending on how many of these components in the view you want the controller to manage, you can either give it an id and search for the component by "#id" or you can use the xtype and a config option, such as "navigationview[cls=uddannelser]".
Secondly, you can't listen for tap events on a navigationview, if you wanted to listen for tap events on this component you'd have to listen for the tap event on the element and relay the event. I suspect you are actually trying to listen for the tap event on the button though, in that case create two refs in your controller, one for the navigationview and one for the button, listen for the tap event on the button and push the panel on the navigationview like you are now.
Let's say I have multiple nested panels (plain ones, not form.Panel) containing form fields.
The user can copy such a panel and its fields to a different panel.
I somehow need to add those newly created fields to a main formpanel so they get submitted, but don't know how.
I can't do
formpanel.add(fields)
because then they're rendered to the formpanel's body and not the panel they were in in the first place. Setting the fields' renderTo property doesn't help either.
So basically I need a way of adding a field to a normal panel (or any other component for that matter), but also adding it to a specific formpanel so its values are submitted on form submit.
Has anyone done this or could at least point me in the right direction?
You can wrap all your panels inside one form panel and all the fields inside will be submitted. I did this way with accordeons, tabpanel and normal panels deeply nested inside each other. Example:
var form = Ext.create('Ext.form.Panel', {
// form attributes goes here...
// ...
initComponent: function(){
// all your panels goes here.
this.items = [
{
xtype:'panel',
title: 'First panel',
layout: 'anchor',
frame: true,
defaults: {anchor: '100%'},
items: [
{xtype:'textfield', name: 'foo',fieldLabel: 'Foo'},
{xtype:'textfield', name: 'foo',fieldLabel: 'Bar'}
]
},
{
xtype:'panel',
title: 'Second panel',
layout: 'anchor',
frame: true,
defaults: {anchor: '100%'},
items: [
{xtype:'textfield', name: 'baz',fieldLabel: 'Baz'},
{
xtype: 'panel',
items: [/* another set of fields */]
}
]
},
];
this.buttons = [/* ... your buttons here ...*/];
this.callParent(arguments);
}
});