I am to create a view with a titlebar and a row of two buttons and a list.
When tapped on,each of the two buttons will make an ajax request to the server and update the list below.That is I will give each button a handler in which the store of the list will be fetched to have its proxy assigned with different params and then to call load() to refresh the list.
So my problem is : how to make the buttons and the list masked when the list is loading and unmasked when it finishes.
At first i wrap the buttons and the list with a container and masks it when the list is loading,but i can not unmask it when the list finish loading.I tried to listen the refresh event of the store,but not work.
Second,i tried to disable one button when the list is loading and enable it when the list finish loading.But i can not figure out how to make a call to enable the button when the mask of the list disappear.
How should i do ?
you will have to add load event of store before you call load() method and in load event's call back function you can unmask..just like below code
store.on({
load: {
fn: function( store ) {
//you can write code for unmask over here
},
scope: me,
single: true
}
});
store.load();
Related
I have an injected stylesheet that calls a popup with window...open() on two occasions. One when the user clicks an HTML button, and two, when a user clicks on a context menu item. To listen for the context menu item, I need to add a listener on the injected script like so
safari.self.addEventListener("message", messageCallBack, false); // Message comes from global.html when context menu item is clicked
And the following callback
function messageCallBack(msgEvent) {
...
window.open(...)
...
}
For some reason, the popup works when the button calls window.open, but NOT when the message callback calls window.open. I'm assuming it maybe have something to do with the window object.
I suspect this is due to restrictions on window.open designed to combat pop-up ads. This means it will only work in response to a click event.
To get around this, I would recommend you open the new window from your global page using the safari.application API:
safari.application.openBrowserWindow();
safari.application.activeBrowserWindow.activeTab.url = '...';
You can also open new tabs with:
safari.application.activeBrowserWindow.openTab('foreground').url = '...';
To achieve this, you may need to send a message from your injected script to the global page.
I have a form panel and i have added a tabpanel to it. Tab Panel has 2 tabs. When the form panel is loaded the first tab's grid loads fine but when i click on the second tab i do see the grids but data is not loaded by default. But it does refresh with data When i click on the grid header.
Below is the piece of code that i use to load the grids from controllers.
var store = this.getDeficiencyDeficiencyStoreStore();
store.on('load',function() {
var accountDeliverySettingsGrid = Ext.getCmp('accountDeliverySettingsGrid');
accountDeliverySettingsGrid.reconfigure(model.allQuartesListStore);
accountDeliverySettingsGrid.getView().refresh();
})
Any help/suggestions/advice is appreciated.
I finally figured this out. I had to use event: activate to explicitly invoke refresh method to get the grids loaded. Below is the piece of code.
listeners: { activate: function(tab)
{ //alert("Put Your Logic Here");
Ext.getCmp('accountDeliverySettingsGrid').getView().refresh();
Ext.getCmp('compositeRelationship').getView().refresh();
}
I have a custom menubutton in my tinyMCE editor that uses specific HTML elements elsewhere on the page as the menu items. I use a jQuery selector to get the list of elements and then add one each as a menu item:
c.onRenderMenu.add(function(c,m) {
m.add({ title: 'Pick One:', 'class': 'mceMenuItemTitle' }).setDisabled(1);
$('span[data-menuitem]').each(function() {
var val = $(this).html();
m.add({
title: $(this).attr("data-menuitem"),
onclick: function () { tinyMCE.activeEditor.execCommand('mceInsertContent', false, val) }
});
});
});
My problem is that this only happens once when the button is first clicked and the menu is first rendered. The HTML elements on the current page will change occasionally based on user clicks and some AJAX, so I need this selector code to run each time the menu is rendered to make sure the menu is fully up-to-date. Is that possible?
Failing that, is it possible to dynamically update the control from the end of my AJAX call elsewhere in the page? I'm not sure how to access the menu item and to update it. Something using tinyMCE.activeEditor.controlManager...?
Thanks!
I found a solution to this problem, though I'm not sure it's the best path.
It doesn't look like I can make tinyMCE re-render the menu, so instead I've added some code at the end of my AJAX call: after it has updated the DOM then it manually updates the tinymce drop menu.
The menu object is accessible using:
tinyMCE.activeEditor.controlManager.get('editor_mybutton_menu')
where mybutton is the name of my custom control. My quick-and-dirty solution is to call removeAll() on this menu object (to remove all the current menu items) and then to re-execute my selector code to find the matching elements in the (new) DOM and to add the menu items back based on the new state.
It seems to work just fine, though tweaks & ideas are always welcome!
i'd like to do this:
show some form, handle Rectangle::onClicked event (disable form, set opacity to 0.2, process some javascript to submit form, then set opacity back to 1.0, enable form).
But I don't know how to do it.
It seems onClicked() is processed in "batch" mode, changing any ui properties aren't visible until the function exits. I played with states, transitions and animations, but still not succeed.
Thanks for any suggestion,
Michal
You can simply start two custom animations, one to hide the form and one to show it back. Something like this:
SequentialAnimation {
id: submitAndHideForm
ParallelAnimation {
// Animations to hide the form elements
}
ScriptAction {
script: submitForm()
}
}
ParallelAnimation {
id: showForm
// Animations to show the form elements
}
Then you could just start the first one with submitAndHideForm.start() when you want to submit the form, and when you get a response you can start the second one.
It should be possible to solve with states. You could try to do the Javascript processing in a WorkerScript. When the processing is done it will send back a reply to the QML WorkerScript element that sets the state of the form to enabled again. So in onClicked you do the disable animation by setting the state, and in the onMessage function of the WorkerScript element you do the enable animation by setting the state to "enabled".
Perhaps you talking about using XMLHttpRequest asynchronously. "Disable" form on sending request, and "enable" it when onreadystatechange called with readyState === XMLHttpRequest.DONE.
Let's say in a view I have a DojoX Mobile ListItem that is pulling an HTML view fragment into the DOM via AJAX and then transitioning to that view. Assume this is all working fine.
Now, I go back to the initial view that had that ListItem on it and click some other button that destroys that view node from the DOM. If I now click on that ListItem that previously loaded that view node into the DOM (which has now been removed), it will try to transition to a view that doesn't exist. It doesn't know that it has been removed.
Is there some type of way to tell a ListItem that it needs to fetch the HTML again because what was previously fetched no longer exists? I am not seeing anything about doing this in any documentation anywhere. I don't think a code sample is really necessary here, but I can provide a minimal one if necessary.
I went a different route and left the view exist in the DOM, and simply made a function that clears all sensitive data out of the view.
Okay, in this case, i guess you could hook the onShow function of your ListItem container(or any other onchange event). Create a listener for said handle to evaluate if your item needs reloading. Following is under the assumtion that it is the item.onclick contents showing - and not the label of your item which contains these informations
Or better yet, do all this during initialization so that your ListItem container will be an extended with custom onClick code.
Seems simple but may introduce some quirks, where/when/if you programatically change to this item, however here goes:
function checkItem() {
// figure out if DOM is present and if it should be
if( isLoggedIn() ) {
this.getChildren().forEach(function(listitem) {
if( dojo.query("#ID_TO_LOOK_FOR", listitem.domNode).length == 0 ) {
// this references the listItem, refresh contents.
// Note: this expects the listitem to be stateful, have no testing environment at time being but it should be
listitem.set("url", listitem.url);
}
});
}
}
Preferably, set this in your construct of the container for your ListItems
var listItemParent = new dojox.mobile.RoundRectList({
onShow : checkItem,
...
});
Or create listener
var listItemParent = dijit.byId('itemRegistryId');
// override onClick - calling inheritance chain once done
dojo.connect(listItemParent, "onClick", listItemParent, checkItem);