PDA

View Full Version : Form question: What widget to use for that ?



drunkmoose
27 Sep 2010, 12:26 PM
Hi there!

Here's an XML feed I have that's set up to feed a form:


<?xml version="1.0" encoding="iso-8859-1" ?>
<call>
<call_details>
<number>15590</number>
<description>[2010-09-21 11:49] Test</description>
<dateentered>2010-09-21 11:49</dateentered>
<priority>P1 (Critical)</priority>
<status>In progress</status>
<category>Hardware</category>
<subcategory>Damaged Equipments</subcategory>
<producttype>Batterie</producttype>
<summary>Test</summary>
<solution>[WebClient 2010-09-27 10:00]Client is requesting an update</solution>
</call_details>
<ressources>
<ressource>
<name>Ressource name #1</name>
</ressource>
<ressource>
<name>Ressource name #2</name>
</ressource>

</ressources>
</call>


I've got it all figured out, but the only remaining bit is those ressources I want to show up in the form. Do you have any idea what kind of widget I could use to plug it in there ?

Thanks!
:)

plalx
27 Sep 2010, 12:32 PM
Depends on your needs, but here's some classes you can look at...

Ext.grid.GridPanel (http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridPanel) (this one would probably be overkill... )
Ext.list.ListView (http://dev.sencha.com/deploy/dev/docs/?class=Ext.list.ListView)
Ext.DataView (http://dev.sencha.com/deploy/dev/docs/?class=Ext.DataView)

drunkmoose
27 Sep 2010, 1:05 PM
Thanks alot for your reply! But I'm a little confused as what to provide for the store config. option as I want to use what the form already loaded.

Here's my form code (nevermind the ASP code, I'm doing dynamics JS):

http://pastebin.com/zF4mnjfp

plalx
28 Sep 2010, 5:19 AM
You can use the 'data' config option to load the resources already fetched from the server into the store.

Here's an example:



Ext.onReady(function() {

//Creating the store passing inline data
var store = new Ext.data.ArrayStore({
idIndex: 0,
fields: ['name'],
data: [
['Resource1'],
['Resource2'],
['Resource3']
]
});

new Ext.list.ListView({
store: store,
columns: [
{
header:'Resource',
width: 1, //100%
dataIndex: 'name'
}
],
renderTo: Ext.getBody() //Render to body
});
});

drunkmoose
28 Sep 2010, 7:20 AM
Thanks, but the store you are creating does not in no way refer to the XML that's been loaded already for the rest of the form.

I want to be able to do it another form field like:



{
fieldLabel: 'Ressource(s)'
xtype: 'listview',
store: XML that's already loaded for the rest of the form,
columns: [{header: 'Name',dataIndex: 'name' }]
}


This is the line of code that loads the data for the form (nevermind the ASP tags):


formPanel.getForm().load({method: 'GET', url:'main_xml.asp?mode=single&id=' (http://www.sencha.com/forum/'main_xml.asp?mode=single&id=') + selectedCall, waitTitle:'<%=Session("LOADING_TITLE")%>',waitMsg:'<%=Session("LOADING_MSG")%>'});

I just don't know how I could syntaxically refer to the data that's currently feeding the form. I know I might be able to pull it off adding something like this in teh code block above:


formPanel.add({fieldLabel: 'Ressource(s)', xtype:'listview', store:formPanel.?????});

plalx
28 Sep 2010, 7:48 AM
To refer to the loaded data, you can listen to the Ext.form.BasicForm (http://dev.sencha.com/deploy/dev/docs/?class=Ext.form.BasicForm) 'actioncomplete' event checking up the Action.result property.
Then you will be able to build the store based on this data.

drunkmoose
28 Sep 2010, 10:43 AM
The thing is that in action.results I can see the reader loaded with data from the first part of the XML (call_details)

Now I want the listview to take its data from the 2nd part of the XML (ressources) so action.results is not very helpful.

drunkmoose
29 Sep 2010, 12:35 PM
I can't create a store from this event's code since the store has to already be defined in the FormPanel's listview declaration in FormPanel's items.

The pseudo code of what you are saying is something like:



load the form
once the form is loaded, build a store with the form's reader and apply it to the listview


But I don't see how this can work since the listview already has to have a store otherwise you get JS errors. By the way, I've changed my XML structure to:



<?xml version="1.0" encoding="iso-8859-1" ?>
- <call>
- <call_details>
<number>15590</number>
<description>[2010-09-21 11:49] Test</description>
<dateentered>2010-09-21 11:49</dateentered>
<priority>P1 (Critical)</priority>
<status>In progress</status>
<category>Hardware</category>
<subcategory>Damaged Equipments</subcategory>
<producttype>Batterie</producttype>
<summary>Test</summary>
<solution>Test solution</solution>
- <ressources>
<ressource name="Ressource #1" />
<ressource name="HELPDESK TEAM" />
</ressources>
</call_details>
</call>

plalx
29 Sep 2010, 5:36 PM
You can specify a listview with an empty store and then append data to the store once the form is loaded.

drunkmoose
30 Sep 2010, 11:02 AM
Meh, this is way too tricky. I'll just get another field like <alltheresourcesname> .....</alltheresourcesname> in the call_details node and cram all the names in there.
I'm not even sure if my lack of understanding is about XML or ExtJS, and if it's ExtJS I don't know which part of it.