PDA

View Full Version : Quick question regarding Ext application design (i.e. code structure)



kevin-berry
5 May 2010, 3:49 PM
Hi,

I'm having a heck of a time trying to understand/find resources (that I can understand) with regards to the code layout of an Ext application. Below is my current design which has made the form on the page disappear (that used to be there).



Ext.namespace('kberry_dynamic');
var backendURL = "foo.php";

kberry_dynamic = function()
{
Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();

var fsf = new Ext.FormPanel
({...});

fsf.render(document.body);

}(); //end of application
I am trying to get this piece of code in there, but I don't know where it fits:


Ext.Ajax.request
({
url: 'kberry_request.php',
success: function(response)
{
var items = Ext.decode(response.responseText);
var cb = new Ext.form.CheckBoxGroup
({
items: items
});
fsf.add(cb);
fsf.doLayout();
}
});finally, I have an init function (and I'm not sure if it's laid out properly) that I want in the final application:


//public space for functions
return
{
init: function()
{
alert('Application successfully initialized');
this.callAjax();
},
callAjax: function()
{
gname_ajax_request = new Ext.Ajax.request
({
url: 'kberry_request.php',
baseParams: { ajax_req: 'get_group_check_items' },
success: function(response)
{
var items = Ext.decode(response.responseText);
var cb = new Ext.form.CheckBoxGroup
({
items: items
});
fsf.add(cb);
fsf.doLayout();
}
});
}
}If someone can point me to resources, I can probably piece together the code myself, but right now, even with the help of this tutorial: http://www.extjs.com/learn/Tutorial:Application_Layout_for_Beginners I'm still fairly uncertain about how an ExtJS application is designed properly.

Thanks for any advice!

Kevin

