Ashutosh,
The reason what you have done doesn't work is because when Exhibit uses
the lens template to generate lenses for several items, it does not
replicate whatever dynamic settings (event handlers) that Extjs has
installed onto the lens template.
To do this properly, you need to Extjs's addTab on each of the several
generated lenses rather than on the one single lens template. However,
this is tricky as Exhibit does not tell you when it has generated a lens.
Here is how I would try to do it (though I don't know yet if it works).
Specify the lens template as follows
<div ex:role="lens" class="nobelist" style="border-bottom: 4px solid
#930;" width="100%" ex:key-content="value" onmouseover="installTabs(this);">
<div ex:id-subcontent="tabs1-{{value}}">
<div ex:id-subcontent="id1-{{value}}" class="tab-content">
<img class="summary-image" ex:src-content=".url" />
</div>
<div ex:id-subcontent="id2-{{value}}" class="tab-content">
<img ex:src-content=".url2" />
</div>
</div>
</div>
And add this script somewhere
<script>
function installTabs(lensElmt) {
var installed = lensElmt.getAttribute("installed");
if (installed != "true") {
var key = lensElmt.getAttribute("key");
var tabs = new Ext.TabPanel('tabs1-' + key);
tabs.addTab('id1-' + key, "Tab 1");
tabs.addTab('id2-' + key, "Tab 2");
tabs.activate('id1-' + key);
lensElmt.setAttribute("installed", "true");
}
}
</script>
Let me know if that works!
David
Ashutosh Chauhan wrote:
> Dear all,
>
> I am using exhibit to show my data and want to render the items in a custom
> way.
> I am trying to format the items in a custom way using lens. I tried to
> use tabpanel provided by ext
> library. (http://www.extjs.com) I made some progress there. Tabpanel
> does show up and first tab is
> activated, but if i click on second tab, nothing happens. If I
> programatically activate the second
> tab, second tab is activated, but clicking on first tab doesnt activate it.
>
> Below is the code i used in lens:
> <div ex:role="viewPanel">
> <div ex:role="lens" class="nobelist" style="border-bottom: 4px solid
> #930;" width="100%">
> <div id="tabs1">
> <div id="id1" class="tab-content">
> <img class="summary-image" ex:src-content=".url" />
> </div>
> <div id="id2" class="tab-content">
> <img ex:src-content=".url2" />
> </div>
> </div>
> </div>
> <div ex:role="view" ex:viewClass="TileView" ex:label="Details"
> ex:grouped="false">
> </div>
> </div>
> This is the code for tab panel (adopted from ext tabpanel example itself).
>
> TabsExample = {
> init : function(){
> var tabs = new Ext.TabPanel('tabs1');
> tabs.addTab('id1', "Tab 1");
> tabs.addTab('id2', "Tab 2");
> tabs.activate('id1');
> }
> }
> Ext.EventManager.onDocumentReady(TabsExample.init, TabsExample, true);
>
> Please let me know if i am doing it wrong or this is not possible in
> exhibit lens.
>
> Cheers,
> Ashutosh.
> _______________________________________________
> General mailing list
> [email protected]
> http://simile.mit.edu/mailman/listinfo/general
>
_______________________________________________
General mailing list
[email protected]
http://simile.mit.edu/mailman/listinfo/general
