I am trying to add a textfield (or combobox) into the column header of dynamic grid.
There are suggestions for using "items" property to resolve this problem like in example below (line 81 in live example ):
...
text: 'Email',
flex: 1,
menuDisabled: true,
sortable: false,
dataIndex: 'email',
items: [{
xtype: 'textfield',
labelWidth: 40,
flex: 1,
fieldLabel: 'Email'
}]
...
And it basically works but, there are several issues with layout which I cannot resolve myself:
textfield control appears under the column title (expect horizontal items alignment);
height of column header is to big (must be normal);
Here is a picture what I want to get.
Also, there is a live example in the fiddle with mentioned issues.
Are there any ideas how to fix this?
You were just about there, here are the code changes I made.
function getColumnConfigs() {
return [{
text: 'Name',
dataIndex: 'name',
flex: 1
}, {
text: '',
flex: 1,
menuDisabled: true,
sortable: false,
dataIndex: 'email',
items: [{
xtype: 'combobox',
store: ages,
valueField: 'age',
displayField: 'age',
labelWidth: 40,
padding: '0 0 0 10',
flex: 1,
fieldLabel: 'Age'
}]
}]
The code removes your text attribute so it doesn't show the column header. Padding was added to the combobox to move the label right. I added the combobox rather than a textfield.
And a fiddle.
Related
I´ve a following combobox in extjs:
xtype: 'mcomboboxfield',
itemId: 'component1-'+i+'-mes-'+mesSeleccionado,
cls: 'component1-cls',
fieldLabel: 'PATRON',
height: 333,
flex: 4,
displayField: 'nombre',
valueField: 'codPatron',
editable: false,
queryMode: 'remote',
shadow : false,
left:0,
valueOriginal: codPatron,
value: codPatron ,
store : 'sPatronesTodos',
disabled: isWeekDisabled,
layout:{
type: 'hbox',
align: 'stretch'
},
listeners: {
afterrender: function(cmp) {
cmp.getStore().load();
},
}
Sometimes works fine, but sometimes codPatron is showed instead nombre. Why does it happen and how can I prevent it?
The value is shown when there is no corresponding entry in the backing store. To fix it, make sure there is an entry for every value in the backing store.
I was wondering if it is possible to dynamically create a grid view. I'll do my best to explain...
I have currently have a database table that have different regions, I have created a grid around this and you can add new entries into this grid, which in turn adds it to the table..
I also have a database table for contact people that contain the names, phone numbers, and uses the all the regions as a drop down. Again you can add new entries in this table via the grid.
Finally I have a third grid that shows all the contact people, broken down to their regions. The problem I am having is how do I make it dynamic? Currently I have hard coded the region titles and populate a grid which filters properly, however what if someone adds a new region completely? How can I create a title and grid with the proper filter for the newly added region?
Third grid code:
Ext.define('myproject.example', {
extend: 'Ext.form.Panel',
alias: 'widget.********',
requires: [
'store.exampleStore'
],
modal: true,
draggable: true,
header: {
title: 'Technical Advisors Contact Information',
height: 55,
items: [{
xtype: 'button',
text: 'X',
listeners: { click: 'onModalX' }
}]
},
scrollable: true,
align: 'center',
floating: true,
width: 1500,
height: 800,
items: [{
xtype: 'grid',
title: 'Region: ME',
scrollable: true,
collapsible: true,
store: { type: 'exampleStore', filters: [{ property: 'Region', value: 'ME' }, { property: 'Active', value: 'true' }] },
columns: [{
text: 'Contact',
dataIndex: 'ContactName',
sortable: true,
flex: 2
}, {
text: 'Office #',
dataIndex: 'Office',
sortable: true,
flex: 1
}, {
text: 'Home #',
dataIndex: 'Home',
sortable: true,
flex: 1
}, {
text: 'Pager #',
dataIndex: 'Pager',
sortable: true,
flex: 1
}, {
text: 'Cellular #',
dataIndex: 'Cellular',
sortable: true,
flex: 1
}, {
text: 'Area',
dataIndex: 'Region',
sortable: true,
flex: 3
}] //continues...
For the first, you need to get data on the client-side (in the browser). This can be done via an ajax request (jsonp, ext.direct, rest, etc..).
Then you can load data into your store:
grid.store.loadData(result.data);
You can do this manually, or read about proxies in extjs. The easiest way to start is rest-proxy.
Is there a way I can set the columns width to match the width of the column text? The user can resize the columns to see the content if needed, but I want the full header text to be showing at least, even if the column content isnt.
thanks
Yes it should be possible. You can call the method autoSize() on the column.
You can combine it with the minWidth and maxWidth.
I have found this example on the Sencha forums for Ext 4.2 so it should be very similar for Ext 6.2:
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name', width: 150, autoSizeColumn: true },
{ text: 'Email', dataIndex: 'email', width: 150, autoSizeColumn: true, minWidth: 150 },
{ text: 'Phone', dataIndex: 'phone', width: 150 }
],
viewConfig: {
listeners: {
refresh: function(dataview) {
Ext.each(dataview.panel.columns, function(column) {
if (column.autoSizeColumn === true)
column.autoSize();
})
}
}
},
width: 450,
renderTo: Ext.getBody()
});
i am new to extjs and i am trying to add a checkbox to my container.viewport gridpanel.
This is my code:
xtype: 'gridpanel',
flex: 2,
autoScroll: true,
title: 'title',
store: 'OutgoingDataStore',
columns: [
{
xtype: 'gridcolumn',
align: 'right',
dataIndex: 'calls_m',
text: 'Calls Monthly'
},
{
xtype: 'checkcolumn',
align: 'right',
dataIndex: 'check',
text: 'check',
}..
without the checkcolumnit works fine, but when i add it the app shows empty page and on the console i see :'Uncaught TypeError: Cannot call method 'substring' of undefined '
It depends on what version you're using. In 4.2.0, the CheckColumn was moved into the core library. If you're using an earlier version (which it seems like you are), then the CheckColumn is just an extension, so you'd need to include it from the examples/ux folder.
In 4.2.0 you would do it like this.
xtype: 'gridpanel',
flex: 2,
autoScroll: true,
title: 'title',
store: 'OutgoingDataStore',
selModel: Ext.create('Ext.selection.CheckboxModel'), // This will add check column
columns: [
{
xtype: 'gridcolumn',
align: 'right',
dataIndex: 'calls_m',
text: 'Calls Monthly'
}
...
How do I go about making the gridpanel/table in extjs auto expand based on the window size?
Thanks
I added layout :'fit'.. i didn't change much
var listView = Ext.create('Ext.grid.Panel', {
store: mystore,
multiSelect: true,
title:'Notifications for ' + jsonServiceId + ' <i>(0 items selected)</i>',
viewConfig: {
emptyText: 'No images to display'
},
//reserveScrollOffset: true,
renderTo: containerEl,
layout:'fit',
columns: [{
text: 'Sell',
flex: 10,
dataIndex: 'Sell',
renderer: function(value, metaData, record) {
// alert(record.get('Sell'));
}
},{
text: 'Class',
flex: 10,
dataIndex: 'ClassName'
},
{
text: 'Last Changed',
flex: 20,
dataIndex: 'LastChangedAt',
xtype: 'datecolumn',
format: 'd-M-Y h:i a'
}
]
});
It's a layout thing. You should add layout: 'fit' to the parent container. It will make your grid expand to the size of parent container.
Just as here in example:
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout-browser/layout-browser.html