I have a splibutton with a menu item. I want to make the width of the drop down equal to the split button width. Additionally I want to align the text in the center. How should I do it?
The width of the menu will be based on the width of the content inside. So if the width of the button will always be the same, you could set the width of the menu to that same value or you can get the width of the button and set it to the menu before rendering it.
As for centering the text, you have two options. Either via CSS, add a custom CLS to your menu and add the following CSS:
.yourCustomCls .x-menu-item-link {
text-align: center;
}
.yourCustomCls .x-menu-item-indent-no-separator {
margin-left: 0;
}
Or add the config plain: true to your menu and a style centering the text as in my example.
Example:
Ext.create('Ext.button.Split', {
renderTo: Ext.getBody(),
text: 'Commit Automatically',
menu: new Ext.menu.Menu({
plain: true,
style: 'text-align: center;',
items: [
{text: 'Commit On Trigger', handler: function(){ alert("Item 1 clicked"); }}
],
listeners: {
beforerender: function () {
this.setWidth(this.up('button').getWidth());
}
}
})
});
Related
I want to create a feedback form using extjs. How to align the button at side of screen. Kinda like the one in the photo. It is snippet of dashboard
This is a floating button. Adjust the position and shape.
var body = Ext.getBody();
var button1 = Ext.widget('button', {
text: 'Edit',
handler: function (button) {
console.log("button push");
},
floating: true,
renderTo: body,
style: 'position: absolute; bottom: 20px; right: 20px;'
});
I would recommend you to use a border layout. define region:"east" like this.
set east region opacity and modify CSS if needed.
I use rowwidget to display extra data for every row in my grid, for example: panel, but when I resize my grid or when the grid have a vertical scrollbar the size of the widget (width) remains the same, Is there any way to change the width of the widget automatically?
I mean like a layout for the rowwidget plugin?
config.plugins = [{
ptype: 'rowwidget',
widget: {
xtype: 'panel',
/* I want it's width as the plugin width even when resizing the grid*/
items: [],
height: 50,
style: {
'border': 'solid 1px green'
},
bind: {
}
}
}];
the layout can remain the same you can use the width of the grid, or window, to set a relative width for the widget dynamically . there should be a function that returns the width and height after onresize event, something like window.innerWidth , good luck finding the grid body with the console then get its width,
grid = Ext.getBody().component.items.items[1].items.items[1].body;
winWidth = grid.getWidth();
I have simple textfield but with larger height then normal:
definition is:
{
xtype: 'textfield',
itemId: 'POL_OGIN',
fieldLabel: 'Login:',
allowBlank: false,
height: 60,
name: login',
},
and I have no idea how to position label text "Login:", just center it vertically. Could you suggest how to do it?
Refer below fiddle:
https://fiddle.sencha.com/#fiddle/2941&view/editor
As there was no cls/any other config readily available to change fieldLabel,so i added afterrender listener for field & changed fieldLabel's top.Also there is other approach as add cls to fieldLabel and assign margin-top there.Below is code:
listeners: {
afterrender: function (field) {
var height=field.getHeight()/2-10;//10 for label height
field.labelCell.dom.querySelector('label').style['margin-top'] = height.toString()+'px';
//-----OR----
//Added class below
//field.labelEl.addCls('loginTextFieldCls');
//In cls give margin-top
}
}
Check if it helps you or not.
I use Ext JS. And I have a list of "panels". When user changes width of one panel, I need to change width of another panels automatically. Now when user changes one panel, another panels are not changed. Here is my code:
for (i = 0; i < resources.length; i++) {
table.add({
xtype: 'panel',
title: resources[i].name,
id: prefixResourceId + resources[i].id,
height: constHeight,
resizable:{
pinned:false,
dynamic:true,
floating:true
},
width: widthConst,
layout: 'fit'
});
}
I tryed to use this code:
listeners: {
resize: function(p) {
new Ext.Resizable(p.getEl(), {
pinned:false,
dynamic:true,
resizeElement: function() {
//this block works only when page are loaded
}
});
}
insdead of this:
resizable:{
pinned:false,
dynamic:true,
floating:true
},
But result is the same.
How can I change the width of all panels, when user changes width of one panel?
Put all the panels inside a surrounding panel, let the user change the size of this one, and all the contained panels will adapt their size automatically.
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.