Changing or adding elements to a form dynamically [Archive]

whimsica

31 Jan 2011, 8:27 AM

I'm trying to figure out how to change extjs code of movie-form below on the fly using some javascript -- like add a menu item or button to a form dynamically. I was hoping to just access the extjs element then use some ext core functions to change things.

Problem 1: The movie-form form shows properly until I add the ext-core.js package then it disappears. I get no error in the firefox console though...I read that the ext-core packages are necessary to change values or alter elements in the example below. What am I doing wrong?

Problem 2: Can someone post an example of adding something to movie-form or changing a value in movie-form. I can't seem to get either of these to work.

Thanks,

Dan

<html>

<head>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="pkgs/ext-core.js"></script>

</head>
<body>

<div id="joe"></div>

</body>
</html>

<script>
//javascript:alert(Ext.get(movie_form))
Ext.onReady(function(){
var movie_form = new Ext.FormPanel({
url: 'movie-form-submit.php',
renderTo: joe,
frame: true,
title: 'Movie Information Form',
width: 250,
items: [{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title'
},{
xtype: 'textfield',
fieldLabel: 'Director',
name: 'director'
},{
xtype: 'datefield',
fieldLabel: 'Released',
name: 'released'
}]
});
});
</script>

danguba

1 Feb 2011, 7:41 AM

If U R including ext-all.js U don't need to include ext-core since it is already in ext-all.

to add field to a form just use add method (http://dev.sencha.com/deploy/dev/docs/?class=Ext.Container&member=add)

movie_form.add({
xtype: 'textfield',
fieldLabel: 'New Field'
});
movie_form.doLayout();