PDA

View Full Version : create custom class of component



_PASCAL_
12 Aug 2012, 12:45 AM
Hi,

I have a problem with creating a custom class.

I have written this code so far.


Ext.define('tvd.view.SectionView', {
extend: 'Ext.panel.Panel',
alias: 'widget.sectionview',
id: 'SectionView',
layout: 'fit',
border: false,

getSectionParts: function(store, gridID) {

var items = new Array();

store.each(function(record){

var id = record.get('id');

var menu = new Array();

var addButton = Ext.create('Ext.button.Button',{
iconCls: 'addSomething',
id: 'add_' + id,
listeners: {
click: function(button){

var win = button.up('window');
var panel = win.down('panel');

panel.fireEvent('addDialog', button.up('panel'));

}
}
});

var deleteButton = Ext.create('Ext.button.Button',{
iconCls: 'deleteSomething',
id: 'del_' + id,
disabled: true
});

menu.push(addButton);
menu.push(deleteButton);

var selModel = Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
listeners: {
selectionchange: function(model, records) {

deleteButton.setDisabled((model.getSelection().length > 0)?false:true);

}
}
});

items.push({

xtype: 'gridpanel',
id: 'sp_' + id,
rawID: id,
title: record.get('description'),
hideHeaders: true,
selModel: selModel,
collapsed: true,
collapsible: true,
store: record.accountStore,
margin: '5',
columns: [{
xtype: 'gridcolumn',
hideable: false,
dataIndex: 'member',
menuDisabled: true,
sortable: false,
fixed: true,
resizeable: false,
flex: 1
}],

dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: menu

}]

});

});

return {

items: items,

dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Dienst hinzufügen',
iconCls: 'addSection'
}]
}]

}

},

initComponent: function() {

var me = this;
var sectionStore = this.sectionStore;

var items = new Array();
sectionStore.each(function(record){

var starttime = new Date(Date.parse(record.get('starttime')));
var endtime = new Date(Date.parse(record.get('endtime')));

items.push({

title: ' ' + Ext.Date.format(starttime,'H:i') + ' - ' + Ext.Date.format(endtime,'H:i'),
iconCls: 'sectionTab',
closable: true,
border: false,
autoScroll: true,
items: me.getSectionParts(record.partStore, record.get('id'))

});

});

items.push({

title: 'Bemerkung',
iconCls: 'informationTab',
border: false,
layout: 'fit',
closable: true,
bodyPadding: 10,
autoScroll: true,
items: [{
xtype: 'textareafield',
grow: true,
anchor: '100%'
}]

});


Ext.applyIf(me, {

dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Schicht hinzufügen',
iconCls: 'addSection'
}]
}],

items: [{
xtype: 'tabpanel',
layout: 'fit',
border: false,
items: items
}]

});

this.callParent();

}

});



that works great. But I want to place the "getSectionParts" function into a class that I can create a component like this everywhere.

here is my idea:


Ext.define('tvd.components.SectionPartGrid',{

constructor: function(record) {

var me = this;
var id = record.get('id');

var menu = new Array();

var addButton = Ext.create('Ext.button.Button',{
iconCls: 'addSomething',
id: 'add_' + id,
listeners: {
click: function(button){

var win = button.up('window');
var panel = win.down('panel');

panel.fireEvent('addDialog', button.up('panel'));

}
}
});

menu.push(addButton);

var deleteButton = Ext.create('Ext.button.Button',{
iconCls: 'deleteSomething',
id: 'del_' + id,
disabled: true
});

menu.push(deleteButton);

var selModel = Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
listeners: {
selectionchange: function(model, records) {

deleteButton.setDisabled((model.getSelection().length > 0)?false:true);

}
}
});

Ext.applyIf(me, {

xtype: 'gridpanel',
id: 'sp_' + id,
rawID: id,
title: record.get('description'),
hideHeaders: true,
selModel: selModel,
collapsed: true,
collapsible: true,
store: record.accountStore,
margin: '5',
columns: [{
xtype: 'gridcolumn',
hideable: false,
dataIndex: 'member',
menuDisabled: true,
sortable: false,
fixed: true,
resizeable: false,
flex: 1
}],

dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: menu

}]

});

return this;

}

})



but I always get errors like "owner.body" is undefined an something else.

What I am doing wrong?

Pascal

mankz
12 Aug 2012, 6:55 AM
You are missing to call superclass method.


this.callParent(arguments);

Should do it. Also, don't assign id's to classes - just to instances.