PDA

View Full Version : New to Ext Js



Sumanth
24 Apr 2010, 12:10 AM
Hi guys,

Im very new to Ext Js.. some how i created a form in ext js but finding problems to writting user defined function .

here i would like to add a new user defined function outside the PageLoad fucntion which will handle the button event . so on clicking the button all the page validations should be done ..

Also can you please give provide me the code to connect to web server.


Please provide some examples for event handling ,,
here is my code , Please modify it.the letters in red are some thing i want to implement



<html>
<head>

<script type="text/javascript" language="javascript"></script>
<link rel="stylesheet" type="text/css" href="file:///C|/EXT JS/ext-3.2.0(2)/ext-3.2.0/resources/css/ext-all.css"
/> <!-- 1 -->
<script type="text/javascript"
src="file:///C|/EXT JS/ext-3.2.0(2)/ext-3.2.0/adapter/ext/ext-base.js"></script> <!-- 2 -->
<script type="text/javascript"
src="file:///C|/EXT JS/ext-3.2.0(2)/ext-3.2.0/ext-all-debug.js"></script>
<script type="text/javascript"> // 3
Ext.BLANK_IMAGE_URL = 'C:\EXT JS\ext-3.2.0(2)\ext-3.2.0\resources\images\default\s.gif';
</script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();




Ext.form.Field.prototype.msgTarget = 'side';
var test = Ext.get('div-1').value;
var bd = Ext.getBody();
var simple = new Ext.FormPanel({
labelWidth: 85,

renderTo:'suman',
region: 'center',
frame:true,
// monitorValid:true,
title: 'Tes Form',
bodyStyle:'padding:10px 10px 0',
width: 500,
height:300,
defaults: {width: 250},
defaultType: 'textfield',

items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},
{
fieldLabel:'Last Name',
name:'last',

},
{
fieldLabel: 'Customer Last Name',
name: 'last'
},{
fieldLabel: 'Address',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
})
],

buttons: [{
text: 'Submit',
id:'Save',
handleEvent:'click'
// formBind:true,
//handler:'sumanth',
//listeners: {click: call(a,e);},
name:'Save'
},{
text: 'Cancel'
},
{
text:'Reset',
vtype:'Reset'
}]
});


Ext.getCmp('Save').on('Click' function()
{
Ext.Msg.alert("inside the fucntion");
}


simple.render(document.body);













</script>
</head>
<body>

<div id="suman" align="center"></div>
</body>
</html>

tomalex0
25 Apr 2010, 3:39 AM
text:'Submit',
handler: function() {
simple .getForm().getEl().dom.action = 'url';
simple .getForm().getEl().dom.method = 'POST';
simple .getForm().submit({
method: 'POST',
waitMsg: 'Creating',

reset: false,
success: function() {

},
failure: function(form, action) {

},
scope: this
});
},