I made the sufficient investigation of this problem. But unfortunately didn't find any solution, even in stackoverflow questions, that look like this one.
I need to redraw(refresh, re-render) a panel, that contains a tabPanel with different tabs, that are rebuilding each time when I open the panel. Here is the code below to build tabs
//the first tab
categoryTpl: function(){
var categoriesTab = new Ext.Panel({
id: '_Categories',
title: 'X-Axis',
layout: 'form',
padding: 10,
labelWidth: 101,
items: [...]
})
}
Here is code to build the TabPanel
setAxesInfo: function(){
var categoryTab = this.categoryTpl();
//initialize the controls in the first tab
FC.Var.CM.initAxis(categoryTab, undefined);
delete this.axesTabPan;
this.axesTabPan = new Ext.TabPanel({
activeTab: 0,
plain: true,
enableTabScroll: true,
autoScroll: false,
defaults: { autoScroll: true },
items: [categoryTab]
});
}
This is the code to build Panel
create: function(){
this.setAxesInfo();
this.axes = new Ext.Panel({
layout: 'fit',
border: false,
items: this.axesTabPan
});
return {
id: 'axesStep',
title: 'Series Customization',
items: this.axes
}
}
So, I make changes in tab controls and then I want to rebuild(refresh, re-render) my panel I click the button, which have the next handler
refreshAxes: function() {
this.axes.removeAll();
this.setAxesInfo();
this.axes.add(this.axesTabPan);
this.axes.doLayout();
}
So, in debugger I can see, that all my controls in the tab have default initial values (they were rebuilt as I see). But in the browser I see only the previous changed values. It's notable, that if I change the focus of my panel (for example switch to another panel) and then return to this panel all data have the default values. Why I don't see the default values without loosing focus?
I am using the Ext Js 3.4 (this version is the requirement). I'll appreciate any help. Thank you.
Try doing a doLayout() on the Panel.
Related
I m getting undefined values while accessing grid rows of 2nd tab of tabpanel.
I have created a tabpanel with the following code:
xtype: 'tabpanel',
border: false,
deferredRender: true,
region: 'center',
activeTab: 0,
items:[{
id: 'availableoperators',
itemId: 'ops-operators-grid',
xtype: 'chat.dashboard.opsmall',
title: 'Operators',
region: 'center'
}, {
id: 'availableagents',
itemId: 'ops-agents-grid',
xtype: 'chat.dashboard.opsmgrid',
title: 'Agents',
region: 'center'
}]
Here I m trying to access rows of 2nd panel:
var opsGrid = Ext.getCmp('availableagents');
var records = opsGrid.store.getRange(0, opsGrid.store.getTotalCount());
for(var i = 0; i < records.length; i++) {
var row = opsGrid.getView().getRow(i);
}
The above code is working fine only if I use id of first tab. Any help would be appreciated.
It happens because component on the tab will be rendered at first shown. Store by default will be loaded after rendering of the grid on this tab. So you don't have rendered markup (the opsGrid.getView()) and don't have loaded data at store untill you opened the tab. If you will open second tab and manually run your code it should work fine.
Try to set deferredRender to false for the tabpanel, or forceLayout to true for your second tab. It will force rendering and loading all tabs (deferredRender:false) or only tab, there you will set forceLayout.
I'm going in the same way that Selmaril. Your view is not accessible. If you want, you can switch tab before the getView.
yourTabPanel.setActiveTab("availableagents");
yourTabPanel.doLayout();
Where yourTabPanel is the xtype: 'tabpanel', set it an id and you will be able to do:
Ext.getCmp("yourTabPanel").setActiveTab("availableagents");
I use extjs 3.4.0 and i have a problem with the buttons in the method deactivate.
I create the menu with GeoExt which i put the buttons.
var mapPanel = new GeoExt.MapPanel({
border: true,
region: "center",
// we do not want all overlays, to try the OverlayLayerContainer
map: mapa,
tbar: toolbar,
zoom: 3
});
In this example I put just 2 buttons, the fist is to move and de last is for calculate length. The controls for calculate length is working correctly.
var toggleGroup = "measure controls";
var buttonMover = new Ext.Button({
iconCls: 'mover',
cls: 'margenBoton',
enableToggle: true,
toggleGroup: toggleGroup
});
this is the button for length.
var buttonLong = new Ext.Button({
iconCls: 'regla',
cls: 'margenBoton',
enableToggle: true,
toggleGroup: toggleGroup,
handler: function (toggled){
if (toggled) {
longitud.activate();
} else {
longitud.deactivate();
}
}
});
here I incorporate my buttons in the panel.
mapPanel.getTopToolbar().addButton(buttonMover);
mapPanel.getTopToolbar().addButton(buttonLong);
The problem is when I choose the length button, I calculate length correctly but I want choose another button or I deactivate this button it doesn't deactivate.
I use Grid panel. When I select the row in the grid I get the following results:
If I render the Form in 'document.body' everything is OK, and form
fields are filled.
If I, same Form start in Window panel, Form fields are empty.
When I use both, Form which is rendered in the 'document.body' is
closed, and Form fields in Window are filled.
Where I make mistake.
// Grip panel part
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, index, record) {deleteWindow.show();}
}
})
// End Grid panel part
var myForm = new Ext.form.FormPanel({
title:"Basic Form",
width:425,
frame:true,
items: [
new Ext.form.TextField({
id:"to",
fieldLabel:"To",
width:275,
allowBlank:false,
blankText:"Please enter a to address",
readOnly: true
}),
new Ext.form.TextField({
id:"subject",
fieldLabel:"Subject",
width:275,
allowBlank:false,
blankText:"Please enter a subject address",
readOnly: true
}),
],
buttons: [
{text:"Cancel"},
{text:"Save"}
]
});
var deleteWindow = new Ext.Window({
id: 'id_deleteWindow',
title: 'Delete',
closable:true,
width: 750,
height: 380,
plain:true,
layout: 'fit',
items: myForm
});
var id_test = 2; // This is only for this problem
//myForm.render(document.body); // When using this code everything is ok, and form fields are filled
myForm.getForm().load({
url:'ggg.php',
params:{
id: id_test
}
});
JSON data
{success:true,results:[{"id_test":"1","to":"a","subject":"aa"}]}
I would suggest the following changes to the code:
In place of using the id property on the TextField (say, id: 'subject'), use name property (name: 'subject')
Just curious....since you are handling the rowselect event on the grid, you might want to load the selected record in the form panel rather than loading it again. If this is the case, then you may call the loadRecord() method on the form panel and pass the record object to it and then call the show() method on the window
I figured out that when load is called on form, ExtJS tries to access form dom element to determine form method. I've found 2 solutions:
Add method to the form config
Load data to form after window is showed
Here is code for second solution:
var deleteWindow = new Ext.Window({
id: 'id_deleteWindow',
title: 'Delete',
closable:true,
width: 750,
height: 380,
plain:true,
layout: 'fit',
items: myForm,
listeners: {
show: function() {
var form = this.items.get(0);
form.getForm().load({
url:'ggg.php',
params:{
id: id_test
}
});
}
}
});
deleteWindow.show();
I have a combobox inside of a ext.panel, inside of an ext.window. When I click the down arrow to show the possible SELECT options, the options pop up at the top-left of the browser window, instead of below the SELECT box. The funny thing is if I attach the drugDetailsPanel (see code below) to a div on the page (instead of inside an ext.window), the combobox works correctly. This also happens when I change ext.panel to ext.form.formpanel, by the way.
Any ideas?
My code:
drugDetailsPanel = new Ext.Panel({
layout:'form',
id:'drug-details-panel',
region:'center',
title:'Drug Details',
height:200,
collapsed:false,
collapsible:false,
items:[
new Ext.form.ComboBox({
fieldLabel:'What is the status of this drug?',
typeAhead:false,
store:drugStatusStore,
displayField:'lookup',
mode:'remote',
triggerAction:'all',
editable:false,
allowBlank:false,
emptyText:'Select a status..',
name:'/drug/drug-status',
id:'drug-status'
})
]
});
newDrugWindow = new Ext.Window({
title: 'Add Drug',
closable:true,
width:650,
height:650,
//border:false,
plain:true,
layout: 'border',
items: [drugDetailsPanel],
closeAction:'hide',
modal:true,
buttons: [
{
text:'Close',
disabled:false,
handler: function(){
newDrugWindow.hide();
}
},
{
text:'Save Drug',
handler: function(){
newDrugDialog.hide();
}
}]
});
Try to add shim: true to combo-box control.
Older versions of Ext had issues like this in certain browsers (FF 2.x) in certain situations dealing with nested positioning, the specifics of which escape me now. If that's the case, search the Ext forums for more info. If not, then I'm not sure...
This forum thread helped me: http://www.sencha.com/forum/showthread.php?177677-IE-displays-combobox-dropdown-in-the-top-left-corner-of-browser-window
Just give the combobox a (unique) name. Giving the combobox an inputId should also help
Seems like IE does not respect the position of the element if it does not have an explicit name/inputId. This thread goes more deeply into it: http://www.sencha.com/forum/showthread.php?154412-Combo-Box-options-appears-in-Top-Left-Corner-in-IE-9
I've created a panel bundled with an Ext.Template. This panel is contained in another panel that starts its life collapsed.
id: 'myPanel',
title: 'My Title',
layout: 'border',
collapsible: true,
collapsed: true,
hideCollapseTool:true,
bodyBorder: false,
height: 300,
bodyStyle: 'background:#F9F9F9;',
items: [{
id: 'myDisplayPanel',
bodyStyle: 'background:transparent;',
width: 300,
border: false,
margins: '5 5 5 5',
region: 'west',
tpl: new Ext.Template([
'some template'
])
},
{
id: 'myForm',
xtype: 'form',
bodyStyle: 'background:transparent;',
border: false,
margins: '5 5 5 5',
region: 'center',
[...]
This template-panel is supposed to be updated as the result of a row select in a neighbouring grid. But I get an error the first time I call .update(data); on the myDisplayPanel, as it contains no body element.
myGridSelectionModel: new Ext.grid.RowSelectionModel({
singleselect: true,
listeners: {
rowselect: function(sm,rowIdx,r) {
Ext.getCmp('myDisplayPanel').update(r.data);
Ext.getCmp('myPanel').expand(true);
}
}
}),
The call to myDisplayPanel.update() causes an error when Ext tries to call the template.overwrite function with myDisplayPanel.body as the first param.
function(b,a,c){b=Ext.getDom(b);b.innerHTML=this.applyTemplate(a);
Is it possible somehow to force Ext to generate a body element for this hidden panel before it is beeing shown? I've tried to expand the element prior to updating it, but this has now effect...
I know this thread is 2 months old, so I'm not sure if you ever found a solution. However, I just ran into the same thing and came across your thread while looking for an answer. This is what I ended up doing:
Where you're currently running panel.update(content), try this:
if(panel.rendered) panel.update(content);
else panel.contentToLoad = content;
Set up a listener for the render event to run:
if(this.contentToLoad) panel.update(this.contentToLoad);
That way, if the panel isn't rendered, it will store the content somewhere and the render listener will load whatever is there when the panel IS rendered.
Collapsed panels (and hidden containers in general) by default do not layout their children until they first become visible. You can override this behavior by setting forceLayout: true on the collapsed container. As the name suggests, this will force the container to perform its layout whether it is visible or not. Note that in your case this would be myPanel that would need this configuration, not myDisplayPanel.
You might try Panel's elements config, which from the docs is "A comma-delimited list of panel elements to initialize when the panel is rendered." So e.g.,
elements: ['header','body']
However it already defaults to 'body' only, so it may just be that the panel is truly not rendered yet when you are updating it. Try reversing the order of your calls so that the container is expanded first (should force the child panel to render) then update it.