We are trying to prevent unnecessary rendering and therefor just want to hide and show a window containing a quite huge grid.
The window itself is constrained to the viewport by calling
App.Instance.getViewPort().add(scope.myWindowRef = Ext.create('Ext.Window'),{
constrainHeader: true
/* and the rest of the cfg */
});
scope.myWindowRef.on('close',function(win){ win.hide(); win.caller.enable(); return false; });
We have a button listeners inside the controller which should now show an hide window
onOpenWin: function(button) {
button.disable();
var scope = this,
win = scope.myWindowRef;
win.caller = button;
win.show();
}
You should use the beforeclose event when you want to stop the destruction of the window. The close event is already to late!
check out closeAction config - closeAction:'hide' should do..
Related
I am working with standalone (not mobile) and I think it is _getScroll method for reaching it.
how to implement it here qooxdoo selectbox example
I found similar for mobile implementing virtual scrolling list console.log says container._getScroll is not a function.
The idea is to get scrollbar from a widget, the scrollbar you are needed is NativeScrollbar of the widget qx.ui.list.List. Then add event handler for a "scroll" event. In handler u have to compare current position of scroll and maximum.
Try the code below (eg copy and paste into the Qooxdoo playground).
qx.Class.define("SelectBoxWithScrollEndEvent", {
extend: qx.ui.form.SelectBox,
construct: function(){
this.base(arguments);
this.__setupScroll();
},
events: {
"scrollEndHappened": "qx.event.type.Event"
},
members: {
__setupScroll: function(){
const list = this.getChildControl("list");
const scrollbar = list.getChildControl("scrollbar-y");
scrollbar.addListener("scroll", function(e){
if (scrollbar.getMaximum() === scrollbar.getPosition()){
this.fireEvent("scrollEndHappened");
}}, this);
}
}
});
const box = new SelectBoxWithScrollEndEvent();
const data = new qx.data.Array([1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5]);
const controller = new qx.data.controller.List(data, box);
box.addListener("scrollEndHappened", function(){
alert("SCROLL HAPPENED ALERT");
}, this);
this.getRoot().add(box);
I'm trying to open popup on drop, but it does not work, I've tried with
$scope.$on('leafletDirectiveMarker.dragend', function(event,args){
args.model.focus = true;
});
and
$scope.$on('leafletDirectiveMarker.dragend', function(event,args){
$scope.markers.forEach(function(marker){
marker.focus = false;
});
args.model.focus = true;
});
But popup does not open until I drag and drop the marker for second time.
That's not how it should work, how can I achieve this?
Use L.Marker's openPopup method:
Opens the popup previously bound by the bindPopup method.
http://leafletjs.com/reference.html#marker-openpopup
$scope.$on('leafletDirectiveMarker.dragend', function(event,args){
// Marker which fires the event is stored in args.leafletObject
args.leafletObject.openPopup();
});
There are two combo boxes and a button.I want a validation i.e. if "combo1" is selected then "combo2" should get enabled and when i select "combo2" then browse button should get enabled.
Mabe something like that (insert text on first combobox):
The combobox2 and button must have this configs:
hidden:true,
disabled:true,
On combobox1:
listeners:{
change: function(combobox,newValue, eOpts){
var combo2 = Ext.ComponentQuery.query('#combo2ItemId')[0];
var button = Ext.ComponentQuery.query('#buttonItemId')[0];
if(!Ext.isEmpty(newValue)) {
combo2.setHidden(false).setDisabled(false);
button.setHidden(true).setDisabled(true);
}
else {
combo2.setHidden(true).setDisabled(true);
button.setHidden(true).setDisabled(true);
}
}
On combobox2:
listeners:{
change: function(combobox,newValue, eOpts){
var button = Ext.ComponentQuery.query('#buttonItemId')[0];
if(!Ext.isEmpty(newValue)) {
button.setHidden(false).setDisabled(false);
}
else {
button.setHidden(true).setDisabled(true);
}
}
I hope this helps!
I guess you may want to disable the second combo and button when the page first shows.
Then You could listen for the change event for each combo and in your handler code disable\enable which ever controls you need to based on the values passed into the handler function arguments.
I am using the following listeners on the showwindowpopup to grey out(opaque) the background so that nothing is seen. But when I try to close this window, a confirmation window has to appear to confirm from user, but when this confirmation window appears the showwindowpopup behind it which is behind it gets greyed out as well and is not seen.
show: function(win) {
if (this.modal) {
var dom = Ext.dom.Query.select('.x-mask');
for(var i=0; i<dom.length;i++){
Ext.get(dom[i]).setStyle('opacity',1);
}
}
},
close: function(win) {
if (this.modal) {
var dom = Ext.dom.Query.select('.x-mask');
for(var i=0; i<dom.length;i++){
Ext.get(dom[i]).setStyle('opacity',0);
}
}
}
Can someone tell me how can I resolve this? I want the background to be greyed out except the showwindowpopup and the confirmation window. I want the showwindowpopup to be seen whene the confirmation window is open.
Can you Constrain the "show window popup" to the parent panel?
I wasn't sure how to describe my question in the question title. But here is my problem:
(a) When I double click on a row in an Ext.grid.Panel, I open a modal window with it's relavant details to update the record.
(b) After I make the needed modifications and close the modal window, I want to return to the Grid with the Grid filtered on a certain code i.e selectedSalesOrderNum.
jobSlotsGrid.on('celldblclick', function(tableview, td, cellIndex, record, tr, rowIndex, e, eOpts){
modalStatus = loadWindow();
jobSlotStore.filterBy(function(rec) {
alert('Filtering data');
return rec.get('salesOrderNum') === selectedSalesOrderNum;
});
});
(c) Below is the function, which creates the model window. It also has the call to method submitCreateJobSlotHandler() which basically saves the changes and reloads the original Grid with all the data. ( Hence the necessity to filter it back with a certain code i.e selectedSalesOrderNum ).
function loadWindow()
{
getAllTabsForEditJobSlot();
var createJobSlotWin = new Ext.Window({
id:'salesOrder-win-jobSlot',
applyTo : 'hello-win',
modal : true,
layout : 'fit',
width : 900,
height : 500,
closeAction :'destroy',
plain : true,
model : true,
stateful : false,
title :'Create Job Slot',
items : [editJobSlotInformationPanel],
buttons : [{
text : 'Save',
handler : function(){
submitCreateJobSlotHandler();
//createJobSlotWin.destroy();
}
},{
text : 'Close',
handler : function(){
createJobSlotWin.destroy();
}
}]
});
createJobSlotWin.show();
}
The Issue:
In the first block of code, as soon as the loadWindow method is called, both a modal window is popped up along with the filterBy code getting executed in parallel and showing up the alerts ( 'Filtering data' ). I then enter the data in the modal and save. So, basically, the filtering is not done after the Save/Close on Modal. The code ( if/else ) is immediately reached after loading the modal window. It is as if, the modal window opens and goes to the next line of code while waiting for the user to perform some action on the modal window later.
Hope I am clear on my question. Could anyone please advice how do I handle this?
EDIT:
The more I think about it now, I guess the loadWindow() method just creates the Modal Window as we just have a new Ext.Window() call and doesn't bother about other user actions inside the modal and returns the control. And hence, executes the subsequent filterBy event immediately. In that case, I want to filter the store after I am reloading the store upon the Save in Modal Window. The save on Modal window has this handler code:
function submitCreateJobSlotHandler () {
alert('Into Submit');
var formPanel = Ext.getCmp('salesOrderJobSlotForm');
formPanel.getForm().submit({
url : 'someUrl',
method : 'POST',
success : function() {
alert('Success');
jobSlotStore.load({
scope : this,
url : 'salesOrderJobSlot/listJSON'
});
jobSlotStore.filterBy(function(rec) {
alert(rec.get('salesOrderNum')+"--"+selectedSalesOrderNum)
return rec.get('salesOrderNum') === selectedSalesOrderNum;
});
},
failure : function() {
alert('PSO save failed!');
}
});
}
But the issue here is, the jobSlotStore.load() though gets called, it holds until the filterBy gets executed. Because, I see the alerts coming up one by one and then after all the alerts are done, the store loads. So, the filterBy gets overriden by the 'late' store load.
Any suggestions to deal with the issue in any of the ways?
The store load is asynchronous, you need to wait til it completes before you can filter the data set on the client:
store.on('load', function() {
store.filter();
}, null, {single: true});
store.load();