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

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

6 голосов
/ 20 декабря 2010

У меня есть такая панель вкладок: 

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]
});

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

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

Ответы [ 2 ]

6 голосов
/ 20 декабря 2010

При создании 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)'
});

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

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

0 голосов
/ 20 декабря 2010

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

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

установит новый заголовок

...