While using ExtJs border layout I want my East panel to be expandable & collapsible only by clicking on the panel's header, i.e. use floating characteristic. My queries are:
How do I remove the collapse button?
How do I remove floating animation? (animCollapse property seems to
work only on collapse & expand actions performed on the collapse
button)
Ext.require(['*']);
Ext.onReady(function() {
new Ext.container.Viewport({
layout: 'border',
items: [{
region: 'west',
collapsed: true,
hideCollapseTool: true,
floatable: true,
width: 200,
title: 'Foo'
}, {
region: 'center'
}]
});
});
Prior to ExtJS 4.1.2 disabling the animation for floated panels was not possible.
Now, the animation will be disabled if animCollapse is set to 0.
Important!!!
The animCollapse property can be set to true, false, or the animation duration in milliseconds. However, if set to false it will still use the default animation time. It must be set to 0. I believe this is a bug and it's not yet fixed in 4.2.2
If you want to disable the animation but you are unable to update your project to ExtJS 4.1.2 or higher add the duration to the slideIn call in floatCollapsedPanel and to the slideOut call in slideOutFloatedPanel in the Ext.panel.Panel source code.
...
me.el.slideIn(slideDirection, {
preserveScroll: true,
duration: Ext.Number.from(me.animCollapse, Ext.fx.Anim.prototype.duration),
listeners: {
afteranimate: function() {
me.isSliding = false;
}
}
});
...
and
...
compEl.slideOut(collapseDirection, {
preserveScroll: true,
duration: Ext.Number.from(me.animCollapse, Ext.fx.Anim.prototype.duration),
listeners: {
afteranimate: function() {
me.slideOutFloatedPanelEnd();
// this would be in slideOutFloatedPanelEnd except that the only other
// caller removes this cls later
me.el.removeCls(Ext.baseCSSPrefix + 'border-region-slide-in');
me.isSliding = false;
}
}
});
...
See the 4.1.2 source code for Ext.panel.Panel: http://docs.sencha.com/extjs/4.1.2/source/Panel5.html#Ext-panel-Panel
Related
How to implement vertical line and arrows altogether in Ext Tree?
I have created a fiddle by using both properties of useArrows and lines, but not getting applied at the same time.
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 200,
store: store,
rootVisible: true,
lines:true,
useArrows: true,
renderTo: Ext.getBody()
});
Fiddle
useArows and lines in tree is mutually exclusive properties
But you can use next hack - set useArrow and manually set linesCls, and override some css classes.
Look at my fiddle
As you can see in the source code for the Ext.tree.Panel ExtJs will not give the tree panel the lines CSS if the #cfg useArrows is true.
initComponent: function() {
var me = this,
cls = [me.treeCls],
store, autoTree, view;
if (me.useArrows) {
cls.push(me.arrowCls);
me.lines = false;
}
if (me.lines) {
cls.push(me.linesCls);
} else if (!me.useArrows) {
cls.push(me.noLinesCls);
}
....}
You have two options here in my opinion:
You override the initComponent method for this Ext.tree.Panel
You can override the css classes to implement the arrow-images
I made a Fiddle for the second case. This is what you wanted?
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.
How can I remove the icon in this actioncolumn item within its handler?
{
header: 'Activate',
xtype: 'actioncolumn',
align: 'center',
width: 30,
sortable: false,
items: [{
icon: './Scripts/extjs/examples/shared/icons/fam/accept.png',
tooltip: '',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
if (rec.get('status') == '1') { // if active, don't show icon
this.up('actioncolumn').icon = '';
}
}
...
In general, it can't - configs are applied at initialization time, and sadly the ExtJS API doesn't always provide ways to change things as easily as they are specified in configs.
In the case of an ActionColumn, you can see in the source that the icon is used to generate a renderer function in the constructor and there's no way to set it afterwards.
To dynamically decide whether to show an icon or not, you'll need to use iconCls instead, see here.
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.
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.