PDA

View Full Version : portal example



software_Engineer
29 Nov 2011, 5:29 AM
Hi guys,
i'm new of extjs. so I'm sorry if I'll do some dummy questions.
My question : For a test I'm trying portal example (from extjs examples). In one portlet (with title: 'Weight ') I'm trying to add a simple form with two text boxes .....
In the portal.js I have :


// cut ....
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [{
id: 'Weight',
title: 'Weight ',
tools: this.getTools(),
items: Ext.create('Ext.app.PortalColumn'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
// to be continued ....

instead in the PortalColumn.js I have :


Ext.define('Ext.app.PortalColumn', {
extend: 'Ext.app.Module',
autoHeight: true
initComponent: function(){
this.launcher = {
text: 'Peso Paziente',
iconCls:'tabs',
handler : this.createWindow,
scope: this
}
},
createWindow: function() {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('wei-win');


var nameAndCompany = {
columnWidth: .5,
layout: 'form',


items: [{
xtype: 'fieldset',
title: 'Peso',
autoHeight: true,
style: 'margin: 0px 5px;',
defaultType: 'textfield',


items: [{
xtype: 'datefield',
fieldLabel: 'date',
name: 'date',
id:'date',
allowBlank: false,
anchor: '95%'
},{
xtype: 'timefield',
fieldLabel: 'time',
name: 'time',
format:'H:i',
increment: 30,
allowBlank: false,
id:'time',
anchor: '95%'
},{
xtype : 'numberfield',
fieldLabel: 'value',
name: 'value',
allowBlank: false,
id: 'value',
anchor: '95%'
}]
}]
};


var contactForm = new Ext.FormPanel({
url: '<?php echo site_url('weight/getData');?>',
method:'POST',
width:550,
frame: true,
bodyStyle:'padding:5px',
monitorValid:true,
items:[{
bodyStyle: { margin: '0px 0px 15px 0px' },
items: [{
layout: 'column',
items: [nameAndCompany]
}]
},{
inputType: 'hidden',
id: 'changed',
name: 'changed',
value: 0
}],


buttons:[{
text:'Add Weight',
formBind: true,
handler:function() {
contactForm.getForm().submit({
url: '<?php echo site_url('weight/setData');?>',
method:'POST',
waitTitle:'Aggiornamento',
waitMsg:'Aggiornamento in corso',

// Functions that fire (success or failure) when the server responds.
success:function(){
Ext.Msg.show({
title:'Weight',
msg: 'Aggiornamento completato.',
buttons: Ext.Msg.OK,
fn: function(){
win.close();
},
animEl: 'elId',
icon: Ext.MessageBox.INFO
});
},


// Failure function.
failure:function(form, action){
var errm;
if(action.failureType == 'server'){
var obj = Ext.util.JSON.decode(action.response.responseText);
errm = obj.errors.reason;
}else{
errm = 'Server non raggiungibile: ' + action.response.responseText;
}
Ext.Msg.show({
title:'Errore',
msg: errm,
buttons: Ext.Msg.OK,
fn: function(){
contactForm.load({
waitMsg: 'Ripristino dei dati...',
waitTitle: 'Peso'
});
},
animEl: 'elId',
icon: Ext.MessageBox.ERROR
});
}
});
}
},{
text: 'Annulla',
handler: function() {
win.close();
}
}],
listeners:{
actioncomplete: function(form, action){
if(action.type == 'load'){
var contact = action.result.data;
//win.setTitle('Anagrafica - ' + contact.firstname + ' ' + contact.lastname);
}
}
}
});


if(!win){
win = desktop.createWindow({
id: 'wei-win',
title:'Peso',
// autoWidth:true,
width:560,
autoHeight:true,
iconCls: 'tabs',
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,
resizable: false,
layout: 'form',
items: [contactForm],
listeners: {
afterrender: function(){
contactForm.load({
waitMsg: 'Caricamento in corso...',
waitTitle: 'Peso'
});
}
}
});
}
win.show();
}
});


but in the portal I see the "Weight" empty ....
can you help me ?

mitchellsimoens
29 Nov 2011, 7:09 AM
Are you using the sandbox where you are using Ext JS 3 and Ext JS 4 together?

initComponent method is used throughout the framework so when you use it, you should also call it's parent:


this.callParent(arguments);

software_Engineer
29 Nov 2011, 11:34 AM
Mitchell,
thanks a lot. I put this.callParent(arguments); as you said but nothing.

any suggestions ?
many thanks.

tobiu
29 Nov 2011, 12:41 PM
seriously, i have no clue what you are trying to do and see a bunch of mistakes.

you specify an anonymous object inside the initComponent (this.launcher). how shall the handler get executed?

why do you create a portal with a portal column and as an item another column instead of a portlet?

extending the column makes no sense as long as you do not want to change the behaviour. creating portlets is the way to go.

take a closer watch what the example is doing and how it works.

software_Engineer
30 Nov 2011, 3:45 AM
ok, thanks.
So, from the original portal example in the portal-js I'd like to add in the PortalColumn class one text box ... can I ? :


Ext.define('Ext.app.Portal', {


extend: 'Ext.container.Viewport',


uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],


getTools: function(){
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool){
var portlet = panelHeader.ownerCt;
portlet.setLoading('Working...');
Ext.defer(function() {
portlet.setLoading(false);
}, 2000);
}
}];
},


initComponent: function(){
var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';


Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5' // pad the layout from the window edges
},
items: [{
id: 'app-header',
xtype: 'box',
region: 'north',
height: 40,
html: 'Ext Portal'
},{
xtype: 'container',
region: 'center',
layout: 'border',
items: [{
id: 'app-options',
title: 'Options',
region: 'west',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
split: true,
collapsible: true,
layout: 'accordion',
layoutConfig:{
animate: true
},
items: [{
html: content,
title:'Navigation',
autoScroll: true,
border: false,
iconCls: 'nav'
},{
title:'Settings',
html: content,
border: false,
autoScroll: true,
iconCls: 'settings'
}]
},{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [{
id: 'portlet-1',
title: 'Grid Portlet',
tools: this.getTools(),
items: Ext.create('Ext.app.GridPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
},{
id: 'portlet-2',
title: 'Portlet 2',
tools: this.getTools(),
html: content,
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
title: 'Portlet 3',
items: Ext.create('Ext.app.PortalColumn'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-3',
items: [{
id: 'portlet-4',
title: 'Stock Portlet',
tools: this.getTools(),
items: Ext.create('Ext.app.ChartPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}]
}]
}]
});
this.callParent(arguments);
},


onPortletClose: function(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
},


showMsg: function(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();


this.msgId = msgId;
el.update(msg).show();


Ext.defer(this.clearMsg, 3000, this, [msgId]);
},


clearMsg: function(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
});

and the PortalColumn class (in PortalColumn.js)

Ext.define('Ext.app.PortalColumn', {
extend: 'Ext.container.Container',
alias: 'widget.portalcolumn',
layout: {
type: 'form'
},
defaultType: 'portlet',
cls: 'x-portal-column',
autoHeight: true
//
// This is a class so that it could be easily extended
// if necessary to provide additional behavior.
//
initComponent: function(){
this.launcher = {
text: 'Peso Paziente',
iconCls:'tabs',
handler : this.createWindow,
scope: this
}
}
});




How can I add a simple text box in this class so that to view it in the portal. As you can see I tried to do in previous way but it doesn't work.
many thanks.

juanb
30 Nov 2011, 4:18 AM
i have an idea, why don't you draw what you are trying to accomplish cause from the text it's not very clear whats the ponit

like:


Col1
(text Field)
Col2
(text Field)
Col3
(text Field)

software_Engineer
30 Nov 2011, 4:25 AM
I's simple ... starting from portal example :

http://dev.sencha.com/deploy/ext-4.0.0/examples/portal/portal.html


in the "Portlet 3" I'd like to put a form like :
name --> textBox
surname --> textBox

That's all ..

really thaks.


(http://dev.sencha.com/deploy/ext-4.0.0/examples/portal/portal.html)

juanb
1 Dec 2011, 7:06 AM
in portlet3 replace:


html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',

with


items:Ext.create('Ext.form.Panel',{.....


hope it helps.