Обновление содержимого одного окна по событию в другом окне с помощью ExtJS - PullRequest
1 голос
/ 24 августа 2010

Некоторое время назад я начал изучать библиотеку ExtJS и теперь хотел бы создать следующее:

Есть окно браузера, и оно разделено по вертикали.
Слева находится TreePanel с каталогами и подкаталогами (всего 2 уровня).
Справа будет вывод содержимого выбранного подкаталога.

Я выполнил интерфейсную часть, но я не знаю, как изменить содержимое с правой стороны, когда пользователь нажимает на подкаталог с левой стороны. Я могу сделать запрос с помощью Ext.Ajax.request, но я не знаю, как вызвать обновление содержимого для правой стороны.

Кстати. Как я уже говорил, левая сторона - это TreePanel, а правая - это GripPanel, и они находятся в Viewport с xtype: 'panel', но я не думаю, что это важно для этого вопроса.

Есть предложения?

1 Ответ

1 голос
/ 24 августа 2010

Во-первых, вам нужно зарегистрировать тот факт, что пользователь выбирает узел в древовидной панели, это можно сделать с помощью:

yourtreepanel.getSelectionModel().on('selectionchange', whattodonext);

Где 'yourtreepanel' - это имя вашей древовидной панели (если древовидная панель была назначена переменной, в противном случае используйте Ext.getCmp ('yourtreepanel'). GetSelecti ....), а 'whattodonext' - это имя функции. вызывать, когда пользователь выбирает узел.

Функция 'whattodonext' будет выглядеть следующим образом:

    function whattodonext(){
        node=yourtreepanel.selModel.selNode;
        if(node){
            if(node.isLeaf()){
// this works out what you want to do if the user has selected a valid leaf node


            }else{
// otherwise...put anything you wish to happen here (i.e. if a folder has been selected)

            }

        }   
    }

Следующая часть - обновить панель справа содержимым (если бы оно называлось mycontentpanel). Скажем, этот контент должен быть загружен из mycontent.html, в разделе с

// this works out what you want to do if the user has selected a valid leaf node

Вы бы поставили код:

mycontentpanel.load({
url: 'mycontent.html',
params: {
yourparam1:'param1value',
yourparam2:'param2value'
},
nocache: true,
timeout: 30
});

И это все!

Вы можете использовать параметры params для отправки любых ваших конкретных параметров POST, которые будут определять, какой контент будет обслуживаться.

И не забывайте, если вы столкнетесь с трудностями, попробуйте ссылаться на ваши объекты, используя Ext.getCmp ('objectname') вместо просто 'objectname'.operation ....

Удачи!

...