PDA

View Full Version : Binding or Filling an Ext Js Store with A in-memory JSon Object



mvbaffa
20 Oct 2010, 2:14 AM
Hi,

I have a JSon object received from a WCF Service in my application. I would like to bind this information to a ComboBox, a Datagrid, an HTML Template, or Form Fields.

I do not use the built-in Ext JS way of calling an URL, instead I use jQuery/Ajax to call my service that returns the information and maintains it in memory.

In ExtJs I presume I must use a Store to bind this content in these components.

What could be the best practice to fill the ExtJs Store with my JSon content ???

Thanks in advance

Condor
20 Oct 2010, 2:27 AM
Assuming you've configured the correct reader for the store, you only need to call:

store.loadData(mydata);

ps. Any reason that you're using jQuery for Ajax calls? Ext can do Ajax calls just as well.

mvbaffa
20 Oct 2010, 4:56 AM
Assuming you've configured the correct reader for the store, you only need to call:

store.loadData(mydata);

ps. Any reason that you're using jQuery for Ajax calls? Ext can do Ajax calls just as well.

You said configure the reader. I presume the steps are create the Store and define fields with the same name of the JSon Object. Is it or there is something else ???

The reason I use jQuery is that I have a legacy of Classes that are already using jQuery. In fact I work with ScriptSharp and write my classes in C#. The compiler generates Javascript. There is a wrap for jQuery in ScriptSharp and no wrap for 3.x Ext Class.

So to call Ext JS I have write directly in Javascript and I prefer to use C#. So I use the most as I can my C# classes and the Ajax Class is one of these.

I maintain a ModelLocator that contains all the collections returned from the WCF services so I just need to bind these collections to my Ext Js Widgets. I already did this in Silverlight and Flex and I want to replicate in Ext Js.

Thanks Condor,

Condor
20 Oct 2010, 5:03 AM
Does your data also include metadata (field names and types etc.)?

mvbaffa
20 Oct 2010, 9:31 AM
Does your data also include metadata (field names and types etc.)?

The WCF Service returns, for instance, a List<ValueObject> wich is encoded in JSon by WCF and it reaches the Javascript as an array of objects. The objects have, as properties, the same name of the C# properties and are values initialized correctly.

It works OK. My problem is how can I fill the Ext Store more efficiently. I know I can enumerate the returned array and add its elements to the Store. But this is too much inefficient, specially when the list is too long.

Can I directly bind the returned array of object to a Ext Store. To do that will I have to create the store and add fields with the same name as the properties of the created objects ???

Which is the best and more efficient way to do this ???

Thanks,

mvbaffa
20 Oct 2010, 10:15 AM
Just to complete, In my case the mode in the store should be set local since the information to be bounded will reside in memory. Is it True ???

Condor
20 Oct 2010, 11:34 AM
Store doesn't have a 'mode' config option. Only ComboBox has.

I don't know anything about WCF. What kind of JSON data are you actually receiving?

mvbaffa
20 Oct 2010, 12:33 PM
Maybe I could use something like this:

var store = new Ext.data.JsonStore({
autoDestroy: true,
storeId: 'contacts',
root: 'd',
idProperty: 'idContact',
fields: ['idContact', 'contactName', {name:'salary', type: 'float'}, {name:'hireDate, type:'date'}]
});

var contactList = {
d: [
{id: '1', contactName: 'Contact1', salary:'100000.00', hireDate:new Date(2010, 10, 10)},
{id: '2', contactName: 'Contact2', salary:'150000.00', hireDate:new Date(2009, 10, 10)}
]
}

How do I fill contacts Store with contactList ???

Condor
20 Oct 2010, 5:25 PM
store.loadData(contactList);

(but you also need to fix the idContact/id mapping)

mvbaffa
21 Oct 2010, 5:57 AM
store.loadData(contactList);

(but you also need to fix the idContact/id mapping)

Yes I did saw the error.

Thank you very much for your time.