PDA

View Full Version : Include Form With JSON?



parsbin
10 Jun 2011, 3:17 AM
how can i include a form or other panels at different files in my script?
example:
ii have a Panel in file a.js and a form in b.js.
i want include form from b.js to panel in a.js files for that item.
same to picture
how can do that?

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

friend
10 Jun 2011, 6:03 AM
There are several ways to go. First off, you can create your own form class using Ext.extend (also registering your own xtype, if you like), then new (or xtype) instances of your component where ever/whenever needed.

http://www.sencha.com/learn/Tutorial:Extending_Ext_for_Newbies


Another way is to create your own 'factory' methods, which return an instance of a desired object. Something like this:




Ext.ns('myApp.get');

myApp.get.myForm = function() {

function myPrivateFunction() {
Ext.Msg.alert('Private Function', "I'm private and can only be called by the form instance created below!");
}

function exposedByFormFunction() {
Ext.Msg.alert('Exposed Function', "I'm exposed publicly as a form panel member, so I can be called as myFormInstance.exposedByFormFunction()");
}

var myForm = new Ext.form.FormPanel({
id: 'form-panel',
labelWidth: 75,
title: 'Form Layout',
<...>,
listeners: {
afterrender: function(component) {
myPrivateFunction();
}
}
});

return myForm;
};

var formInstance1 = myApp.get.myForm();
var formInstance2 = myApp.get.myForm();


You could also add an input parameter to the factory method which would allow you to pass a block of custom JSON config for each form instance you create.

parsbin
10 Jun 2011, 6:46 AM
thanks
but my primary problem is json.
i want to know, how can receive page items for example a form from different file or database via json?
i want to know, can i storing a form codes in to a database, and call, recive and show that by json?
can i see any example related to this?
i can`t find any answer

mschwartz
10 Jun 2011, 6:54 AM
Ext.Ajax.request({
url: 'get_form.php',
success: function(response) {
var field_items = Ext.decode(response.responseText);
var formPanel = new Ext.form.FormPanel({
tbar: ...,
items: field_items,
...
};
}
});

parsbin
10 Jun 2011, 7:39 AM
thanks a lot
i`v received answer via json
and last question:
how can i replace json response to last panel items by button handler?
i want add/replace "formPanel" to SamplePanel items.


var SamplePanel = Ext.extend(Ext.Panel, {
width: 700,
height:500,
style: 'margin-top:15px',
bodyStyle: 'padding:10px',
renderTo: 'docbody',
// html: Ext.example.shortBogusMarkup,
autoScroll: true
});

new SamplePanel({
title: 'Medium icons, text and arrows to the left',
items: [ ]
,
tbar: [{
xtype:'buttongroup',
items: [{
text: '??????',
iconCls: 'add24',
scale: 'medium',
handler: function(){
Ext.Ajax.request({
url: 'echo.php',
success: function(response) {
var field_items = Ext.decode(response.responseText);
var formPanel = new Ext.form.FormPanel({
items: field_items
});
}
});
}
}

mschwartz
10 Jun 2011, 7:52 AM
FormPanel has remove() method so you can remove the old items and add() to add new ones.

Or you can remove the FormPanel itself from its parent and add the new one.