TabPanel, List & Forms

[riyaad]

Hi Sencha Touch People

I've started using ST ver 2.0. I'm wondering if someone could assist in directing me in the right direction.
I have a tabpanel with 2 panels. This first contains a JSON list
[List], the second a form [Settings]. I'd like to "submit" my changed settings via ajax to the script and receive a JSON formatted response back to my List tab. ie it should replace the list currently on the List tab. Is this possible?

If anyone could direct me further ...it would be appreciated.

So far I have...




Ext.application({
name: 'Sencha',


launch: function() {


Ext.define('Movies', {
extend: 'Ext.data.Model',
fields: [
// movie details
{name: 'movie_name', type: 'string'},
{name: 'actor_1', type: 'string'},
{name: 'actor_2', type: 'string'},
{name: 'director', type: 'string'},
{name: 'genre', type: 'string'},
{name: 'begin', type: 'string'},
{name: 'end', type: 'string'},
{name: 'rating', type: 'string'},
{name: 'score_1', type: 'string'},
{name: 'score_2', type: 'string'},
{name: 'summary', type: 'string'},
{name: 'duration', type: 'string'},
// channel details
{name: 'channel_name', type: 'string'},
{name: 'channel_short', type: 'string'},
{name: 'channel_number',type: 'string'}
]
});

var itemTemplate = new Ext.XTemplate(
'<tpl for=".">',
'{begin} <b>{movie_name}</b> {channel_short} [{channel_number}]',
'</tpl>'
);


var store = Ext.create('Ext.data.Store', {
model: 'Movies',
storeId: 'cStore',
proxy: {
type: 'ajax',
url: 'movies.json',
reader: {
type: 'json'
}
},
autoLoad: true
});


var MovieList = new Ext.List({
title: 'Movies',
store: store,
itemTpl: itemTemplate
});


MovieList.on('itemtap',function(dataView,index,item,e){
var store = dataView.getStore();
var name = store.getAt(index).data.movie_name;
var summary = store.getAt(index).data.summary;
//var popup = new Ext.Panel({
var popup = Ext.create('Ext.Panel', {
modal:true,
centered:true,
floating:true,
width:500,
height:220,
//style: 'background-color: #BAE4FF',
styleHtmlContent: true,
items: [
{
xtype: 'toolbar',
docked: 'top',
title: name
}
],
html:'</br><div style="margin-bottom:10px;color:#d3d3d3;"><p>Summary... ' + summary + "</p></div>"
});
popup.show();
});


var About = new Ext.Panel({
title: 'About',
html: 'About text goes here ...'
});


var bundle_ddn = new Ext.field.Select({
name: 'bundle_ddn',
label: 'Bouquet:',
options:[
{ text:'DStv Compact', value: '3' },
{ text:'DStv EasyView', value: '7' },
{ text:'DStv Lite', value: '6' },
// { text:'DStv Premium', value: '1' },
// { text:'DStv Select 1', value: '4' },
// { text:'DStv Select 2', value: '5' },
// { text:'SABC 1/2/3/e.tv', value: '2' },
// { text:'DStv Select 2', value: '5' },
// { text:'TopTV Ultimate Movies', value: '14' },
{ text:'TopTV Variety', value: '11' }
]
});


var formBase = {
scroll: 'vertical',
title: 'Settings',
url : 'http://riyaad-millers-imac.local/cgi-bin/myform.cgi',
//standardSubmit : true, // usually false!
items: [ bundle_ddn
/*{
items: [
{
xtype:'selectfield',
name: 'bundle_ddn',
label: 'Bouquet',
options:[
{ text:'DStv Compact', value: '3' },
{ text:'DStv EasyView', value: '7' },
{ text:'DStv Lite', value: '6' },
{ text:'DStv Premium', value: '1' },
{ text:'DStv Select 1', value: '4' },
{ text:'DStv Select 2', value: '5' },
{ text:'SABC 1/2/3/e.tv', value: '2' },
{ text:'DStv Select 2', value: '5' },
{ text:'TopTV Ultimate Movies', value: '14' },
{ text:'TopTV Variety', value: '11' }
]
}, {
xtype:'selectfield',
name: 'yob_ddn',
label: 'Movies made since',
options:[
{ text:'1920', value: '1920' },
{ text:'1930', value: '1930' },
{ text:'1940', value: '1940' },
{ text:'1950', value: '1950' },
{ text:'1960', value: '1960' },
{ text:'1970', value: '1970' },
{ text:'1980', value: '1980' },
{ text:'1990', value: '1990' },
{ text:'2000', value: '2000' },
{ text:'2010', value: '2010' }
]
},{
xtype:'selectfield',
name: 'options',
label: 'Movies rated at least',
options:[
{ text:'Avoid', value: 'Avoid' },
{ text:'Test', value: 'Test'},
{ text:'Ho-hum', value: 'Ho-hum' },
{ text:'Ok', value: 'Ok' },
{ text:'Good', value: 'Good' },
{ text:'Excellent', value: 'Excellent' }
]
},
{
xtype: 'textfield',
name : 'name',
label: 'Name',
useClearIcon: true,
autoCapitalize : false
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: false
}, {
xtype: 'emailfield',
name : 'email',
label: 'Email',
placeHolder: 'you@sencha.com',
useClearIcon: true
}, {
xtype:'selectfield',
name: 'options',
label: 'Option',
options:[
{ text:'This', value: 'this' },
{ text:'That', value: 'that' },
{ text:'Some', value: 'some' }
]
}]
}*/
],
dockedItems: [
{
xtype: 'toolbar',
items: [
{
text: 'Load Defaults',
ui: 'round',
handler: function() {
formBase.user = Ext.ModelMgr.create({
'name' : 'Akura',
'password': 'secret',
'email' : 'saru@sencha.com',
'options' : 'That'
}, 'User');


form.loadModel(formBase.user);
}
},
{xtype: 'spacer'},
{
text: 'Reset',
handler: function() {
form.reset();
}
},
{
text: 'Save',
ui: 'confirm',
handler: function() {
var model = Ext.ModelMgr.create(form.getValues(),'User');


var errors = model.validate(),message = "";
if(errors.isValid()){


if(formBase.user){
form.updateRecord(formBase.user, true);
}
form.submit({
waitMsg : {message:'Submitting', cls : 'demos-loading'}
});


} else {
Ext.each(errors.items,function(rec,i){
message += rec.message+"<br>";
});
Ext.Msg.alert("Validate", message, function(){});
return false;
}
}
}
]
}
]
};


Ext.create('Ext.tab.Panel', {
fullscreen: true,
items: [ MovieList, formBase, About ]
});


} // function end

[mitchellsimoens]

If you return data in your Ext.Ajax call that you want to then use for your List you can use the loadData on the Store for your list.

[riyaad]

Hi Mitchell Simoens

I've consulted various sites and examples. To date, nothing completely helpful (always fragmented). Is there any way you could possibly show me an example or more conclusive documentation regarding this. Any help would be appreciated. I'm new to JavaScript and ST.

Thx,
Riyaad ~o)

[mitchellsimoens]

Ext.Ajax.request({
url : 'somewhere.php',
params : {.....},
success: function(response) {
var json = Ext.decode(response);

list.getStore().loadData(json);
}
});

Something like that, just typing from memory

[riyaad]

Thank you Mitchell Simoens

Exactly what I needed to get me to the next step :-?