My goal is to make somethink like this:
There is viewport with border layout. "Container" and "center" both have "fit" layout. The "Panel" has 'vbox' layout and has three elements. The grid has one row when loaded the first time. I want all the grid to catch all the height and the button panels on top and in the bottom of it. If I don't specify the height of the grid or "container" or "Panel", I don't see anything.
How can I make it work?
Remove the excess panels and make the grid panel itself the center region of the border layout. The "button panels" should be toolbars of the grid panel:
new Ext.Viewport({
layout: 'border',
items: [
{
region: 'center',
xtype: 'grid',
// ... other required grid properties, like 'store' and 'columns'
tbar: [
// Top toolbar. Items are Ext.Button instances.
{
text: 'Button 1'
},
{
text: 'Button 2'
}
],
bbar: [
// Bottom toolbar. Items are Ext.Button instances.
{
text: 'Button 3'
},
{
text: 'Button 4'
}
]
}
]
});
The problem is that grids and elements will want to use the least amount of vertical space possible unless you set a fixed height on them. The best solution is to use a min-height style to allow the grid to grow as long as it wants but always be at least some minimum value.
It would be helpful if you posted some code. If the panel has a tbar and bbar and it's only items is a gridpanel then you could give the gridpanel a flex (I think any number will work)and you probalbaly want the layoutConfig to be align : 'stretch' . In a vbox layout if a child's flex is not provided it will use the original height of the child.
Panel({
layout: {
type: 'vbox',
align: 'stretch'
},
tbar: {},
bbar: {},
items : [{
xtype:'grid',
flex: 1
}]
})
Related
I'm trying to setup an editable grid in Tabulator where I want to click on a cell to select it and then use arrow keys to move around the grid.
Then, if a key is pressed such as Enter, the value is able to be edited.
The current behaviour that I can't seem to disable is that as soon as you click on an editable cell it immediately opens the editor. Depending on the type of editor, the arrow keys might move to the adjacent cell or they might just interact with the editor (e.g. for a select editor, the up and down just moves up and down the list of options). If I hit Esc in the cell then editing stops as expected but the cell is not selected in any way so there is no way to move to an adjacent cell.
A very simple setup for the table is,
{
data: gridData,
layout: "fitColumns",
columns: [
{ title: 'Name', width: 100, field: 'name', editor: 'input', },
{ title: 'Age', width: 60, field: 'age', editor: 'number', },
{ title: 'Colour', width: 100, field: 'colour', editor: 'select', editorParams: {
values: ['red', 'green', 'blue']}
},
{ title: 'Progress', width: 80, field: 'progress', editor: 'number', },
],
pagination: "local",
paginationSize: 25,
paginationSizeSelector: true,
}
You can navigate inside your tabulator table with the following code:
keybindings:{"navUp" :"38","navDown" :"40","navLeft" :"37","navRight" :"39"},
Moreover you can asign double click inside column declaration in order to change your data.
{title:"Name", field:"name", cellDblClick:function(e, cell){
//e - the click event object
//cell - cell component
},
}
To prevent enter data with one click, just leave empty the corresponding callback.
Also take a look at this helpful documentation: Tabulator Key Bindings
and Tabulator Click events
I'm trying to understand how anchors work in QML (Qt Quick 2.0). I've got a simple Item like this:
AddButton.qml:
Item {
Button {
text: "ADD"
width: 100
height: 50
}
}
Which I add to the main QML file like this:
main.qml:
Item {
id: root
width: 800
height: 600
AddButton {
id: addButton
}
}
This works fine. However, as soon as I try to put the button in the bottom right corner using anchors, the button disappears:
main.qml:
Item {
.....
AddButton {
id: addButton
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
It only comes back if I set a width and height at the main QML file level:
main.qml:
Item {
.....
AddButton {
id: addButton
width: 100
height: 50
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
So I'm wondering, why does the button disappear when I set the anchors? And is there any way to make it work without setting the width and height in the main QML file (basically to make it use whatever size is set in AddButton.qml?)
The problem is that the encapsulating Item has not an explicit width height. In this case the engine refers to the "natural" witdh/height, i.e. the implicitWidth/implicitHeight properties. Such properties happen to be zero in most cases, even in this specific case. Hence, your custom type has zero dimension.
Therefore the AddButton.anchors.bottom is in fact at the very top of the encapsulated Button, which in turn protrudes the encapsulating Item
There are two things about this:
You don't need to encapsulate the Button with an Item unless you want to hide the internals of the Button.
If the latter is your desire, try this:
Item {
width: 100 //give the object a dimension!
height: 50
Button {
text: "ADD"
anchors.fill: parent
}
}
Now you can anchor it, and it won't be positionated somewhere else.
I'm trying to add a colorbutton in a TinyMCE dialog box to replace my old color selector which was initially created with a select input.
See : ColorButton : API 4.X
This class creates a color button control. This is a split button in which the main button has a visual representation of the currently selected color. When clicked the caret button displays a color picker, allowing the user to select a new color.
I can add and see the new colorbutton in the dialog box but it doesn't show the colorpicker when clicked.
Here is my code:
editor.windowManager.open( {
title: 'Choose color',
body: [
{
type: 'listbox',
name: 'bg-color',
label: 'Color (select)',
'values': [
{text: 'White', value: '#FFF'},
{text: 'Black', value: '#000'},
{text: 'Silver', value: 'silver'},
]
},
{
type: 'ColorButton',
name: 'bg-color2',
label: 'Color (colorpicker)',
},
],
onsubmit: function(e) {
// Do something here
}
});
And you will find a tinymce fiddle here to illustrate this issue:http://fiddle.tinymce.com/sfeaab
Since my debugger doesn't show any JS error, is there something wrong in this code or is there another way to add a colorpicker in a dialogbox?
Thanks!
#MavBzh I think you've a wrong perception on how the color button works. The ColorButton UI is only help with rendering a button which not much difference with PanelButton UI. you can see this example http://fiddle.tinymce.com/sfeaab/3 in this fiddle I use textcolor plugin example.
So, in order to use color button you're required to specify the Panel to hold the color picker.
{
type: 'colorbutton',
name: 'color',
text: 'Color',
selectcmd: 'ForeColor',
panel: {
role: 'application',
ariaRemember: true,
html: renderColorPicker,
onclick: onPanelClick
},
onclick: onButtonClick
}
then later set onclick callback action and render the color picker HTML output yourself, the renderColorPicker function is used as the panel content, then assigned onPanelClick callback to put the color to the text placeholder in the ColorButton.
PS: in the fiddle I used v4.0.21
Is it possible to create a item in a tabbar-ed card layout, that has no tab?
I want to create a message overlay that stretches from screen top to the tab bar and doesn't cover the tab bar. When i do this by adding an item to the panel everything works fine except a blank icon is created on the tabbar. Is there a way to prevent this icon from being created?
you can create the new item with hidden: true config option
Ext.define('App.view.settings.SettingsContainer', {
extend: 'Ext.tab.Panel',
xtype: 'settingsContainer',
requires : [
...
],
config: {
tabBar: {
docked: 'top'
},
tab: {
title: 'Settings',
iconCls: 'user'
},
items: [{
xtype: 'settingsAccountContainer'
}
, {
xtype: 'changeCompanyView',
hidden: true
}]
}
});
changeCompanyView is created, but no tab icon is visible.
It could be activated by
settingsContainer.setActiveItem(1);
Cheers, Oleg
This should work. Add the overlay to the child item and not the tab panel.
childPanelItem.add(
Ext.create('Ext.Panel',
{
xtype:'panel',
html:'Demo',
top:0,
left:0,
right:0,
bottom:0
}
)
);
If you add to the child panel the icon will not appear on the tab bar.
I have some problem with complex objects on tabpanel.
I have 2 complex objects with stores, windows, grids, trees and etc. Here is the beginning of the object:
Ext.define('Ext.app.DocumentsContainer', {
extend: 'Ext.container.Container',
initComponent: function(){
var documentsStore = Ext.create('Ext.data.Store', {
And I have tabpanel with 2 panels(one for each object).
full code of viewport with tabpanel:
Ext.create('Ext.container.Viewport', {
layout: 'border',
padding: '5',
items: [
{
xtype: 'container',
region: 'north',
height: 50
},
{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
width: 100,
items: [
{
xtype: 'panel',
title: 'Documents',
layout: 'border',
items: Ext.create('Ext.app.DocumentsContainer'),
},{
xtype: 'panel',
title: 'Transmittals',
layout: 'border',
items: [Ext.create('Ext.app.TransmittalsContainer')],
}]
}
],
});
When I testing my page, a have a problem, because somehow data from one object dysplays in grid in another object, or doesnt dysplay at all.
But both objects working correctly one at a time.
I think, I can fix it by dynamically loading objects when tab is opened, but dont know how can I do it.
Any suggestions?
Without knowing the internals of your two components Ext.app.DocumentsContainer and Ext.app.TransmittalsContainer one cannot reliably answer your question. Perhaps you assign the same ID to two different internal components - that's most often the reason for mixed up data.
Secondly, Frederic is right - you're overnesting your components. Both panels inside the tabpanel are unnecessary because you can put your components directly into the tabpanel as illustrated by Frederic. However, if you insist to keep your panels, try changing the layout to fit because that layout-type handles single-item-components (sized the single component to fit into the parent frame).
You are overnesting the tabpanel. The tabpanels items will automatically stretch their content. So it might just work for you.
Do this instead. Change DocumentContainer to pe panel (so it can have a title. )
Ext.define('Ext.app.DocumentsContainer', {
extend: 'Ext.panel.Panel',
initComponent: function(){
var documentsStore = Ext.create('Ext.data.Store', {
And change you tabpanel to this. I also deleted the width on your center region. center regions fills out the rest of the border layouts space automatically.
Ext.create('Ext.container.Viewport', {
layout: 'border',
padding: '5',
items: [
{
xtype: 'container',
region: 'north',
height: 50
},
{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [
Ext.create('Ext.app.DocumentsContainer', {title:'Documents'}),
Ext.create('Ext.app.TransmittalsContainer', {title:'Transmittals'})
]
}
],
});
Also. as Stefan mentioned. Never ever use id´s in your ExtJS4 code. They are evil and will freck your result up eventually. itemId or just simple Ext.DomQuery is the way to do it.