P.S. Another decent source for this sort of question, but still not helpful enough for me. (http://www.java2s.com/Code/JavaScript/Ext-JS/Callrendermethodtorendertobody.htm)

darthwes
5 May 2010, 5:12 PM
Concerning the layout of the code


var foobar = {
foo: "fourteen",
bar: 14
};

alert(foobar.bar + "[" + foobar.foo + "]");


prints

14[fourteen]

So, foobar a simple instance of a json object. it has two properties, foo and bar, which can be accessed by the dot operator or the index operator (you can say foobar["foo"]). You could also loop over it and find that it acts somewhat like an array with two elements.

The problem is that everything picks up global scope in JS when you do a


<script>
var foo = "foobar";
</script>

foo is global.

What your code tries to do is create an object that only takes up ONE global var name. That's the 'trick' that we're using here. What you can do is take your functions and give them names like your example code that you said you weren't sure of. What you've done is created an object with named indexes using json notation.

If you have two functions you just throw them into your global object with names. For example, kberry_dynamic is the name of your global object. The global object is most often referred to as a namespace, which is why you feel like your missing something.

I would suggest Douglas Crockford's website (http://www.crockford.com/) for an in-depth discussion about the particulars. He also covers closures so I'll leave that to the jedi prince. They are quite important to understand.

The implications of what you're doing need to be understood if you're going to use that syntax to build a massive project. The ramifications are not well documented and I too would like to better understand how to build a big project properly, too.

kevin-berry
6 May 2010, 1:02 PM
Thank you for your quick reply. I did some fiddling, and I've got it working to a point. However, I'm still having trouble with my init function within the public region of the namespace. Can you or anyone help me figure out why?

The issue is this: within the return (public section) scope, all is fine and dandy. However once I enter the scope of the init function, even the declaration if init itself, the form on the page disappears (i.e. something's wrong).

Here is the snippet:


//public space
return
{
// init: function() //This call is giving me troubles.
// {
// alert('Application successfully initialized');
// this.callAjax();
// },
};

And here is my complete program with that code snippet near the bottom of the code.


var backendURL='foo.php';

Ext.namespace('kberry_namespace');

kberry_namespace.app = function()
{

//An AJAX request to get the group names from the database
//This will let me create n checkboxes with labels from the db
Ext.Ajax.request
({
url: 'kberry_request.php',
success: function(response)
{
var items = Ext.decode(response.responseText);
var cb = new Ext.form.CheckBoxGroup
({
items: items
});
fp.add(cb);
fp.doLayout();
}
});

Ext.onReady(function()
{
//What is this?
Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var Parent_Sub_ID =
{
xtype: 'fieldset',
title: 'Parent Submission ID',
collapsible: true,
autoHeight:true,
items :[{
xtype:'textfield',
fieldLabel: '<b>Parent Submission ID<b>',
name: 'parent_submission',
id: 'parent_submission',
labelStyle: 'width:150px',
validateOnBlur:true
},{
html: '<center><table border=0><td><tr><br><b>Please leave this field blank if you do not wish to ' +
'link <br>this submission with a previously made submission.</b></tr></td></center> '
}]
};

var Group_Checker =
{
xtype:'fieldset',
title: 'Group Check',
collapsible: true,
autoHeight:true,
itemCls:'x-check-group-alt',
columns: 1,
items: [{
<!-- something goes here -->
}]
};

var Comments =
{
xtype:'fieldset',
title: 'Comments',
collapsible:true,
autoHeight:true,
items :[{
labelStyle: 'width:0px',
hideLabel:true,
name: 'meta_data',
id: 'meta_data',
height:75,
width:'100%',
autoScroll:true,
}]
};

var Assign_Permissions =
{
xtype:'fieldset',
title: 'Assign Permissions',
collapsible: true,
autoHeight:true,
items :[{
<!-- something goes here -->
}]
};

var Add_Files =
{
xtype:'fieldset',
title: 'Add Files',
collapsible: true,
autoHeight:true,
items :[{
<!-- something goes here -->
}]
};

// combine vars into one form
var fp = new Ext.FormPanel
({
frame: true,
url:backendURL,
applyTo:'content',
items: [{
layout: 'column',
border: false,
},
Parent_Sub_ID,
Group_Checker,
Comments,
Assign_Permissions,
Add_Files,
],
buttons:[{
text: 'Save',
handler: ajax_validate_parent
},{
text: 'Submit',
handler: ajax_validate_parent
}]

}); //End actual form creation

} //End onReady function parameter

); //End onReady

//public space
return
{
// init: function() //This call is giving me troubles.
// {
// alert('Application successfully initialized');
// this.callAjax();
// },
};

}(); //End of namespace

I unfortunately have no debugging tools at my disposal at the moment, so I am purely debugging via trial and error/commenting.

Thank you for you help!

Regards,
Kevin

kevin-berry
6 May 2010, 2:37 PM
OK, after some fiddling, I've re-worked my code, but I'm having some weird issue with the public section of my code. For some reason, the return scope is fine and dandy, however once I declare the init function even if the body is empty, the form on the webpage disappears (i..e something breaks).

Here's the snippet:


//public space
return
{
// init: function() {}
// {
// alert('Application successfully initialized');
// this.callAjax();
// },
};


Here is my complete code:


var backendURL='foo.php';

Ext.namespace('kberry_namespace');

kberry_namespace.app = function()
{

//An AJAX request to get the group names from the database
//This will let me create n checkboxes with labels from the db
Ext.Ajax.request
({
url: 'kberry_request.php',
success: function(response)
{
var items = Ext.decode(response.responseText);
var cb = new Ext.form.CheckBoxGroup
({
items: items
});
fp.add(cb);
fp.doLayout();
}
});

Ext.onReady(function()
{
//What is this?
Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var Parent_Sub_ID =
{
xtype: 'fieldset',
title: 'Parent Submission ID',
collapsible: true,
autoHeight:true,
items :[{
xtype:'textfield',
fieldLabel: '<b>Parent Submission ID<b>',
name: 'parent_submission',
id: 'parent_submission',
labelStyle: 'width:150px',
validateOnBlur:true
},{
html: '<center><table border=0><td><tr><br><b>Please leave this field blank if you do not wish to ' +
'link <br>this submission with a previously made submission.</b></tr></td></center> '
}]
};

var Group_Checker =
{
xtype:'fieldset',
title: 'Group Check',
collapsible: true,
autoHeight:true,
itemCls:'x-check-group-alt',
columns: 1,
items: [{
<!-- something goes here -->
}]
};

var Comments =
{
xtype:'fieldset',
title: 'Comments',
collapsible:true,
autoHeight:true,
items :[{
labelStyle: 'width:0px',
hideLabel:true,
name: 'meta_data',
id: 'meta_data',
height:75,
width:'100%',
autoScroll:true,
}]
};

var Assign_Permissions =
{
xtype:'fieldset',
title: 'Assign Permissions',
collapsible: true,
autoHeight:true,
items :[{
<!-- something goes here -->
}]
};

var Add_Files =
{
xtype:'fieldset',
title: 'Add Files',
collapsible: true,
autoHeight:true,
items :[{
<!-- something goes here -->
}]
};

// combine vars into one form
var fp = new Ext.FormPanel
({
frame: true,
url:backendURL,
applyTo:'content',
items: [{
layout: 'column',
border: false,
},
Parent_Sub_ID,
Group_Checker,
Comments,
Assign_Permissions,
Add_Files,
],
buttons:[{
text: 'Save',
handler: ajax_validate_parent
},{
text: 'Submit',
handler: ajax_validate_parent
}]

}); //End actual form creation

} //End onReady function parameter

); //End onReady

//public space
return
{
// init: function() //This call is giving me troubles.
// {
// alert('Application successfully initialized');
// this.callAjax();
// },
};

}(); //End of namespace

Any suggestions as to why this is happening? Please note that at this time, I am running ext-2.2 (looking into updating very soon) and my debugging has been purely based on commenting within nano. I cannot use Firebug at this time.

Thanks for your help!

Kevin