can i create ButtonGroup like this

[pansiom]

item = Ext.create('Ext.ButtonGroup',records[i].get('text'));

args.json:


{
'success': true,
'totalProperty':'3',
'results': [{'id': '1','text':[{
columns: 3,
title: 'AA',
items: [{
text: 'A1',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top'
//cls: 'x-btn-as-arrow'
},{
text: 'A2',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top'

},{
text: 'A3',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top'
}]
}]},{'id': '1','text':[{ columns: 3,
title: 'BB',
items: [{
text: 'B1',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top'
//cls: 'x-btn-as-arrow'
},{
text: 'B2',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top'

},{
text: 'B3',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top'
}]
}]}]
}


Ext.define('args', {
extend: 'Ext.data.Model',
fields: ['id', {name:'text', type: 'buttongroup'}]
});

Ext.create('Ext.data.Store', {
model: 'ImageModel',
proxy: {
type: 'ajax',
url: 'args.json',
reader: {
type: 'json',
root: 'results'
}
},

scope: this
}
});

[skirtle]

Please use [CODE] tags when posting code.

Creating components dynamically using xtype configs loaded from the server is a quite a common technique. In your case you've wrapped it in a model and store, which seems a little unnecessary to me. Why not just use an AJAX request? There may be a good reason for doing it the way you have, in which case I see no reason why your approach couldn't be made to work.

This section seems odd:


{name:'text', type: 'buttongroup'}

Unless you've defined a custom field type elsewhere you should probably get rid of the type: 'buttongroup'.

You might want to tidy up your JSON a little too. Some parsers may let it through but strictly speaking it isn't valid. Your object keys should be double-quoted, as should your strings. JSON also doesn't permit comments.

[pansiom]

sorry, my english is poor.

item = Ext.create('Ext.ButtonGroup',{title : 'menu', columns : 3, items: [{text: 'A',scale: 'large',rowspan: 3, iconCls: 'add',iconAlign: 'top'},{text: 'B',scale: 'large',rowspan: 3,iconCls: 'add',iconAlign: 'top'},{text: 'C',scale: 'large',rowspan: 3, iconCls: 'add',iconAlign: 'top'}]});


{title : 'menu', columns : 3, items: [{text: 'A',scale: 'large',rowspan: 3, iconCls: 'add',iconAlign: 'top'},{text: 'B',scale: 'large',rowspan: 3,iconCls: 'add',iconAlign: 'top'},{text: 'C',scale: 'large',rowspan: 3, iconCls: 'add',iconAlign: 'top'}]}
the ButtonGroup's config is come from Server!