PDA

View Full Version : How to do something with region?



Ex_Soft
10 Nov 2010, 11:51 PM
I want to do something with region. For example:


viewport = new Ext.Viewport({
layout: "border",
hideBorders: true,
renderTo: Ext.getBody(),
items: [{
region: "north",
xtype: "toolbar",
height: 27,
items: [ ... ]
}, {
region: "center",
id: "RegionCenter"
}]
});
It's rendered to:


...
<div id="RegionCenter" class=" x-panel x-panel-noborder x-border-panel" style="left: 0px; top: 27px; width: 1280px;">
<div class="x-panel-bwrap" id="ext-gen13">
<div class="x-panel-body x-panel-body-noheader x-panel-body-noborder" id="ext-gen14" style="width: 1280px; height: 545px;">
<table cellspacing="50" cellpadding="0" style="width: 100%;"></table>
</div>
</div>
</div>
...
And


document.getElementById("RegionCenter").firstChild.firstChild.appendChild(CreateSmthHTMLTableElement());
It works. But I think that this isn't correct.

Animal
11 Nov 2010, 12:40 AM
Yeach!

What are you doing?

Stop, back up. What do you WANT to do with the center region?

Ex_Soft
11 Nov 2010, 1:07 AM
What do you WANT to do with the center region?
I want to show smth info, which will be loaded from server.

steffenk
11 Nov 2010, 1:11 AM
Ext.getCmp('RegionCenter').add({html: 'something'});
viewport.doLayout();

Ex_Soft
11 Nov 2010, 1:34 AM
Ext.getCmp('RegionCenter').add({html: 'something'});
viewport.doLayout();
CreateSmthHTMLTableElement() returns HTMLTableElement
(http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425)

steffenk
11 Nov 2010, 1:41 AM
it doesn't matter what you insert, you asked how to do with a region.
btw - you should use ExtJS in Ext app instead using native js. I'm sure whatever you need is much more simple in ExtJS.

Ex_Soft
11 Nov 2010, 1:55 AM
it doesn't matter what you insert


Ext.getCmp("RegionCenter").add({html: CreateSmthHTMLTableElement()});


uncaught exception: [Exception... "Component returned failure code: 0x80004001 (NS_ERROR_NOT_IMPLEMENTED) [nsIDOM3Document.domConfig]" nsresult: "0x80004001 (NS_ERROR_NOT_IMPLEMENTED)" location: "JS frame :: http://localhost:14712/ext/ext-all-debug.js :: createHtml :: line 55" data: no]

Ex_Soft
11 Nov 2010, 5:02 AM
you should use ExtJS in Ext app instead using native js
Well... Is there something like ASP.NET's repeater in ExtJS? I want to create simple table with smth info and show it.

Animal
11 Nov 2010, 6:29 AM
Show data? Like a Grid, so that center would be



{
region: 'center',
xtype: 'grid',
store: myDataStoreOfDataFromServer,
colModel: myColumnModel
}

Ex_Soft
11 Nov 2010, 11:33 AM
Like a Grid
And how to create gridpanel like this table:


var
ActionTable=document.createElement("TABLE");

ActionTable.cellPadding="0";
ActionTable.cellSpacing="50";
ActionTable.style.width="100%";

s.each(function(r) {
var
row,
cell,
span,
anchor;

row=ActionTable.insertRow(-1);
cell=row.insertCell(-1);

span=document.createElement("SPAN");
span.className="DateAction";
span.appendChild(document.createTextNode(r.get("DATE_ACTION").format(ApplicationSettings.DateFormat)));
cell.appendChild(span);
cell.appendChild(document.createTextNode(" "));

span=document.createElement("SPAN");
span.className="ActionName";
span.appendChild(document.createTextNode(r.get("ACTION_NAME")));
cell.appendChild(span);
cell.appendChild(document.createElement("BR"));

span=document.createElement("SPAN");
span.className="Description";
span.innerHTML=Ext.util.Format.ellipsis(r.get("DESCRIPTION").replace(/<.*?>/ig,""),ApplicationSettings.ActionsMaxDescriptionLength);
cell.appendChild(span);
cell.appendChild(document.createTextNode(" "));

anchor=document.createElement("A");
anchor.href="ActionShow.aspx?id="+r.get("ID");
anchor.target="_blank";
anchor.appendChild(document.createTextNode("More >>>"));
cell.appendChild(anchor);
});
?

Animal
11 Nov 2010, 12:37 PM
Do not do things like that! What's the point of including the most powerful client library in the business if you then start cobbling together hunks of DOM manually?

If you have tabular data, load a Store.

Then display it using a GridPanel.

Or a DataView

Ex_Soft
15 Nov 2010, 7:47 AM
DataView
THNX


tpl = new Ext.XTemplate(
"<tpl for=\".\">",
"<div>",
"<span>{[values.DATE_ACTION ? values.DATE_ACTION.format(\"d.m.Y\") : \"\"]}</span> <span>{ACTION_NAME}</span><br/><span>{[fm.ellipsis(values.DESCRIPTION.replace(/<.*?>/ig,\"\"),ApplicationSettings.ActionsMaxDescriptionLength)]}</span> <a href=\"ActionShow.aspx?id={ID}\" target=\"_blank\">More >>></a></div>",
"</tpl>",
"<div class=\"x-clear\"></div>"
)
works fine.