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'
}
...
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 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.
I have an issue with gridfilters plugin
« Filters » option is visible but the sub-menu for Filters option is not visible
I have this warning in console
"Using showBy on a non-floating component"
The grid definition is :
xtype: 'grid',
store: store,
iconCls: 'icon-grid',
frame: true,
width: 700,
height: 500,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // mismo que el store GridPanel
dock: 'bottom',
displayInfo: true
}],
plugins: ['gridfilters'],
columns: [
{header: 'Company',dataIndex: 'company', flex: 1,
filter:
{
type: 'string',
itemDefaults: {
emptyText: 'Search for...'
}
},
editor: {
xtype: 'textfield'
}
},
{header: 'Price',dataIndex: 'price', flex: 1,
filter: 'number'
},
{header: 'Change',dataIndex: 'change', flex: 1},
{header: 'Last change',dataIndex: 'lastChange',xtype: 'datecolumn', format:'d/m/Y', flex: 1}
]
Can you help me about this point?
Try using the features property instead of the plugins one, as follows:
features: {
ftype: 'filters',
encode: true,
local: false
}
I have tried just about everything to give this grid expandable rows. Here's my code:
Ext.define('AM.view.metadata.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.metadatalist',
title: '<center>Results</center>',
store: 'Metadata',
requires: ['Ext.*'],
collapsible: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{ xtype: 'tbtext', text: 'Loading...', itemId: 'recordNumberItem' },
'->',
{ text: 'Print', itemId: 'print' },
'-',
{ text: 'Export', itemId: 'export' }
]
}],
initComponent: function() {
this.columns = [
{header: 'Technical Name', dataIndex: 'TECH_NAME', flex: 4, tdCls: 'grid_cell'},
{header: 'KBE ID', dataIndex: 'KBE_ID', flex: 2, tdCls: 'grid_cell'},
{header: 'KBE Name', dataIndex: 'KBE_NAME', flex: 3, tdCls: 'grid_cell'},
{header: 'View Name', dataIndex: 'VIEW_NAME', flex: 4, tdCls: 'grid_cell'},
{header: 'Database/Schema', dataIndex: 'DB_SCHEMA', flex: 3, tdCls: 'grid_cell'},
{header: 'Privacy', dataIndex: 'PRIVACY_INDICATOR', flex: 3, tdCls: 'grid_cell'}
];
this.callParent(arguments); //Calls the parent method of the current method in order to override
}
});
And here's where I instantiate it in my app.js
{ xtype: 'metadatalist', padding: '5px 5px 5px 5px', height: 430, width: '100%', hidden: true}
I have tried the rowexpander plugin, but I'm not sure if I put it in the right place. If anyone sees a red flag or can help me out with how to implement this rowexpander, I would greatly appreciate it. I've posted several times about this, and so far have received little to no help. I'm using Ext JS 4.1.1
Thank you!
You need to have the rowexpander plugin in the grid configuration and you need to create an XTemplate for the information presented when the row is expanded. Did you try and follow this example?
http://docs.sencha.com/extjs/4.2.1/#!/example/grid/grid-plugins.html
As it turned out, I needed to set my Loader path so that it could find RowExpander.js. Here's what I did:
Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux'); // change this for your environment
Ext.require([ 'Ext.ux.RowExpander' ]);
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