What does 'viewport>panel' mean in extjs4? When will it be called? What is the significance of using it?
init : function() {
console.log('In init function');
this.control({
'viewport > panel' : {
render : this.onPanelRendered
}
});
}
Since it is in init function, I know that it is called during the application startup. But my code does not enter into the onPanelRendered method so I assume that the condition 'viewport>panel' fails, but I want to know what exactly does it do and What are the other options that can be used.?
Thanks in advance
ExtJS comes under the category of single page web applications(In general these projects will have only entry point). These single page web applications take control of browser's visible area, this area is called as 'viewport' in ExtJS. ExtJS4 starts rendering your application right from the viewport. It is an extended container. You can check its documentation and config parameters that are applicable for viewport here.
Documentation says
The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page.
Blockquote
Thats all about viewport.
Coming to your second question
"When will it be called? ".
When ever ExtJS application is ready then it searches for viewport.js and starts rendering it on body. That means it will be called as soon as your application is ready.
And finally lets see the usage of viewport in your controller.
'viewport > panel' : {
render : this.onPanelRendered
}
Here you are calling dom query to get hold of panel's events. Above statement says, go to the first panel of viewport's items and execute the render event. In this case, this.onPanelRendered will be called whenever panel gets render.
Possible problems could be
'onPanelRendered' is not available at controller's scope
viewport may not have panel
If viewport has panel, its 'render' event might have been overridden
Application configuration may not be correct
Still you are not able to figure it out, post your complete code and errors, if any.
Viewport in extjs is the entire browser window in which your application gets rendered. viewport > panel is not a condition. You are just finding any panel inside the viewport using a CSS selector and hooking up the render event with the onPanelRendered method.
Related
I am working on Protractor tests. Recently my web page changed where the terms and conditions are inside a textbox. Button Submit works only when the user scrolls through the textbox and clicks on Agree button. I tried the following option to scroll down but it is not scrolling down. Any help is greatly appreciated.
var scrollbar = element(by.id('terms-conditions'));
var checkbox = element(by.id('checkbox'));
scrollbar.click()
browser.executeScript('arguments[0].scrollIntoView()', scrollbar.getWebElement());
browser.executeScript('window.scrollTo(0,670);')
checkbox.click();
I followed the below link too but no luck.
Protractor: Scroll down
The second js execute statement you are using contains Window.scrollTo which references an open window in a browser. and using it only scrolls the complete window but not the pop-ups that appear inside a browser window
Refer here for documentation on Window.scrollTo
Normally terms and conditions shows up in a pop-up or may be a div and hence Window.scrollTo doesn't work
there are two ways you can do it
SOLUTION 1: use Jquery scrollTop() to scroll inside a specific webElement
Step 1: Identify the exact div that holds your terms of Service scroll bar
Step 2: Refine your js statement by trying directly in Chrome console
$('.modal-body').scrollTop() -> This returns the current position of scroll
$('.modal-body').scrollTop(10000) -> This sets the value of top position
Step 3: Incorporate this in your protractor script
browser.executeScript('$('.modal-body').scrollTop(10000)');
You can professionalize this by passing the element & scroll amount as arguments. Refer here
SOLUTION 2; The best way I see to submit a pop-up is not to deal with interface but to deal with the 'form' element behind it. Similar to how we deal with file uploads.No fuss & effective
May be try something like this, by making button visible first and then submit form
browser.executeScript is an asynchronous call, so you will need to put it into the controlFlow so that it will complete before clicking the checkbox:
scrollbar.click();
browser.controlFlow().execute(function() {
browser.executeScript('arguments[0].scrollIntoView()', scrollbar.getWebElement());
browser.executeScript('window.scrollTo(0,670);');
});
checkbox.click();
I am using angularjs and ngmap (https://ngmap.github.io).
The map is initially hidden from view (using ng-show), and i want to be able to toggle between views without having to reload the whole map.
I also want to display a kml on the map.
The map is only initialized (using lazy initialization) when that part of the page is shown.
It seems to work fine, except that sometimes the map can't zoom into the kml (using fitBounds). I think I have established that this is because the height of the containing div is zero (due to the controller code firing before the view is actually rendered), and fitBounds needs that.
I am trying to wait until I am sure the map is good and ready. I have tried the following events:
bounds_changed
tilesloaded
but neither do what I want.
Currently I am using a $timeout, but I don't like it, as I don't know how long it takes to initialize the map, and whether or not my code will fire between that time.
My next idea is to repeatedly check for the height of the map, but I would prefer something more explicit.
Another idea is to always have the map in the background, and use absolute positioning to cover it with the other information when that part is visible, but that breaks my current design.
I've decided to avoid the issue.
The map is always going to be there, but I use some ng-class s to make it "visibility: hidden" and hide an unneeded scroll bar when the map tab is unselected.
As long as the visibility is hidden (instead of display: none) the initialization and positioning of the map goes okay.
It isn't perfect (I might need to scroll the other tabs one day), but it works for me for now.
I have a main window with a custom Ext.panel.Panel using ExtJS 5.0.1.
Clicking an item shown on the custom panel creates and shows a custom Ext.window.Window for editing said item.
For the purpose of getting some kind of answer, or a starting point for my own situation, I'll ask for standard Ext components.
On closing the custom window, a variable in the custom panel needs to be updated to show that changes have been made.
This is a different requirement to a confirmation message before closing the window; the window does not control saving of information to a DB, but needs to let another component know that changes have been made.
This should be as simple as setting a boolean unsavedChanges to true on the panel if the window's information has been altered; I've performed this on a simpler page, which did not have the additional window as an obstacle.
Due to the use of the window, my typical go-to methods of calculating a variable as use of this.up or this.lookupReference returns null, or throw an error.
I'm aware that I can consider going to the parent of the page, then try and work down, but I'm not experienced enough to consolidate standard javaScript with the up and down capabilities of ExtJS, or at least understand the intricacies of ExtJS to navigate past the "item window" back to the panel.
How would I be able to refer to the panel while closing the window in order to update the panel's data?
Well, there's a couple of ways.
First, you can pass in your panel, or a callback function, during the construction of the window. e.g.:
// in panel
var window = Ext.create('MyWindow', { callingPanel: this })
...
// in window
onClose: function() { this.callingPanel.doStuff(); }
The other way to be to register a listener to the 'close' event of the window.
// in panel
var window = Ext.create('MyWindow', {
listeners: {
scope: this,
close: this.doStuff
}
})
The listener approach tends to work best when you don't want to tightly couple the window to the calling panel.
I have a form and a tabpanel The user is supposed to enter some information in the form and click a submit button at the end. I have a controller that controls that button click event and fires various application level events depending upon the input. I catch those events in controllers for all the tabs and do individual processing. What happens is that as not all the tabs are rendered in the beginning and therefore, only the first tab displays the output and others give error. I would like to know if there is a way that i can catch the event in a way that it first waits for the components to get rendered and then does the processing.
Thanks.
Please have a look at deferredRender : Boolean config for tabpanel.
True by default to defer the rendering of child items to the browsers DOM until a tab is activated. False will render all contained items as soon as the layout is rendered. If there is a significant amount of content or a lot of heavy controls being rendered into panels that are not displayed by default, setting this to true might improve performance.
How about yor inital handler queues some sort of pendingJob object for those tabs !rendered and then on the afterrender or show event you check that, process it and clear it? I do something similar with a cards layout and it works very well.
The setting
I have Backbone.Marionette.ItemView which renders some content. When the content is rendered I'd like to apply a jQuery plugin which turns part of the view into a container with a scrollbar.
The scrollbar is implemented completely in javascript and upon initialization it has to check the height of the scroll-container as well as that of the content inside the container.
If the content is higher then the container, a scrollbar should be enabled.
The problem
While this all sounds simple, I've ran into a strange problem:
If I initialize my scrollbar plugin directly in the onRender callback it seems to think the .scroll-container element has a height 0 and maxHeight of 0.
If I wrap the initialization code inside a 0ms timeout though, everything works as it should, the .scroll-container element's height property is returned by jQuery correctly and the scrollbar plugin works great.
The code
onRender: function() {
var that = this;
setTimeout(function() {
that.onLayout();
var $scrollContainer = that.$el.find('.scroll-container'),
scrollPane = new ScrollPane($scrollContainer, {
maxHeightProperty: 'maxHeight',
scrollUpButton: false,
scrollDownButton: false
});
}, 0);
},
The question
I'm assuming the problem occurs because the browser didn't finish actually rendering the newly inserted html when the onRender callback is executed.
Is this assumption correct? And if so, is my solution of using a 0ms timeout reliable under normal circumstances?
Since the plugin in question depends on the DOM, onRender won't do what you need. This callback kicks off after the view has been rendered, but there is no guarantee that the view's el has been added to the DOM yet. In fact, you are safe assuming the opposite - that it has not been added yet.
If you're using a Marionette Region to show the view, you can implement an onShow method in your view. This method gets called by the region, after the region has added the view to the DOM. It was implemented specifically to handle this situation.
For a little more info on this, and on working with jQuery plugins in general, see this blog post: http://lostechies.com/derickbailey/2012/02/20/using-jquery-plugins-and-ui-controls-with-backbone/