EXT + Flex

[jay@moduscreate.com]

Working on an enterprise level application which retrieves data from a few data sources including HP's Universal CMDB, Tivoli Enterprise Console and a few other proprietary databases. This provides a 'single pane of glass' for a lot of our IT departments. The Flex part is the dynamic application map display. The FLEX library is Flex Visual Graph Library ('http://groups.google.com/group/flexvizgraphlib')

Watch a demo:
http://tdg-i.com/img/screencasts/2008-02-25_1610.swf

http://tdg-i.com/img/screencasts/2008-02-25_1615.png

[brian.moeskau]

Well, I have no idea what the graphs mean, but they sure do look cool ;) Thanks for sharing.

[jay@moduscreate.com]

Application association.

so the start is the application, diamonds are hosts, blue circles are databases.

So this application (in the photo) has two hosts associated with and two databases that it uses via 'HOST_1'.

Imagine this on an enterprise level where IR applications in a datacenter provide services. I'm doing a write up for jack, hoping to deliver by wednesday, thursday.

[genius551v]

Hey man impresive work...really great....=D>

can you post how do you paint of green your search result coincidences from combobox "Application to query"...?

Tnks in advance and great work again.

[dorgan]

Are you creating the graphs on the fly, do you have to specify x,y??

[jay@moduscreate.com]

that's the flex part. ;)

[jay@moduscreate.com]

Hey man impresive work...really great....=D>

can you post how do you paint of green your search result coincidences from combobox "Application to query"...?

Tnks in advance and great work again.



var hostnameRecord = Ext.data.Record.create([{
name : 'hostname',
mapping : 'HOSTNAME'
},{
name : 'display',
mapping : 'DISPLAY'
}
]);
var inAcCmdbHostNameStore = new Ext.data.Store({
baseParams : { srchType : 'hostname' },
proxy: new Ext.data.HttpProxy({
url: 'cmdbquerycombo.php'
}),
reader: new Ext.data.JsonReader({
root: 'response.data',
totalProperty: 'response.totalCount',
id: 'id'
}, hostnameRecord),
remoteSort: true
});
inAcCmdbHostNameCombo = new Ext.form.ComboBox({
applyTo : 'inAcCmdbHostName',
store: inAcCmdbHostNameStore,
emptyText: 'Host Name to query (optional)',
typeAhead: false,
loadingText: 'Searching...',
allowBlank: true,
hideTrigger: false,
msgTarget: 'side',
displayField : 'display',
allowBlank: true,
tpl: new Ext.XTemplate(
'<tpl for="."><div class="x-combo-list-item search-item">{display}</div></tpl>'
),
forceSelection: false,
queryParam: 'srchText',
triggerAction: 'all',
minChars: 2,
queryDelay: 150,
itemSelector: 'div.search-item',
onSelect : function(record, index){
if(this.fireEvent('beforeselect', this, record, index) !== false){
this.setValue(record.data.hostname);
this.collapse();
this.fireEvent('select', this, record, index);
}
}
});






consumes:


{ response : { data : [{"DBSID":"TITEDEV1,HOSTXXX,"DISPLAY":"<span color=#345FBF><b>TITE<\/b><\/span>DEV1(HOSTXXX)","CMDB_ID":"FEBE3EF8B4683C6C0A397CF934F14BD6"},{"DBSID":"TITEPRD1,HOSTXXX","DISPLAY"
:"<span color=#345FBF><b>TITE<\/b><\/span>PRD1(HOSTXXX)","CMDB_ID":"D1FEB8B75E0E05B215D826E3934B1A14"

}] }}

[NotChris]

Have you done anymore on this and/or could you provide the details on how you used Flex with Ext? You mention that you were providing a write up for Jack. Is this available for us to read? Our company is researching the use of Flex and wondered what it would take to integrate with Ext. Thank you.

[jay@moduscreate.com]

I apologize but the writeup is confidential and will not be disclosed.

I can tell you that integration was easy as pie. Simply appending the swf object to the DOM and connecting to it via Flex Ajax Bridge. :)

Flex is awesome - but does require some know-how to work. I compare ext to it a lot and I think they can improve their out of box code. Example: There is no easy way to show a popup dialog. Certainly not as easy as 'Ext.MessageBox.alert('title', 'msg body');' :)

[vasile.dirla]

They have it:

Alert.show("message","title");

[jay@moduscreate.com]

Thanks for resurecting this reaaaaaaaaaaaaaally old thread. :)

[Layne]

So is this what the "flex : 1," configuration item in chapter 6 listings is referring to? (6.7 & 6.8 listings)

Really enjoying your book by the way (MEAP). Keep up the great work!

[jay@moduscreate.com]

So is this what the "flex : 1," configuration item in chapter 6 listings is referring to? (6.7 & 6.8 listings)

Really enjoying your book by the way (MEAP). Keep up the great work!

Flex is like a "priority for size" and is entirely ratio based. So if you give one child a flex : 1 and the other flex : 2, the second panel will be 50% larger than the first.

Does this help?


Thanks for the feedback btw. Check out http://ExtJSinAction.com for The latest drag and drop chapter news (screencast) :)

[jay@moduscreate.com]

Btw, the Flex in this thread is merely talking about Adobe Flex :P

[Layne]

Thanks! That helps a lot. I couldn't find any reference to flex in the forms portion of the API docs (of coarse it's in the layout section where it should be). Now I'll have to try it out. (Guess I should re-read chapter 5 again :"> )

Cheers

[jay@moduscreate.com]

Actually, check out Ext.layout.HBoxLayout in the API :)