Users do not like the scrolling tabs in the tabpanel. Is there any solution to order tabs in multiple rows?
var tp = Ext.create('Ext.tab.Panel', {
anchor: '100%',
border: 0,
items: [form, grid /*, ... */]
tabBar: {
// ???
}
});
It's not possible in ExtJS4.
You can either write your own CSS for tabpanel or a custom extension, which will do the trick.
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 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());
}
}
})
});
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 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.