PDA

View Full Version : How is it possible to show Associations in a Tree



bofrost
24 Aug 2011, 11:00 AM
I wonder if it is possible to show Models with the same fields which are associated in one Tree.

skirtle
27 Aug 2011, 1:05 AM
I guess the most obvious use case is the one where a model is associated with itself to form a hierarchy, like groups or folders.

I don't know of anything to do this automatically.

If you already have existing records for a particular model then I think you'd have to manually iterate over them to build up a tree. However, if you want the tree to come via a proxy, such as an Ajax request, it should be quite easy to configure the tree to use the same data source as your existing model. The defautRootProperty would take the role of the associationKey:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.TreeStore-cfg-defaultRootProperty

If you need more help with this could you give specifics of what you're trying to do? Currently there are too many possibilities to give an example.

bofrost
27 Aug 2011, 11:03 AM
My situation is very special, I'm writing an client for XMPP which is connected by websockets to the server. To communicate with the server I'm using the strope-library which is building the XML request. To parse the XML I'm trying to use ext. It is working fine if I'm loading the Data to two normal Grids.
The first items I would like in my Tree are the contacts:

Ext.define('Bifrost.xmpp.data.model.roster.Item', {
extend: 'Ext.data.Model',
requires:['Bifrost.xmpp.data.proxy.roster.Item'],
proxy: {type:'rosteritem'},
idProperty:'@jid',
fields: [{
name: 'name',
mapping: '@name'
},{
name: 'jid',
mapping: '@jid'
},{
name: 'subscription',
mapping: '@subscription'
}],
hasMany:{
autoLoad : true,
ownerModel:'Bifrost.xmpp.data.model.roster.Item',
name:'presences',
//name: 'children',
primaryKey:'jid',
associationKey:'@jid',
foreignKey:'jid',
model:'Bifrost.xmpp.data.model.roster.Presence'
}

With following Proxy:


Ext.define('Bifrost.xmpp.data.proxy.roster.Item',
{
extend : 'Bifrost.xmpp.data.proxy.XmppProxy',
alias : 'proxy.rosteritem',
reader : {
type : 'xml',
record : 'item'br
},
read : function(operation, callback, scope) {
var elem = Strophe.xmlElement("query", [["xmlns", "jabber:iq:roster"]], "");
var iq = $iq({ type : "get" }).cnode(elem);
this.getConnection().stropheConnection.sendIQ(iq.tree(), Ext.pass(this.onReadPerformed, arguments, this));
}
});

And as child to the roster items I want the Presence Information:


Ext.define('Bifrost.xmpp.data.model.roster.Presence', {
extend: 'Ext.data.Model',
requires: ['Bifrost.xmpp.data.proxy.roster.Presence'],
proxy: { type:'rosterpresence' },
idProperty:'@from',
fields: [{
name: 'jid',
convert : function(v, record) {
return Strophe.getBareJidFromJid(record.data.from);
}
},{
name: 'from',
mapping: '@from'
},{
name: 'to',
mapping: '@to'
},{
name: 'show',
mapping: 'show'
}],
belongsTo:{
model: 'Bifrost.xmpp.data.model.roster.Item',
primaryKey: 'from',
foreignKey: 'jid'
}
});

proxy:


Ext.define('Bifrost.xmpp.data.proxy.roster.Presence', {
extend: 'Bifrost.xmpp.data.proxy.XmppProxy',
alias : 'proxy.rosterpresence',
reader: { type : 'xml', record : 'presence' },
read: function(operation, callback, scope) {
var pres = $pres(); this.getConnection().stropheConnection.addHandler(Ext.pass(this.onReadPerformed, arguments, this), null, 'presence');
this.getConnection().stropheConnection.send(pres);
}
});

The XMPP-Proxy looks like this:


Ext.define('Bifrost.xmpp.data.proxy.XmppProxy', {
extend: 'Ext.data.proxy.Server',
alias : 'proxy.xmppproxy',
uses : ['Ext.data.Request'],
constructor: function(config) {
this.callParent(arguments);
},
create: function(){},
setConnection: function(connection) {
this.connection=Bifrost.xmpp.ConnectionManager.get(connection);
},
getConnection: function() { if(!this.connection || typeof this.connection == "String") { this.setConnection("default"); } return this.connection; },
onReadPerformed :function(operation, callback, scope, data) {
var me = this,
reader = me.getReader(),
result = reader.read(data);
Ext.apply(operation, { resultSet: result }) ;
operation.setCompleted();
operation.setSuccessful();
Ext.callback(callback, scope || me, [operation]);
return true; //return true for stropheConnection addHandler to fire not only once
}
});

I'm getting two XMLs one whit all my Contacts and one with all Presences of all Contacts:

SENT:<iq type='get' xmlns='jabber:client' id='8204:sendIQ'><query xmlns='jabber:iq:roster'/></iq>RECV:<iq from='user@localhost' to='user@localhost/21358680171314311028508463' id='8204:sendIQ' type='result'><query xmlns='jabber:iq:roster'><item subscription='both' name='Nickname' jid='user2@localhost'><group>myGroup</group></item></query></iq>
Presences:

SENT:<presence xmlns='jabber:client'/>RECV:<presence from='user@localhost/21358680171314311028508463' to='user@localhost/21358680171314311028508463'/>RECV:<presence from='user2@localhost/Psi+' to='user@localhost/21358680171314311028508463' xml:lang='en'><priority>55</priority><c xmlns='http://jabber.org/protocol/caps' node='http://psi-dev.googlecode.com/caps' ver='0.15' ext='cs e-time ep-notify-2 html last-act mr sxe whiteboard'/><delay xmlns='urn:xmpp:delay' from='user2@localhost/Psi+' stamp='2011-08-25T18:54:45Z'/><x xmlns='jabber:x:delay' stamp='20110825T18:54:45'/></presence>Is it possible to get this in a tree?brIf there is no solution i will but both data in two store's listen on all relevant listeners and put the changes in a tree store in the right position.