Question

当我使用按钮点击在sencha触摸Extjs中显示另一个视图时，视图无法正确显示，如果有人能帮助我，我将非常感激，我已经为这个问题留了一天。

我的按钮代码（在工具栏上）：

xtype: 'toolbar',
docked: 'top',
items:[{
xtype: 'button',
ui: 'round',
text: 'Calendar',
handler:function(){
alert('You clicked the button!');
showView('CalendarView', 'Medgen.view.CalendarView');
}
}]

我的日历视图代码，在开头定义日期和星期数据存储：

Ext.define('DayDataModel', {
extend: 'Ext.data.Model',
config: {
    fields: ['TIME', 'PATIENT_NAME']
}
});

Ext.create('Ext.data.Store', {
id: 'DayDataStore',
model: 'DayDataModel',
data: [
    {TIME: '9am', office: 'Jason'},
    {TIME: '10am', office: 'Peter'},
    {TIME: '11am', office: 'Vicky'}
]
});
Ext.define('WeekDataModel', {
extend: 'Ext.data.Model',
config: {
fields: ['TIME',    'SUNDAY','MONDAY','TUESDAY','WEDNESDAY','THURSDAY','FRIDAY','SATURDAY']
}
});
Ext.create('Ext.data.Store', {
id: 'WeekDataStore',
model: 'WeekDataModel',
data: [
    {TIME: '9am', SUNDAY: 'Jason',MONDAY:'Jason',TUESDAY:'Jason',WEDNESDAY:'Jason',THURSDAY:'Jason',FRIDAY:'Jason',SATURDAY:'Jason'},
{TIME: '10am', SUNDAY: 'Peter',MONDAY:'Peter',TUESDAY:'Peter',WEDNESDAY:'Peter',THURSDAY:'Peter',FRIDAY:'Peter',SATURDAY:'Peter'},
   {TIME: '11am', SUNDAY: 'Vicky',MONDAY:'Vicky',TUESDAY:'Vicky',WEDNESDAY:'Vicky',THURSDAY:'Vicky',FRIDAY:'Vicky',SATURDAY:'Vicky'}
]
});


Ext.define('Medgen.view.CalendarView', {
extend: 'Ext.tab.Panel',
id: 'CalendarView',
    config: {
    activeTab: 0,
    tabBar: {
        layout: {
            pack : 'center',
            align: 'center'
        },
        docked: 'buttom'
    },
    defaults: {
        scrollable: true
    }
},

items:[{
    title: 'Today',  
    iconCls: 'search',      
    layout: 'fit',      
    scrollable: false,
    items:[{
        xtype: 'lable',
        html: '<table width="100%"><th>Time</th><th>Patient</th></table>'
        },
        {
        xtype: 'list',
        id: 'DayList',
        store: 'DayDataStore',
        itemTpl:Ext.create('Ext.XTemplate',
        '<table width="100%">',
        '<tr>',
        '<td>{TIME}</td>',
        '</tr>',
        '<tr>',
        '<td>{PATIENT_NAME}</td>',
        '</tr>',
        '</table>'
    )}]
},{
    title: 'Week', 
    iconCls: 'search',
    layout: 'fit',      
    scrollable: false,
    items:[{
        xtype: 'lable',
        html: '<table width="100%"><th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th></table>'
        },
        {
        xtype: 'list',
        id: 'WeeklyList',
        store: 'WeekDataStore',
        itemTpl: Ext.create('Ext.XTemplate',
        '<table width="100%">',
        '<tr>',
        '<td>{SUNDAY}</td>',
        '</tr>',
        '<tr>',
        '<td>{MONDAY}</td>',
        '</tr>',
        '<tr>',
        '<td>{TUESDAY}</td>',
        '</tr>',
        '<tr>',
        '<td>{WEDNESDAY}</td>',
        '</tr>',
        '<tr>',
        '<td>{THURSDAY}</td>',
        '</tr>',
        '<tr>',
        '<td>{FRIDAY}</td>',
        '</tr>',
        '<tr>',
        '<td>{SATURDAY}</td>',
        '</tr>',
        '</table>'
        )
        }]

}]

}）

我的showview代码：

 function showView(viewid, view)
{

Ext.Viewport.getLayout().setAnimation(null);

if(Ext.getCmp(viewid))
{
    //alert('works');
    Ext.Viewport.setActiveItem(Ext.getCmp(viewid));
}
else 
{
    var sample = Ext.create(view);      
    Ext.Viewport.setActiveItem(sample);
}
}

我是extjs的新手，非常感谢你的帮助！

Answer 1

将showView功能更改为：

showView: function() {
    console.log('Button Clicked');
    if(!this.newView) {
        newView = Ext.create('Medgen.view.CalendarView');
    }
    Ext.Viewport.setActiveItem(this.newView);
}

Ext.Viewport.setActiveItem不起作用

1 个答案: