How to add Columns in Ext.js within ext.panel.Panel - javascript

Im designing a screen in which the header has a button with certain functionality. To acheive this I used
Ext.panel.Panel
Now I want to add columns within this screen below the header.
This is my code:
var screen = Ext.create('Ext.panel.Panel', {
title: 'Search',
tools: [{
xtype: 'button',
text: 'Click',
//code here for button functionality
}],
layout: 'column',
items: [{
text: "column1",
width: .5
}, {
text: "column2",
width: .5
}]
})
The error Im getting is that I can get the button to work on the header, but cannot see the columns. Is there a solution to fix this?
I have also included the image. The black rectangle shows how my columns are appearing.

In both Ext 4.1.1 and Ext 4.2.0 the following changes are required in your code:
Rename property text to title in the columns config
In the same config, rename property width to columnWidth
Add renderTo: Ext.getBody() attribute
jsfiddle seems to impose some limitations on how extjs panel is rendered. While I am not sure what's the issue with jsfiddle, here is a Plunker link that displays panel as expected.
IMO, ExtJs GridPanel is a better way to add tool bar to your panel and display tabular data. Read more about it in Sencha docs

I finally worked out the solution for my question. I needed a button functionality in the header and also columns which could have functionality like arranging the items in ascending/descending order etc (basically the grid.column)
var screen = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Search',
tools: [{
xtype: 'button',
text: 'Click',
//code here for button functionality
}],
items:
[{xtype: 'gridpanel',
columns: [
{
header : "Column 1",
width: .5
},
{
header : "column2",
width: .5
}],
}],
});

Related

ExtJs - Javascript - ComboBox in Grid (Cell editing plugin) - Drop down list behind the Grid/Window

I have a grid with cell editing plugin on it. When i click the cell i want to edit, sometimes the dropdown list of the combo box is behind the grid/window (I can not see it, but if i modify the window size i can see the combo box items behind it).
My code looks like this (I have a window which contains this form):
items: [{
xtype: 'form',
items: [
me.currentMultipleValuesGrid = Ext.create('Ext.grid.Panel', {
store: me.gridStoreToValidate,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
delay: 10
})],
listeners: {
validateedit: function (editor, cell, eOpts) {
//cell.cancel = true;
}
},
columns: [{
header: GTR(CLNAME(me), 'colSource.Text', 'Source'),
dataIndex: 'source',
flex: 1
}, {
dataIndex: 'name',
header: GTR(CLNAME(me), 'colLinkDestination.Text', 'Link destination'),
editor: {
xtype: 'combobox',
queryMode: 'local',
valueField: 'nr',
displayField: 'name',
store: me.comboBoxEditorStore,
listeners: {
change: function (thisCmb, newValue, oldValue) {
},
beforerender: function (thisCmb, eOpts) {
}
}
},
flex: 1
}, {
dataIndex: 'linkdestination',
hidden: true
}]
})]
}]
I think it is a layout problem, so I tried different layouts (anchor and fit) assigned to window, grid or form, with various combinations of them. No success so far. Any ideas? Thank you. I am using Extjs 4.0.7
I solved this a while ago. Came back to post the answer, in case someone needs it. It seems it is a Sencha bug, which causes the drop down list to be displayed behind the window, when the window is modal (like it was in my case). I managed to make a workaround, by assigning a css class to the drop down list of the combo, by adding this in combo settings :
listConfig: { cls: 'clsZIndexMax' }
where clsZIndexMax is my css class containing z-index: 100000 !important;
PS: I had this bug in version 4.0.7, don't know if they already solved it in future versions.

Disable grid panel with checkboxes

My requirement is that to disable a grid panel inside field set or grid rows on certain condition. The grid has more than 20 items and there should be a scroll bar to view all the elements of the grid. If I use disabled property of grid panel, then the scroll bar also gets disabled. But i need the scroll bar to be enabled, so that user can see all items of grid.
For above i coded with feildset autoscroll: true and layout:fit. But on disabling the grid panel, the scrollbar of fieldset also gets disabled because of layout:fit property of fieldset. Is there any way to achieve the requirement?
Code:
Ext.applyIf(this, {
border : false,
frame : false,
bodyStyle : 'padding:12px 15px 0px',
labelAlign : 'top',
columnWidth : 0.5,
heigth : 350,
layout : 'form',
items: [{
xtype: 'fields',
id: 'fields',
layout: 'fit',
height: 321,
autoScroll: true,
title: 'Element list',
items: mygridPanel
}]
})
I've made up a small demo on jsFiddle for you to look at:
http://jsfiddle.net/CGtqp/
does this help you solve your issue?

check item icon in sencha

