Extjs 如何从手风琴中获取每个标题的名称
我正在开发一个员工考勤模块。我使用手风琴，它将显示一年的名称作为他们的标题。在每个手风琴的细节中，我都放了一个网格，其中包含了月份的名称。我可以在controller中获取网格值，但无法获取accordion标头的名称，这就是为什么我无法在网格中显示所需的结果。有谁能帮我弄到手风琴标题的标题吗？我的手风琴详情如下：Extjs 如何从手风琴中获取每个标题的名称,extjs,extjs4,Extjs,Extjs4,我正在开发一个员工考勤模块。我使用手风琴，它将显示一年的名称作为他们的标题。在每个手风琴的细节中，我都放了一个网格，其中包含了月份的名称。我可以在controller中获取网格值，但无法获取accordion标头的名称，这就是为什么我无法在网格中显示所需的结果。有谁能帮我弄到手风琴标题的标题吗？我的手风琴详情如下： Ext.define('Ext4Example.view.attendence.Timeperiod' ,{ extend: 'Ext.form.Panel',
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);
}
});
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);
}
});
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);
}
});
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);
}
});
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);
}
});
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);
}
});
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);
}
});
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);
}
});
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);
}
});
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);
}
});
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);
}
});
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);
}
});
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);
}
});
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);
}
});
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);
}
});
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);
}
});
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);
}
});
请帮助假设您已注册到网格的事件，然后将获取网格本身作为回调中的第一个参数。现在您可以看到网格直接嵌套在手风琴中，因此您只需参考
//lets pretend this is your callback
function(grid,record) {
grid.ownerCt.title; // <- your accordion title
}
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.up('[ident=accordion-panel]');
alert(hi.title);
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);
}
});
你好，sra，非常感谢您的回复。我已经编辑了我的文章以获得完整的视图。我想在控制器中获得手风琴标题，2012年，现在是静态的。请你帮个忙好吗this@SumonBappi编辑完成。我添加了一个私有属性，您现在可以在使用
up（）