I want dynamically load columns for grid from loaded store.
I used code like in sencha fiddle https://fiddle.sencha.com/#fiddle/lc5&view/editor, it work, but in modern version it dose not work. Because modern version not have reconfigure method.
How can I solve that problem.
Add a comment
|
2 Answers
Based on your example, the solution is as follows:
var grid = Ext.create({
xtype: 'grid',
fullscreen: true,
minHeight: 150,
renderTo: document.body,
plugins: {
gridsummaryrow: true
},
store: {
fields: ['student', 'mark'],
idProperty: 'student',
data: [{
"student": 'Student 1',
"mark": 84
}, {
"student": 'Student 2',
"mark": 72
}, {
"student": 'Student 3',
"mark": 96
}, {
"student": 'Student 4',
"mark": 68
}],
proxy: {
type: 'memory'
}
},
columns: [{
dataIndex: 'student',
text: 'Name'
}]
});
grid.getStore().load();
grid.setColumns([{
width: 200,
dataIndex: 'student',
text: 'Name',
summaryType: 'count',
summaryRenderer: function(value){
return Ext.String.format('Number of students: {0}', value);
}
}, {
"dataIndex": 'mark',
"text": 'Mark',
"summaryType": 'average'
}]);
the most important
You must define a column on the grid columns, even though it will be changed at a future time on your grid.
I removed the dependency from your students.json sample file and put the data into an in-memory store to facilitate the demonstration here.
In modern version, you will use setColumns method.
Working Sample on fiddle.
7 Comments
Andriy Yushko
Thank you it work, but I want load columns from store
Daniel da Cunha Bueno
You can do this in the
callback success from Ext.Ajax.request call in your data source. Do the load setColumns with the metadata of the columns. And then load the store with the loadData method.Andriy Yushko
Ok I added
Ext.getCmp('surveyAnswersGrid').setColumns(meta.columns); and it work, but raw with data not displayed. I thing need add fields for store. How can I do it?Daniel da Cunha Bueno
calling something lihe this
Ext.getCmp('surveyAnswersGrid').getStore().loadData(meta.data,false)Andriy Yushko
Uncaught TypeError: Cannot read property 'length' of undefined. My data look like this: joxi.ru/p27BjwVTokgGdm
|
Another option I did is to bind the columns after populating them in the controller.
Sample code:
{
xtype: 'gridpanel',
id: 'user-grid',
cls: 'user-grid',
width: '100%',
scrollable: false,
bind: {
store: '{userStore}',
columns: '{columns}'
}
}
In the controller I populated the columns this way:
setUserGridColumns: function () {
var fields = ['title', 'Surname', 'Profession', 'Age', 'randomValue'];// this can come from server
var columns = [];
fields.forEach(element => {
var column = {
xtype: 'gridcolumn',
cls: 'content-column',
dataIndex: element,
text: element,
flex: 1,
sortable: false,
align: 'center',
style: 'border-width:0px !important; margin-bottom:15px'
}
columns.push(column);
});
this.getViewModel().set('columns', columns);
}
1 Comment
David
How
setUserGridColumns method is associated with the grid. In grid defination what i have to write to get setUserGridColumns method.