PDA

View Full Version : Simple HTML Update



premapix
26 Jun 2010, 3:04 PM
Hi All!
We have been looking at the output files from the designer and notice that the ready event only occurs in the index.js file -- a file which is overwritten.

Does anyone know the designer friendly way of [say] updating the html of a tab panel with an id of gPanel?

The code we have used is simple
g=Ext.get('gPanel');
g.update('Some html here...');

This works fine in within the ready event but putting it in the js file where the designer suggest that additional code be put doesn't seem to work.

Probably a simple answer -- we are new to ExtJs as well as the designer.

Any comments welcome
Thanks
premapix

offshoredevelopment
28 Jun 2010, 4:27 AM
A component that can be used to group GUI components that can be dragged, collapsed (leaves title tab only) and un-collapsed. When created the Panel is collapsed by default. To open the panel use setCollapsed(true); after creating it.

jarrednicholls
28 Jun 2010, 6:21 AM
Are you wanting to update the html inside of a panel within a tab panel, or the tab panel itself? The tab panel itself shouldn't have it's "el" or "body" touched in order to operate properly. I'm assuming though you mean an Ext.Panel that is a part of an Ext.TabPanel...

You can set the html of a Component (Ext.Panel is a subclass of Ext.Component) with the "html" config property: http://www.sencha.com/deploy/dev/docs/?class=Ext.Component&member=html This can be set inside of the generated .js file for your TabPanel class. e.g., assuming you have assigned an "autoRef" to your Panel that's inside of the TabPanel (autoRef generates a "ref" configuration with the properly amount of "levels" to put the reference at the top-most component, see http://www.sencha.com/deploy/dev/docs/?class=Ext.Component&member=ref):



MyTabPanel = Ext.extend(MyTabPanelUi, {
initComponent: function(){
MyTabPanel.superclass.initComponent.call(this);

this.myPanel.html = 'my html';
}
});


However, if you need to set the HTML outside of the class (perhaps based on business logic), then you can do it the way you are doing it currently...you can simply make a copy of xds_index.js and xds_index.html and load those copies w/ your modifications instead. Those two files, though auto-generated on each export, probably won't change very often for you (they only change if you add new "top-level", exportable components to the Designer project).

premapix
28 Jun 2010, 12:39 PM
Thanks very much both -- that really does help. We'll share this with a few others in our group who are a bit puzzled also.
Kind regards and thanks again