PDA

View Full Version : Help with simple ui



Trio87
22 Apr 2010, 4:42 PM
hi all,
i am a new user of ExtJS. i tried to make a simple ui for a web page whith a formpanel containing 2 other formpanels (copying most of code from this site's samples :P). is what i want to do possible? if it is this is the code i wrote/pasted:


Ext.onReady(function(){

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

var bd = Ext.getBody();





Ext.QuickTips.init();

var frasepisciosa0 = 'ciao mamma guarda che frase pisciosa che ho....<br/>accapo<br/><b>grassetto</b> - <i>corsivo</i>';
var frasepisciosa1 = 'parte 1 della frase pisciosa II<br>';
frasepisciosa1 += 'e qua accapo la parte 2';

bd.createChild({tag: 'div id="div0" class="x-hide-display"', html: frasepisciosa0});
bd.createChild({tag: 'div id="div1" class="x-hide-display"', html: frasepisciosa1})

var tabs = new Ext.TabPanel({
renderTo: 'tabs1',
region: 'south',
width:450,
activeTab: 0,
frame: true,
defaults:{autoHeight: true},
items:[
{contentEl: 'div0', title: 'Short Text'},
{contentEl: 'div1', title: 'Long Text'}
]
});


/*
* ================ Simple form =======================
*/
bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});

var simple = new Ext.FormPanel({
region: 'west',
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
})
],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

simple.render(document.body);



/*
* ================ Form 2 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});

var fsf = new Ext.FormPanel({
region: 'center',
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form with FieldSets',
bodyStyle:'padding:5px 5px 0',
width: 350,

items: [{
xtype:'fieldset',
checkboxToggle:true,
title: 'User Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
collapsed: true,
items :[{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}
]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}
]
}],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

fsf.render(document.body);



bd.createChild({tag: 'win', html: 'Trio\'s window'});

var win = new Ext.FormPanel({
layout: 'border',
title: 'FormPanel',
closable:true,
width:1000,
autoHeight: true,
border:true,
plain:true,
collapsible: true,

items: [simple, fsf]

});

win.render(document.body);

});
html is:


<html>
<head>

<link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../lib/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="interface2.js"></script>
<!--<link rel="stylesheet" type="text/css" href="../shared/examples.css" />-->
</head>
<body>
<div id="tabs1"></div>
<br/>
<br/>
<br/>
<!--<div id="interface"></div>--->
<!--<input type="button" id="show-btn" value="Show Window"/>--->

</body>
</html>
i visualize all items to be sure they are well done and than i want to visualize the container formpanel but it's empty...
where is the error?
how can i do to get what i want?

thanks to all answerers

Trio

Animal
23 Apr 2010, 12:10 AM
Let's take this step by step.

What do the API docs for the "render" method tell you?

Trio87
23 Apr 2010, 2:55 AM
thank you very much animal...you were right!
I thank you again for the answer but i found that i get a best goal using a Viewport instead of the FormPanel container.

Now i'm founding troubles with grids...

http://www.extjs.com/deploy/dev/examples/grid/array-grid.html
this is the easiest sample of a grid but i am not able to make it work!!!(i only pasted code changing script's path)
am i the only one?

Nytrm
23 Apr 2010, 3:01 AM
am i the only one?
http://www.extjs.com/learn/Tutorials check this out =)

murkrishna
23 Apr 2010, 3:07 AM
can you paste the code?



thank you very much animal...you were right!
I thank you again for the answer but i found that i get a best goal using a Viewport instead of the FormPanel container.

Now i'm founding troubles with grids...

http://www.extjs.com/deploy/dev/examples/grid/array-grid.html
this is the easiest sample of a grid but i am not able to make it work!!!(i only pasted code changing script's path)
am i the only one?

Trio87
23 Apr 2010, 3:23 AM
murkrishna my code is exactly the code found in the samples section of this site...i only changed the path of the script (cause my html file is in a folder)!