I have an (Ext JS) tab panel where the hidden tabs aren't loaded at all upon initial instantiation, (the only thing I set is the title).
Upon 'activation' of a tab I want to call a method , which then instanstiates a new FormPanel/GridPanel and put this content into the tab.
Can someone point me to a code example or give me tips on how to do this??
Thanks so much!
Just build a new panel and add it to the activated tab. Then call doLayout().
listeners: {
activate: function(panel) {
var formPanel = ....
panel.add(formPanel);
panel.doLayout();
}
}
Related
I have created a login page, on click of button, I want to load a new page. how can I achieve that?
I have tried:
Ext.create({
xtype: 'login'
});
If 'login' is of type Window or Panel (so a kind of container), you can call show() method after creation.
first you need to remove login page view, after create new view and render it. for example.
get access to top level element. in most case it's viewport and remove all child elements.
var topLvlElement = Ext.ComponentQuery.query("viewport")[0]
topLvlElement .removeAll()
create new view and add it in top level element
var newView = Ext.create("myapp.view.mainPage",{title:"mainPage"});
topLvlElement .add(newView);
I have panel wiht toolbar with buttons. Panel resizable when it small buttons hide in menu. In menu it show icon and value of overflowText. But on click button i need change overflowText.
expandClick: function (btn) {
var me = this;
btn.blur();
btn.overflowText = btn.overflowText === "expand" ? "reduce" : "expand";
view.fireEvent('expandGraph', view);
}
in browser's console on breckpoint i see right value but there is no change in interface. Why?!
btn.setConfig( name, [value] );
try to use this function to set specific initial configs dinamically.
Sometimes the button din't refresh his state if you modify directly the variable
Try to refresh component layout with doLayout() method after you change overflowText property.
I have form and grid in kendo window modal, I want to refresh the screen everytime user open the modal window, I have used refresh() but its not working...any suggetion will be appreciated....
So far tried code...
main.html
<div kendo-window="viewAttestorkWin" options="attWinOptions" k-modal="true"></div>
main.js
$scope.openAttestorSearch = function(){
$scope.viewAttestorkWin.refresh();
attestorConfig.attestorModalWinConfig.title = 'Add Attestor(s)';
$scope.viewAttestorkWin.setOptions(attestorConfig.attestorModalWinConfig);
$scope.viewAttestorkWin.open().center();
};
It should work properly with your code right now, yet I suspect setOptions make it didn't. Have you try to call the refresh method after window is open?
$scope.openAttestorSearch = function(){
attestorConfig.attestorModalWinConfig.title = 'Add Attestor(s)';
$scope.viewAttestorkWin.setOptions(attestorConfig.attestorModalWinConfig);
$scope.viewAttestorkWin.refresh().center().open();
};
I have an MVC app which has a Tab Panel rendered as the only item in the viewport. Within the tabs I would like to put the same type of component, for which the event handling is equal within all tabs.
Therefore I need an ExtJS MVC Controller ref to the active tab, that would lead me to execute events on the components in the active tab. Is it possible to have such a ref?
My current approach is this:
get reference to Tab Panel
call getActiveTab()
call the controller events for the component in active tab
Is it possible to encapsulate the above 3 steps in one controller ref? Would be beautiful :-)
I'm using ExtJS 4.1.
Personally, I think controller refs are overrated. This sounds like a simple case where you can use one as you describe, but I prefer to listen to the event, and navigate from the firing component to the one I need.
In your case, assuming your tab panel contains regular ext panels, I'd do something like the following:
onButtonClick: function (button) {
var panel = button.up('panel[tab]');
if (panel) {
panel.someMethod();
}
}
The up method will find the closest ancestor that is of xtype panel and has a property named tab. If you have more specific xtypes or known properties, use those instead.
The panel should be the active one (else how was its button clicked?) but you can check that by going up another level to the tab panel and getting the activeTab there.
onButtonClick: function (button) {
var panel = button.up('panel[tab]'),
tabPanel = button.up('tabpanel'),
activeTab = tabPanel && tabPanel.getActiveTab();
if (panel && panel === activeTab) {
panel.someMethod();
}
}
Say your tabPanel has itemId: 'content'. Inside that panel you will have bunch of tabs and on each tab you will have bunch of buttons (as an example). And you want to handle all these button's click in one controller. Do I understand you correctly?
I believe that simple ref inside your controller would work:
this.control('#content button', {
click: this.buttonClicked
}
});
I am using Extjs for my application. Which event/listener is fired when extjs completely loads the application (images and everything)?
I tried following but none of these worked:
body or window onload (body tag is empty)
viewport render listener
What I am doing currently: When I start the application it displays "loading" mask. Then an ajax request is fired and when it is completed, "loading" mask is removed. Following might give some idea:
Ext.onReady(function(){
Ext.ux.mask = new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});
Ext.ux.mask.show(); // Show the mask
// All components are loaded eg. viewport, tabpanel, button etc...
ajax_request(); // Somewhere between the code ajax request is called
// All components are loaded eg. viewport, tabpanel, button etc...
function ajax_request() {
// Other processing
Ext.ux.mask.hide(); // Hide the mask
}
});
The problem is the ajax request is taking much time now so i want to change the working something as follows:
Ext.onReady(function(){
Ext.ux.mask = new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});
Ext.ux.mask.show(); // Show the mask
// All components are loaded eg. viewport, tabpanel, button etc...
ajax_request(); // Somewhere between the code ajax request is called
// All components are loaded eg. viewport, tabpanel, button etc...
function ajax_request() {
// Other processing
//Ext.ux.mask.hide(); // Hide the mask - removed
}
// I want to call this when everything is loaded on the page
function everything_loaded() {
Ext.ux.mask.hide(); // Hide the mask
}
});
Any idea on this? Thanks a lot for help.
What ExtJs version are you referring to? 3.x or 4.x?
If 4.x, consider using/following the MVC Application Architecture guidelines. In that case, you want to override Ext.application.launch as described in MVC Application Architecture or Ext.app.Application
If 3.x, I guess Ext.onReady() is the best they have.
UPDATE
Based on your updated question, this is what you are looking for -
Ext.onReady(function(){
Ext.Ajax.on('beforerequest', showSpinner, this);
Ext.Ajax.on('requestcomplete', hideSpinner, this);
Ext.Ajax.on('requestexception', hideSpinner, this);
...
}); //end of onReady
showSpinner = function(){
//setup and show mask
}
hideSpinner = function(){
//hide mask
}
Reference - Ext.Ajax
base on your update.... i got conclusion that you are using Ext version 3.x.x
When I start the application it displays "loading" mask. Then an ajax request is fired and when it is completed, "loading" mask is removed
how did you call the ajax ?? why don't you hide the mask in ajax callback ?
Ext.Ajax.request({
url : "blabla",
method : "GET",
callback : function(){
Ext.ux.mask.hide();
}
});
or, mybe you want to try this one (this is what i used to show preload)
Try the afterlayout event and specify a method to execute when it's trigered
Thanks to amol and Warung Nasi 49. Although I couldn't find the best way, I manage to get almost expected result:
Ext.onReady(function(){
Ext.ux.mask = new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});
Ext.ux.mask.show(); // Show the mask
// All components are loaded eg. viewport, tabpanel, button etc...
setTimeout(function(){
Ext.ux.mask.hide();
}, 2000);
});