Как я могу обновить содержимое вкладки в TabPanel в ExtJS?

у меня есть панель вкладок, как это:

var tab1 = {
    id: 'section1',
    title: 'First Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
}

var tab2 = {
    id: 'section2',
    title: 'Second Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
}

var tab3 = {
    id: 'section3',
    title: 'Third Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
}

var modules_info_panel = new Ext.TabPanel({
    region: 'center',
    activeTab: 0,
    border: false,
    defaults:{autoScroll:true},
    items:[tab1, tab2, tab3]
});

затем после создания этой tabpanel я хотел бы динамически изменять содержимое вкладок, но ни одна из них не работает:

tab1.html = 'new html'; // no effect
tab1.title = 'new title'; // no effect
tab1.update('new text'); // error: tab1.update is not a function
viewport.doLayout(); // no effect

так как я хочу загрузить содержимое каждой из вкладок через AJAX Я не хочу добавить вкладки динамически как предложено в данном вопросе но хочу, чтобы вкладки, чтобы быть виден с первой загрузки и содержимое каждой вкладки, чтобы быть изменить динамически при нажатии.

как я могу изменить содержимое вкладки после ее создания?

обновление:

спасибо @Chau за то, что поймал мой надзор: когда я создаю вкладки с Ext.Panel вместо простых объектных литералов javascript, тогда он работает:

var tab1 = new Ext.Panel ({
    id: 'section1',
    title: 'First Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
});

var tab2 = new Ext.Panel ({
    id: 'section2',
    title: 'Second Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
});

var tab3 = new Ext.Panel ({
    id: 'section3',
    title: 'Third Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
});

var modules_info_panel = new Ext.TabPanel({
    region: 'center',
    activeTab: 0,
    border: false,
    defaults:{autoScroll:true},
    items:[tab1, tab2, tab3]
});

tab1.update('new content with update'); //works
6
extjs javascript tabpanel

2 ответов

при создании tab1 это объект с 4 свойствами. При добавлении tab1 как элемент на панели вкладок инициализатор панелей вкладок создаст вкладку на основе свойств из tab1. Ваш tab1 по-прежнему является объектом с 4 свойствами, а не ссылкой на вкладку, созданную вашей панелью вкладок.

Я бы создал panel С вашими 4 свойствами и добавьте эту панель в качестве дочернего элемента на панели вкладок.

var tab1 = new Ext.Panel({
    id: 'section1',
    title: 'First Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
});

затем панель вкладок следует использовать вашу панель вместо создания собственной панели.

Я не тестировал этот код, но надеюсь, что он вам поможет:)

6

modules_info_panel.get(0) вернет первый объект tab (по умолчанию Ext.Экземпляр панели) Итак:

 modules_info_panel.get(0).setTitle('new title');

будет установлен новый заголовок

0