I am new at Extjs and Sencha. i started to design my UI and i could successfully add an iconCls with buttons. now i need to add icon to a checkitem menue http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.menu.CheckItem
but i couldn't ! even though i use iconCls property.
anyone have done this before ?
If you just want the icon right next to the text, you can just insert an image after the menu item is rendered
Ext.create('Ext.menu.Menu', {
width: 100,
height: 200,
floating: false,
renderTo: Ext.getBody(),
items: [{
xtype: 'menucheckitem',
text: 'select all',
listeners: {
render: function(comp) {
Ext.DomHelper.insertAfter(comp.getEl().down(".x-menu-item-icon"), {
tag: 'img',
src: "http://flyosity.com/images/_blogentries/networkicon/stepfinal2.png",
width: 16,
height: 16
});
}
}
}]
});
Ideally, you'd create a plugin or a subclass so you can reuse this functionality. The above code does not realign the separator, it's single separator for the entire menu, but it should give you a head start

How to get panel within vbox layout to fill container?

I'm having trouble getting a panel to fill the space within its container panel. The container is a panel with a vbox layout having two child panels. I looked at Extjs how to set 100% height for vbox panel
and have something similar but it doesn't seem to work.
Screenshots:-
http://i.imgur.com/nAbCr.png
The screenshot is from when i use a 'fit' layout or dont even have the combobox or optionsview in a containing panel. So, what i want is for the 'options' panel to extend all the way down till the 'results' panel.
with the present vbox layout this is what i get - http://i.imgur.com/cB0k1.png
Ext.define('PA.view.CreateReportView', {
extend: 'Ext.panel.Panel',
alias: 'widget.createreportview',
id: 'createreport-panel',
requires: [
'PA.view.OptionsView', // options panel
'PA.common.Connection'],
title: 'Create Report',
items: [{
xtype: 'panel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
border: false,
height: '50px',
items: [{
xtype: 'combobox',
....
}]
}, {
xtype: 'panel',
border: false,
flex: 1,
items: [{
xtype: 'optionsview', // options panel
style: {
paddingTop: '10px'
}
}]
}]
}]
});
The value of height: should be a number, not a string. So use height: 50 instead.
I think you have it close to what you need. Couple of observations:
1. Heights need to be set as integers (no px suffix)
2. Each container that will have children should have a layout defined for them, even though there is default - it might not be what you want.
Here is your layout working reasonably well http://jsfiddle.net/dbrin/NJjhB/
One other suggestion I would add is to use a tool like Illuminations for Developers - a firebug plugin that knows about ExtJS framework.

Adding tabs to an existing toolbar in ExtJS

I have an existing toolbar and would like to add tabs to it that would flip between two panels that use a card layout. What would be my best option and are there any examples of doing so?
Is it possible to add the tabs to my existing toolbar? Changing the xtype on my existing buttons didn't provide me with the tabs I was hoping to see.
Create a tab panel which would contain my two cards, mapping each tab to its panel. With this option, can I add additional buttons and menus to the tab panel?
Here's a sample of my existing toolbar code, can message_button and attachments_button simply have an xtype of tab and then somehow emulate the tab functionality?
Ext.define('MyArchive.Toolbar', {
alias: 'myarchive.toolbar',
extend: 'Ext.toolbar.Toolbar',
dock: 'top',
width: '100%',
items: [
// Pretty straight forward buttons with a listener, nothing fancy
messages_button,
attachments_button,
'->',
{ xtype: 'button', id: 'forward-button', text: 'Forward' },
'-',
{ xtype: 'button', id: 'recover-button', text: 'Recover' },
'-',
{
text: 'Download',
menu: {
xtype: 'menu',
id: 'download-menu',
items: [
{xtype: 'menuitem', id: 'download-original', text: 'Original', iconCls: 'download-icon'},
{xtype: 'menuitem', id: 'download-pdf', text: 'PDF', iconCls: 'pdf-icon'}
]
}
}
]
Is it possible to add the tabs to my existing toolbar? Changing the
xtype on my existing buttons didn't provide me with the tabs I was
hoping to see.
I've tried it. But no luck.
Create a tab panel which would contain my two cards, mapping each tab
to its panel. With this option, can I add additional buttons and menus
to the tab panel?
It is possible. But result looks ugly (you can decorate it with CSS).
Use tabpanel.tabBar.add() to add buttons and menus (Here is demo):
tabpanel.tabBar.add({
xtype: 'button',
text: 'hallo, I\'m a button'
});
tabpanel.tabBar.add({
xtype: 'splitbutton',
text: 'Download',
menu: {
xtype: 'menu',
id: 'download-menu',
// ans so on ...

Categories