destroy things switching between views - sencha-touch

in my program I have 2 'screen', in the first there is a list and if I press an item I go to the second screen… and in the second screen there is a button to return in the first…
when I return in the fist I get this warning
WARN][Ext.Component#constructor] Registering a component with a id (`usernamelabel`)
which has already been used. Please ensure the existing
component has been destroyed (`Ext.Component#destroy()`.
in the controller i tried something like this:
itemUp: function (dataview, index, target, record, e, Opst ) {
Ext.Viewport.animateActiveItem({xtype: 'mytabpanel'},{ type: 'flip' );
var store = Ext.getStore('Customers');
store.clearFilter();
Ext.destroy(this.searchField);
Ext.destroy(this.clientsList);
}
but doesn't work.. how to destroy an entire 'screen'?
PS: if I run the program in iOS or android devices I see ever the same "theme"…
how to specialise the theme? (on my win phone 7.8 doens't works.. is normal?)
thanks a lot!!!

It's because you harcoded id: usernamelabel, so when you initiate it the second time, you'll get above warning message. You'll be safe if you use itemId

Related

Revive/activate existing panels

My extension have sidebar webview that can create additional webviews as panels in the active text editor. Each of these additional webviews is for an unique item and I want to revive/activate existing webview, for the specific item, if it exists.
My issues:
I can get a list of the existing tabs with window.tabGroups.all and loop through the result. But there is no way, as far as i can see, to reactivate the desired tab. I can get some properties from there but no methods. The question here is: is there a API to get a list of the tabs and be able to revive/activate it?
Because of the first point ive decided to keep list of the instances of the additional webviews and when new webview is about the be created im checking if its unique id (in the title) is in the list and if it is then just revive the tab instead of creating a new one. Dont like this approach much but its working. The problem here is when the additional webview is closed. When closed it has to be removed from the array. Ive implemented onDidDispose for the panel but somehow the filter function, inside it, is not called:
// panels: vscode.WebviewPanel[]
// create new panel
const panel = vscode.window.createWebviewPanel(...)
// add the webview instance to the panel
const newWebview = new AdditionalWebview(panel, this.context);
this.panels.push(panel);
panel.onDidDispose(() => {
console.log("Before remove the panel"); // can see this in the console
this.panels = this.panels.filter((p) => p.title != panel.title);
console.log("Before remove the panel"); // for some reason this never appears
});
Not sure why but the panel filter functionality is never triggered (and everything after it is also not ran).
extra question: at the moment the uniqueness of the additional panels is based on their label/title. In my case thats is ok but is there any other way to get unique identifier of each tab? id/guid somewhere?
On your first question about activating a given editor, you have a couple of options.
If you know the editor's index/position in its group. That can be obtained from its tabGroup.tabs position - it seems that the tab's index in that array is faithfully its index in the editor. So you could do a Array.findIndex to get the tab uri you want to set to active.
await vscode.commands.executeCommand('workbench.action.openEditorAtIndex', [indexToOpen]);
// note the [] around the index argument
The only problem with this approach is that it works within the active group only, so you may have to activate the correct group first via:
await vscode.commands.executeCommand('workbench.action.focusSecondEditorGroup');
// or whichever group the tab you want to open is in
Or second method:
// assumes you have the tab
const openOptions = { preserveFocus: true, preview: tab.isPreview, viewColumn: tab.group.viewColumn};
// check if a uri, might be viewtype, etc., instead
if (tab.input instanceof vscode.TabInputText) {
await vscode.commands.executeCommand('vscode.open', tab.input.uri, openOptions);
}
// are your editors regular text editors?
This looks like it is opening a new tab but it will focus an existing tab if one exists at that location with that same uri.

Why does NavigationView.ContainerFromMenuItem() return null except when executed from an event handler?

I am developing a WinUI3 app containing a NavigationView. The NV uses an observable collection to populate the NavigationViewItems.
The app must support expanding and collapsing NavigationViewItems programmatically. The only way I know of to do that is to set NavigationViewItem.IsExpanded = true. And the only way I know of to get the NavigationViewItem is through NavigationView.ContainerFromMenuItem().
The trouble is, ContainerFromMenuItem always returns null except when it is executed from a button event handler (such as a Click handler). The app must perform expand/collapse without user input.
For example, I have a button that launches a Click event with this code, which works just fine to toggle an NVItem:
Category selectedItem = (Category)navview.SelectedItem;
int idx1 = Categories.IndexOf(selectedItem);
var container = (NavigationViewItem)NavView.ContainerFromMenuItem(Categories[idx1]);
if (container != null)
{
container.IsExpanded = !container.IsExpanded;
}
However, that same code, when executed during app startup, such as in the MainWindow constructor after some test items are created, or in Attach(), always results in container being null.
So what am I doing wrong?
This question is somewhat similar to UWP: NavigationView.MenuItems results empty if populated programmatically but the answer to that one only deals with in-event use of ContainerFromMenuItem().
Thanks very much for any assistance on this.

vue router: go up one (variable) level

seems nobody had this question before...? (or i just don't know the right words for it :D )
i want to have a very basic heading on every page of my app, which allows the user to go "up". simple as that.
example: user is on page.com/users/browse/, clicks on the heading, gets navigated to page.com/users/, clicks again, gets navigated to page.com. nothing more. it just has to be variable, so i can put it in a component and have it just work everywhere
how can i do that? i tried vue.$route, but there is only a string of the complete url. is there any convenient way to do it? or do i HAVE to split the url by / and build the route myself?
thanks :)
Try using this: this.$router.replace("./");
I don't know how it is working though. The single dot(./) will go up one path and double dots(../) will go up 2 paths!
This functionality has a name "Breadcrumbs".
Check this: 1, 2, 3 or look for this in your framework.
Try adding a method for going up one level by getting the route's path and then splitting it. Here's what worked for me:
upOneLevel(){
var upperPath = this.$route.path.split("/")
if(upperPath.length > 0) {
upperPath.splice(upperPath.length-1)
this.$router.push(upperPath.join("/"))
}
}
Then you can add a button that calls this method to go up by one level but no further than the root. This method will work regardless of whether or not your routes were nested properly.
this.$router.replace("./") will help if the user clicks on the heading only once, if he try to clicks again nothing is happen because vue-router avoid redundant navigation to the same location.
You can catch this error then navigate to the root, (or to a named route) if you have only two levels in your routes.
NOTE :
This function works only for two levels (see the example of this Question)
goUp() {
this.$router.replace("./").then(err =>{
if(err)
this.$router.replace("/");
// or : this.$router.replace({name:"home"}); for named routes
})
}
You can get the current path using this.$route.path and than remove the last party by splitting/splicing it:
goUp(){
var upperPath = this.$route.path.split("/")
if (upperPath.length > 2) {
upperPath.splice(upperPath.length - 1)
this.$router.push(upperPath.join("/"))
} else {
this.$router.push('/');
}
}
The already mentioned this.$router.replace("./"); will add a trailing slash.
If this is not your intention, use this.$router.replace(".");
Moreover, if you want to make a new history event, use this.$router.push(".");

Issue with vue.js conditional rending

I have problem in rendering a template
When a new data has been added, it won't go to the process of v-if even if the condition is both TRUE.
Can some please explain why?
I have provided some screenshot below to explain further my issue
This first image was my template for displaying the products, you will notice the add, update and remove in here.
The second image shows that I'm trying to add a new product
The third image shows that I have successfully added the new product. The problem is, the action button "update" is triggered but won't take any effect.
The image above shows that the update button works with the past data, but not with the new one.
This last image will prove that the button has been triggered. I've added a console.log to display the following upon clicking the update button.
INDEX of the row, which is [0].
The typeOf the variable 'isUpdate' [boolean].
The value of 'isUpdate' [True, False]
and the productID which is [151]
Any idea why it hasn't been triggered, or any idea how to debugged this?
If you want to see the code. I can provide it, just tell me which part are you looking for. As I don't have any idea which part has the error.
Thank you in advance.
Updated
AS per Amresh Venugopal Request
Here is the v-if in the template
<tr v-if='product.id > 0 && product.isUpdate' class='table-inputs'>
And the updatebtn function
canUpdate: function(data) {
console.log(data.pindex);
this.products[data.pindex].isUpdate = !this.products[data.pindex].isUpdate;
console.log(typeof this.products[data.pindex].isUpdate);
console.log(this.products[data.pindex].isUpdate);
console.log(this.products[data.pindex].id);
}
I only set the isUpdate value to 'true' if 'false', and viceversa.
The productID is added after the ajax save function.
I figure it out!
When I push the data in this.products, I didn't include the 'isUpdate' field.
Got it working now.

How to force the parse (only one time ) of a Dojo's button [Err: widget is already registered]

I have a function which adds a button to a div "dettaglio_utenti". After calling the function with this instruction
tab+="<button data-dojo-type='dojox.mobile.Button' id='apri_mappa' onClick=\" location.href='tel:"+telefono+"'\">apri mappa</button>"
var vText = document.getElementById("dettaglio_utente");
vText.innerHTML = tab;
require(["dojo/parser"], function(parser){
parser.parse(vText);
});
It works only the first time that I display the page. The second time the button is not parsed and I see this error in the browser console: dojo/parser::parse() error Error: Tried to register widget with id==apri_mappa but that id is already registered
When you display the page for the second time, the first page must still be part of the dom. (Maybe this is a worklight feature, single page app?). So when dojo parses the second page it gives the error because the button with that id has already been created.
I don't believe preventing the parsing of the button a second time will accomplish what you need. I think your options are:
Destroy the widgets from the first page.
If you don't need an id on the button, you can omit it and Dojo will create an id that won't collide.
If you need the id, you can or use a counter when emitting the id of the button.
id='apri_mappa_' + i where i is the counter.
Only knowing what you wrote above, I think the order of preference is 2,1,3.
EDIT - How to destroy a widget
require(['dijit/registry'], function(registry) {
registry.byId('apri_mappa').destroy();
});