Я уверен, что где-то что-то упустил, так как я новичок в использовании Dojo Toolkit и ищу более опытные руки, чтобы просветить меня. Я также новичок в stackoverflow, поэтому, пожалуйста, потерпите меня, когда я изучаю тонкости участия в этом форуме и правильного оформления и форматирования ...
Я пытаюсь загрузить в dojox.layout.ContentPanes внутри stackContainer
html-контент и связанные модули Dojo и javascript для поддержки DataGrid и встреч с переменным успехом. Использование декларативного подхода, кажется, работает достаточно хорошо, но попытка использовать программный подход с использованием xhrGet для загрузки ContentPanes в stackContainer представляет некоторые проблемы. Я предпочитаю программный метод, а не декларативный, поскольку, по моему мнению, он будет более модульным и обслуживаемым. Так как я сталкиваюсь с проблемами, я должен думать, что должен быть другой способ, который работает и достигнет того, что я пытаюсь сделать, поддерживая модульность и поддержку html и javascript. Я понимаю, что есть намного больше для установления проектных ограничений, но это нужно сделать для начала.
Я приведу некоторые выдержки из кода ниже и в дальнейшем, но общий дизайн заключается в настройке одной веб-страницы с использованием контейнера макетов границ, который, в свою очередь, содержит titlePane и stackContainer с contentPanes. Используя ссылки, бегущие по левой стороне в качестве навигационной панели, я перехватил соответствующие HTML-страницы, которые, в свою очередь, отображаются внутри соответствующих контентных панелей и впоследствии отображаются при выборе соответствующей ссылки одним щелчком мыши. Это хорошо работает в точку. Декларативные таблицы DataGrid, встроенные непосредственно в contentPane, похоже, отображаются правильно с данными, заполняющими правильно, заполняющими Grid, и выбранным форматированием стиля Dojo, таким как кларо или тундра и стили CSS, которые работают должным образом. Однако, если я пытаюсь отобразить DataGrid программным способом, загрузив полностью через xhrGet в contentPane как отдельную html-страницу, отображается содержимое html-страницы, но кажется, что модули Javascript или Dojo не активированы, а DataGrid частично отображается с его заголовками, но ни один из них не отображается данных заполняется. Форматирование CSS, кажется, работает в ограниченной степени, но необходимы дополнительные исследования и оценки, чтобы понять, сколько.
Так что на данный момент программный подход, который я использую, кажется, работает частично, и я не смог заставить DataGrid заполняться или заставить кнопку работать правильно. Может быть, это просто ограничение Dojo, но я бы подумал, что это фундаментальный вариант использования, который большинство используют в качестве своего подхода для организации и модульной реализации своих веб-сайтов. Надеемся, что некоторые более опытные пользователи / разработчики Dojo Toolkit могут рассказать мне о лучшем способе или о том, что я пропустил. Как было сказано ранее, я рад предоставить дополнительные фрагменты кода для ясности. Вот резюме в общих чертах формы вопросов:
Вот что у меня работает:
1. Использование dijit.TitlePane У меня есть базовая структура меню ссылок работает
вниз по левой стороне, которые обеспечивают навигацию между ContentPanes внутри
StackContainer. Используя HREF, я могу открыть страницу внутри
ContentPane без проблем. В целом это работает очень хорошо.
2. На панели содержимого могут отображаться страницы в формате HTML.
3. Используя декларативный подход, статически сгенерированные DataGrids, размещенные непосредственно внутри обозначенных contentPanes в stackContainer, визуализируют и правильно заполняют данными, поскольку на них могут ссылаться javascript главной страницы вызова с этой страницы и HTML-файл, в котором находятся DataGrids. тот же самый.
4. Отдельные html-страницы, содержащие модули javascript и dojo, которые можно отображать в автономном режиме, правильно отображать и заполнять DataGrid.
Вот что НЕ работает:
1. Javascript, связанный с загруженными HTML-страницами, не выполняется.2. DataGrid не заполняется данными, если HTML-страница загружена в контент
страница с xhrGet.
3. Программная генерация DataGrids в ContentPanes вообще не отображается.
Некоторые вещи, которые я пытался заставить запускать удаленный javascript и dojo DataGrid для рендеринга:
1. настроить AttachEvent для dojox.layout.ContentPane с контейнером и
выполнить сценарии, установленные на true на удаленной странице.
2. использование подключения
3. использование grid.resize grid.restart
4. использование stackcontainer.resize
5. xhrPost
6. dojo.parser.parse
7. указание использования dojox.layout.ContentPane вместо dijit.layout.ContentPane
Я не говорю, что я реализовал их правильно, только потому, что я попытался, поэтому, если один из этих вариантов является способом правильно настроить то, что я пытаюсь сделать, тогда любые подробные шаги и ключевые моменты очень признателен.
Некоторые связанные вопросы:
1. Каков наилучший подход к отслеживанию местоположения идентификатора виджета, если
это называется отдельной HTML-страницей, которая отображается внутри contentPane?
2. Является ли setContent методом, который можно использовать для обновления DataGrid?
Вот некоторые фрагменты кода для рассмотрения ... (Я заранее извиняюсь, если форматирование трудно прочитать или отсутствует, я не уверен, будет ли HTML загружаться правильно, поэтому можете попробовать в последующем посте):
Некоторый Javascript, который выполняет загрузку страницы (HTML ниже):
function loadContent(targetID) {
var targetElement = targetID + ".html";
dojo.xhrGet({
url: targetElement,
handleAs: "text",
handle: function(response){
var node = dojo.byId(targetID).innerHTML;
dojo.byId(targetID).innerHTML = response;
}
});
var selectedPane = dijit.byId("contentStack").selectChild(targetID);
function trackLinkClick(targetID) {
dojo.query("li *").onclick(function(evt){
dojo.stopEvent(evt);
var grid_box;
var targetID = evt.target.getAttribute("href").split("#")[1];
loadContent(targetID);
}
);
return targetID;
}
HTML:
`<body class="claro">`
`<div id="preloader"></div>`
`<div id="main" class="tpsMain dijitContainer dijitLayoutContainer"`
`dojoattachpoint="containerNode" dir="ltr" widgetid="main">`
`<div id="dijit_layout_BorderContainer_0" class="dijitContainer`
`dijitBorderContainerNoGutter" lang="" gutters="true"`
`dojotype="dijit.layout.BorderContainer" dir="ltr"`
`widgetid="dijit_layout_BorderContainer_0" style="padding: 0px; left: 0px; top 0px; width: 1450px; height: 800px;">`
`<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">Title</div>`
`<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" title= "Content Panel" data-dojo-props="region:'center'">`
`<div id= "contentStack" data-dojo-type="dijit.layout.StackContainer" data-dojo-id="contentStack" region= "center">`
`<div data-dojo-type="dijit.layout.ContentPane" id= "content_pane_1">First Set of Content</div>`
`<div data-dojo-type="dijit.layout.ContentPane" id= "content_pane_2">
Второй набор содержимого
...
...
...
`
....
...
Я показываю только две contentPanes, но в фактически работающем коде у меня есть contentPanes для столько же отдельных загружаемых страниц. Отображение контента и навигация к каждому соответствующему контент-панели работает
Надеюсь, более опытный мастер додзё сможет помочь мне найти недостатки или придумать лучшую схему, которая поможет мне достичь того, что я намереваюсь сделать. Надеюсь, я предоставил достаточно подробностей и объяснений.
С уважением ко всем