Я уже знаю, что ExtJs - это фреймворк для построения RIA, и он плохо вписывается в определенный макет страницы.
Мои приложения только на одной странице, где основной контент является динамическим (из вызова Ajax)
<html>
<head> some stuff</head>
<body>
<div class = “header”> some stuff </div>
<div class=”wrap”>
<div class=”mainContent” id=”main”></div>
<div class=”sidebar” id=”side”></div>
</body>
</html>
что мне нужно сделать, это собрать содержимое на главной и боковой сторонах.
mainContent может иметь разную внутреннюю разметку в зависимости от того, что мне нужно отобразить
т.е. (Мне нужно отобразить домашнюю страницу, страницу категории и страницу статьи)
// mainContent for home page:
<div class=”mainContent” id=”main”>
<div class=”mainBox” id=”mB”> some stuff and some other divs</div>
<div class=”leftBox” id=”lB”> some stuff and some other divs</div>
<div class=”rightBox” id=”rB”> some stuff and some other divs</div>
</div>
// mainContent for category page:
<div class=”mainContent” id=”main”>
<div class=”categoryHeader” id=”ch”>
some stuff
<div class=”categoryContent” id=”cc”>
some stuff
</div>
</div>
<div class=”subCategoryHeader” id=”sch”>
some stuff
<div class=”subCategoryContent” id=”cc”>
some stuff
</div>
</div>
<div class=”articles” id=”art”>
<div class=”artHeader” id=”aah”>some stuff</div>
<div class=”artContent” id=”aac”>some stuff</div>
</div>
</div>
// mainContent for article page:
<div class=”mainContent” id=”main”>
<div class=”articleHeader” id=”aH”> some stuff</div>
<div class=”articleHeader” id=”aC”> some stuff</div>
<div class=”articleComments” id=”aCC”> some stuff</div>
</div>
Мой подход:
Я использую Ext.Container с макетом карты с тремя элементами, по одному для каждой страницы:
i.e.:
mainContent = new Ext.Container({
// some cfg options
items: [{xtype: ‘homepage’},{xtype:’categories’},{xtype:’articles’}]
})
, где
MyApp.homePage = Ext.extend(Ext.Container, {
onRender: function(ct) {
this.el = ct.createChild({
children: [
{cls: 'mainBox', id:’mB’},
{cls: 'leftBox', id:’lB’},
{cls: 'rightBox', id:’rB’},
]
});
MyApp.homePage.superclass.onRender.apply(this, arguments);
}
});
Ext.reg('‘homepage’', MyApp.homePage);
// same idea for the other xtypes
Вопрос:
Каков наилучший способ создания компонентов подстраниц (mainbox, leftbox, rightbox и т. Д.) С учетом того, что для каждого компонента мне требуется вызов Ajax (т.е. leftBox может быть последними 5 статьями).
Спасибо
P.S.
Я не хочу использовать jQuery или подобные вещи.