PDA

View Full Version : Convert a form to JSON Format



parsbin
10 Jun 2011, 11:06 PM
Hi
i want convert my live search combo to JSON format for showing to a page by json.
please help to me to converting that's to json format.



Ext.onReady(function(){
var ds = new Ext.data.Store({
url: 'json_core.php',
reader: new Ext.data.JsonReader({
root: 'comps',
totalProperty: 'totalCount'
}, [
{name: 'name', mapping: 'name'},
{name: 'id', mapping: 'id'},
{name: 'type', mapping: 'type'},
{name: 'description', mapping: 'description'},
{name: 'date', mapping: 'date'}
])
});
var resultTpl = new Ext.XTemplate(
'<tpl for="."><div class="search-item" dir=rtl>',
'<h3>{name}<span>{date}<br /> {type}</span></h3>',
'{description}',
'</div></tpl>'
);
var search = new Ext.form.ComboBox({
store: ds,
cls: 'textright',
displayField:'name',
typeAhead: false,
loadingText: '... searching',
width: 450,
pageSize:10,
hideTrigger:true,
tpl: resultTpl,
minChars: 2,
applyTo: 'search',
itemSelector: 'div.search-item',
onSelect: function(record){
var company_id = String.format('{0}', record.data.id);
window.location = '?contact_id='+company_id ;
}
});
search.focus();
});

skirtle
11 Jun 2011, 1:04 AM
Your question doesn't really make sense, could you rephrase? What do you have now and how does it differ from what you want? What data are you hoping to serialize as JSON?

parsbin
11 Jun 2011, 1:28 AM
ok
in handler of button i have bottom codes.
i need to change my combo box codes to a format, which json can understand that for receive.



handler: function(){
Ext.Ajax.request({
url: 'echo.php?do=sabte_foroosh',
success: function(response) {
var field_items = Ext.decode(response.responseText);
var formPanel = new Ext.form.FormPanel({
items: field_items
});
page.add(formPanel);
page.doLayout();
}
});
}



http://031.img98.net/out.php/i393713_json.jpg

skirtle
11 Jun 2011, 2:54 AM
Here's my understanding of what you want:


The user clicks a button.
A live search combobox is shown to the user.
The user chooses one of the options from the combobox (can users type in a value that is not in the list?)
The chosen value is used to populate a form.


Assuming this is correct I have some follow up questions.

How does the value chosen in the combobox map to the data in the form? Is the data all present in the combobox's store or must a further request be sent to the server to load extra data? Why are you loading the form fields from the server via Ajax: do the fields themselves vary depending on the value selected (as opposed to just the fields' values)?

parsbin
11 Jun 2011, 3:21 AM
no
the combo box and live search is ready ,and i want include that, intothe page items after click on the button with json method from echo.php

i want convert combobox codes to json format in echo.php for understanding json.

parsbin
11 Jun 2011, 3:42 AM
so
i need to a combo box code without var or new or functions (for understand json)
for example:
{

xtype:'test'
}
,
{
xtype:
.
.
.

skirtle
11 Jun 2011, 4:10 AM
If you do something a bit like this then you'll be able to use an xtype of mycombo. Most of the config properties can be moved from the Ext.extend() to the config object if required. I've tried to tidy up other bits of the code too, you can always revert those bits if you don't like my changes.


Ext.ns('My');

My.ComboBox = Ext.extend(Ext.form.ComboBox, {
cls: 'textright',
displayField: 'name',
hideTrigger: true,
itemSelector: 'div.search-item',
loadingText: '... searching',
minChars: 2,
pageSize: 10,
typeAhead: false,
width: 450,

tpl: [
'<tpl for="."><div class="search-item" dir=rtl>',
'<h3>{name}<span>{date}<br /> {type}</span></h3>',
'{description}',
'</div></tpl>'
],

onSelect: function(record){
window.location = '?contact_id=' + record.data.id;
},

initComponent: function() {
this.store = new Ext.data.JsonStore({
fields: ['name', 'id', 'type', 'description', 'date'],
root: 'comps',
totalProperty: 'totalCount',
url: 'json_core.php'
});

My.ComboBox.superclass.initComponent.call(this);
}
});

Ext.reg('mycombo', My.ComboBox);

parsbin
11 Jun 2011, 4:26 AM
ok
thanks
can i use your codes by this codes?
i should echo your codes is echo.php.
is this Enough?


handler: function(){
Ext.Ajax.request({
url: 'echo.php?do=sabte_foroosh',
success: function(response) {
var field_items = Ext.decode(response.responseText);
var formPanel = new Ext.form.FormPanel({
items: field_items
});
page.add(formPanel);
page.doLayout();
}
});
}

skirtle
11 Jun 2011, 4:39 AM
The code I provided needs to be loaded into your page to create the class and register the xtype before you call echo.php. I'd recommend just doing that via an HTML script tag as per normal. What it will allow you to do is use that xtype in echo.php just like you use any other xtype.

parsbin
11 Jun 2011, 4:52 AM
can you take an example related to this?
how can loaded your codes before echo.php in my page?
and how can use your code ?
sorry for my many questions.

skirtle
12 Jun 2011, 12:47 AM
Just include the My.ComboBox class in a .js file using a script tag in your HTML:


<script type="text/javascript" src="{yourpath}/My/ComboBox.js"></script>

The exact path and filename are up to you. You'll then be able to use mycombo as an xtype.

All of this does beg the question though of why you're generating configs server-side in this fashion? Do you have a form that varies sufficiently between entries to justify creating it this way? If, for example, you were writing some sort of form-builder application it would make a lot of sense. However, if you have the same fields for each entry then all you need to do is load the values over Ajax, not the full component configs.