I am developing a module for attendance of the employee. I am using accordion which will show the name of the year as their title. And in every accordion details I have put a grid which contains the name of the months. I can get the grid value in controller but can’t get the name of the accordion header that’s why I am not being able to show the desired result in grid. Can anyone please help me on this to get the heading of accordion title? My accordion details is given below :
Ext.define('Ext4Example.view.attendence.Timeperiod' ,{
extend: 'Ext.form.Panel',
alias : 'widget.timeperiod',
id: 'timeperiod',
region: 'west',
border: false,
width: 150,
height:400,
split: true,
defaults: {
// applied to each contained panel
//bodyStyle: 'padding:15px'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: true,
animate: true,
activeOnTop: true
},
initComponent: function() {
var today = new Date();
var yyyy = today.getFullYear();
this.items = [{
title: 'Year '+yyyy,
items: [{
xtype: 'months'
}]
//html: 'Panel content!'
},{
title: 'Year '+(yyyy-1),
items: [{
xtype: 'months'
}]
//html: 'Panel content!'
},{
title: 'Year '+(yyyy-2),
items: [{
xtype: 'months'
}]
//html: 'Panel content!'
},{
title: 'Year '+(yyyy-3),
items: [{
xtype: 'months'
}]
//html: 'Panel content!'
},{
title: 'Year '+(yyyy-4),
items: [{
xtype: 'months'
}]
//html: 'Panel content!'
}];
this.callParent(arguments);
}
});
my months grid is given below :
Ext.define('Ext4Example.view.attendence.Months' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.months',
border: false,
viewConfig: {
stripeRows: true
},
store: 'Months',
hideHeaders: true,
initComponent: function() {
this.store = 'Months';
this.width = 150;
this.columns = [
{
dataIndex: 'months',
flex:1
}
];
this.callParent(arguments);
}
});
my datagrid is given below :
Ext.define('Ext4Example.view.attendence.Datagrid' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.datagrid',
layout: 'fit',
viewConfig: {
stripeRows: true
},
hideHeaders: false,
initComponent: function() {
this.store = 'Attendences';
//this.width = 400;
this.columns = [
{
text: 'Date',
dataIndex: 'id'
},
{
text: 'In-Time',
dataIndex: 'intime'
},
{
text: 'Out-Time',
dataIndex: 'outtime'
}
];
this.callParent(arguments);
}
});
my main window where all are added together is given below :
Ext.define('Ext4Example.view.attendence.Attendencewindow' ,{
extend: 'Ext.window.Window',
alias: 'widget.attendencewindow',
title: 'Attendence Information',
layout: 'fit',
modal: true,
autoShow: true,
resizable: false,
//maximizable: true,
collapsible: true,
initComponent: function () {
this.items = [
{
xtype: 'form',
width: 550,
bodyPadding: '8 0 8 0',
border:false,
layout: {
type: 'hbox',
align: 'stretch'
},
items:[{
xtype: 'timeperiod'
},{
xtype: 'datagrid'
}]
}
];
this.buttons = [
{
xtype: 'button',
text: 'New',
iconCls: 'new',
action : 'clear'
},{
xtype: 'button',
text: 'Save',
iconCls: 'save',
//iconAlign: 'top',
action : 'save'
},{
xtype: 'button',
text: 'Print',
iconCls: 'print',
action: 'close'
//scope: this
}
];
this.callParent(arguments);
}
});
my controller is given below :
Ext.define('Ext4Example.controller.Attendences', {
extend: 'Ext.app.Controller',
stores: [
'Attendences','Months'
],
models: [
'Attendence','Month'
],
views: [
'attendence.Timeperiod','attendence.Details','attendence.Attendencewindow','attendence.Editattendence','attendence.Months','attendence.Datagrid'
],
refs: [{
ref: 'stockaddForm',
selector: 'form'
}],
init: function () {
this.control({
'datagrid': {
itemdblclick: this.editUser
},
'months': {
itemclick: this.show
},
'attendencewindow button[action=save]': {
click: this.save
}
});
},
editUser: function(grid, record){
var view = Ext.widget('editattendence');
view.down('form').loadRecord(record);
},
show: function(grid, record) {
var hi = grid.ownerCt.title;
alert(hi);
var a = Ext.getCmp('timeperiod');
var store = this.getAttendencesStore();
store.load({
filters: [
{property:'month', value:record.data.value},
{property:'year', value:2012}
]
});
},
save: function(){
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear(); //+1
Ext.Msg.alert("Today is - ",dd+" - "+mm+" - "+yyyy);
}
});
Now can u tell me please how can i get the title of accordion like year 2012 or year 2011 I can get the months name by record.data.value but I can not take the title of accordion
please help
Lets say you have registered yourself to the itemclick event of the grid then will get the the grid itself as first argument within the callback. You now that the grid is directly nested within your accordion so you can simply refer to the ownerCt.
You should also take a look at
up()ansdown()which both required a component query selector. But in your case this seems the best way to do it.Edit
here is the modified
timeperiodAnd the modified Controller