I need to show/hide columns of a grid on the fly, but it seems that ExtJs 4 has no implemented method for that.
In previous versions I should use columnModel, what doesn't exist anymore.
Just get grid.columns[index] and hide() or show() doesn't affect the grid.
Use grid.columnManaget.getColumns()[index].hide() can really hide the column, but it cannot be shown again (as getColumns() does not return that column after that).
The following should work:
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
id: 'simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
dockedItems:[{
xtype:'button',
handler: function() {
if(Ext.getCmp('simpsons').columns[0].isVisible())
Ext.getCmp('simpsons').columns[0].setVisible(false);
else
Ext.getCmp('simpsons').columns[0].setVisible(true);
}
}]
});
The following should work:
Ext.getCmp('simpsons').down('[dataIndex=ColumnName]').setVisible(false);
Get access to "your grid" and then
yourGrid.columnManager.getColumns()[index].setVisible(false);
If required do --
EXT 4
parent.doLayout();
EXT 6
parent.updateLayout();
Ext.getCmp('gridId').columnManager.getColumns()[index].hide();
Ext.getCmp('gridId').doLayout();
This works for me
Related
Appsdk2 rc2 seems to be ignoring the width parameter on columnCfgs for rallygrids.
For example:
xtype: 'rallygrid',
columnCfgs: [
{dataIndex: 'ValueScore', width: 40, text:'Value'}
]
This renders with a 40 pixel width in rc1, but does not in rc2. Is this a bug, or has the parameter changed? Is there a solution for this?
This is a bug in the 2.0rc2 release. For now it can be worked around by including flex: null in your column config to override what the grid is doing incorrectly:
xtype: 'rallygrid',
columnCfgs: [
{dataIndex: 'ValueScore', width: 40, text:'Value', flex: null}
]
A defect has been submitted and this should be fixed for the next release.
It looks like the bug does not affect grids based on a custom store. Here is an rc2 app (you may see the full code here) with Rally.data.custom.Store where width specified in the clumnCfgs has an expected effect:
_createTestSetGrid: function(testsets) {
var testSetStore = Ext.create('Rally.data.custom.Store', {
data: testsets,
pageSize: 100,
});
if (!this.down('#testsetgrid')) {
this.grid = this.add({
xtype: 'rallygrid',
itemId: 'testsetgrid',
store: testSetStore,
columnCfgs: [
{
text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Test Case Count', dataIndex: 'TestCaseCount',
},
{
text: 'Test Case Status', dataIndex: 'TestCaseStatus', width: 200, //width: 40
},
{
text: 'TestCases', dataIndex: 'TestCases',
renderer: function(value) {
var html = [];
Ext.Array.each(value, function(testcase){
html.push('' + testcase.FormattedID + '')
});
return html.join(', ');
}
}
]
});
}else{
this.grid.reconfigure(testSetStore);
}
}
With width set to 200 TestCasesStatus column looks like this:
and with width set to 40 like this:
There's Ext grid panel with checkbox column.
The purpose is to handle checkbox cell click (which cell clicked & value)
Ext.define('App.Model.Users', {
extend: 'Ext.data.Model',
fields: ['Id', 'Login', 'Fio', 'Organization', 'Locked']
});
var usrstore = Ext.create('App.Data.Lstore', {
model: 'App.Model.Users',
autoLoad: false,
proxy: {
type: 'ajax',
url: '/Admin/GetUsers'
}
});
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: { edit: function(editor, e){console.log('gf')} }
});
var usrgrid = Ext.create('Ext.grid.Panel', {
height: 600,
store: usrstore,
columns: [
Ext.create('Ext.grid.RowNumberer'),
{ dataIndex: 'Login', width: 300, text: 'Логин' },
{ dataIndex: 'Fio', flex: 1, width: 250, text: 'Фамилия И. О.' },
{ dataIndex: 'Organization', flex: 2, width: 200, text: 'Организация' },
{ dataIndex: 'Locked', width: 120, text: 'Блокировка', xtype: 'checkcolumn', align: 'center'}]
});
But no edit event from plugin comes..
What config grid plugin need to start work?
You need to set your 'cellEditing' in the plugins:[] config. You might also want to specify and editor (text,date,number, etc) on each column that you want to edit. See sencha examples for this stuff. Also checkbox is a Row selector not a cell selector - just something to keep in mind.
Using 4.0.6 I have a gridpanel with an actioncolumn that has two items, a delete button and and view button. The delete button is disabled but there are some circumstances where it needs to be enabled (if a user is an admin). So I am trying to enable it in code.
Here's the view:
Ext.define('PP.view.person.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.personlist',
title: 'Current people',
store: 'People',
columnLines: true,
initComponent: function () {
this.columns = [
{ header: 'Id', dataIndex: 'personId', flex: 1, sortable: true },
{ header: 'Title', dataIndex: 'title', flex: 1 },
{ header: 'Name', dataIndex: 'name', flex: 1},
{ xtype:'actioncolumn',
items:[
{icon:'cross.gif',disabled:true,handler:function(){alert('delete pressed');}},
{icon:'tick.gif',handler:function(){alert('view pressed');}}
]
}
];
this.callParent(arguments);
}
});
and the controller function I'm using to enable:
enableDel: function () {
var view = Ext.widget('personlist');
view.down('actioncolumn').enableAction(0);
}
but I am getting an error inside the extjs enableAction function on the line that starts
me.up('tablepanel').el.select
the el is undefined. The column doesn't get enabled either. Can anyone tell me what I'm doing wrong or post an example that works? If I specify
renderTo: Ext.getBody()
in the view I don't get the error any more but the column still doesn't enable. So I think it must be something to do with rendering but I'm so new to this I haven't a clue where to start.
Generally when el is undefined it means that you are attempting to access it before the component is rendered. When does your enableDel function get called? You might want to try putting it in an afterrender listener.
I have following code that I creating a grid
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{ name: 'company' },
{ name: 'price', type: 'float' },
{ name: 'change', type: 'float' },
{ name: 'pctChange', type: 'float' }
],
data: myData
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
renderTo: 'divGrid',
columns: [
{ text: 'Company',
flex: 1,
dataIndex: 'company'
},
{ text: 'Price',
flex: 1,
dataIndex: 'price'
},
{ text: 'Change',
flex: 1,
dataIndex: 'change'
},
{ text: '% Change',
flex: 1,
dataIndex: 'pctChange'
}],
height: 250,
width: '100%',
title: 'Array Grid',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
});
I want to change color and width of border grid. How can I do it ?
Quick and dirty you can set this config on any grid or really any component that draws a box:
style: 'border: solid Red 2px'
The more correct way is to create a css rule and set cls:'myRedBorderRule' in the config.
EDIT:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
renderTo: 'divGrid',
style: 'border: solid Red 2px',
.....
ExtJS Grid Panel class provides you with parameters to define your custom styles. You can make use of the following class parameters :
border
bodyStyle
bodyCls
bodyBorder
bodyPadding
You can use combination of these parameters to manipulate the grid's border and body styles. Refer to the docs for details of these parameters.
Add below css to remove border
.x-panel-body .x-grid-item-container .x-grid-item {
border: none;
}
I'm trying to create a detailed line item form in my application. I created a subclass of Ext.Panel with three form controls in it. Then I started adding that control to my viewable Panel. Only one ever shows up. The others are set to a height of 0. Here's the code:
app.views.Forms.materialsLineItem = Ext.extend(Ext.Panel, {
layout: {
type: 'hbox',
pack: 'center'
},
items: [
new Ext.form.Spinner({
width: 150
}),
new Ext.form.Text({
placeHolder: 'Description',
width: 400
}),
new Ext.form.Text({
placeHolder: 'Price',
width: 150
})
]
});
app.views.Forms.Materials = new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
new app.views.Forms.materialsLineItem(),
new app.views.Forms.materialsLineItem(),
new app.views.Forms.materialsLineItem()
]
});
Hmm it works if you declare your form components using object literals like so:
app.views.Forms.materialsLineItem = Ext.extend(Ext.Panel, {
layout: {
type: 'hbox',
pack: 'center'
},
items: [{
xtype: 'spinnerfield',
width: 150
}, {
xtype: 'textfield',
placeHolder: 'Description',
width: 400
}, {
xtype: 'textfield',
placeHolder: 'Price',
width: 150
}]
});
My guess is that your way only created the fields once and sencha doesn't let you add the same component to multiple containers, so the first two panels didn't actually have anything in them.
If you look at the elements in Chrome's JavaScript console you should see the first two panels are just empty divs.