PDA

View Full Version : problem with scroll



ing.amdangelo
15 Dec 2011, 5:48 AM
I' have a Windows with a Content Panel, into the content Panel i've 4 collapsed Panel, in one of this panel ethere's a editor grid panel
Well, the scroll for the windows appear, the scroll of the editor editor not appears ....

Any suggest ??

// Creazione della finestra per creare un nuovo convegno
function creaConv() {


Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';




// Origine dati con l'elenco di tutti comuni e relative provincie
var strComuni = new Ext.data.XmlStore({
url: 'ajax.asmx/getAllProvincie',
record: 'Provincia',
baseParams: [],
fields: ['nome', 'sigla'],
autoLoad: true
});




var strComuniDaProvincia = new Ext.data.XmlStore({
url: 'ajax.asmx/getComuniFromProvincia',
record: 'Comune',
//baseParams: [],
fields: ['nome']
//autoLoad: true,
//pruneModifiedRecords: true
});


var cmbProvince = new Ext.form.ComboBox({
id: 'provincia',
name: 'provincia',
store: strComuni,
valueField: 'nome',
style: 'margin-left: 5px;',
fieldLabel: 'Provincia',
displayField: 'sigla',
emptyText: 'Seleziona una Provincia',
triggerAction: 'all',
mode: 'local',
editable: true,
//width: 170,
allowBlank: false,
blankText:'Selezionare una Provincia'
});


var cmbComuni = new Ext.form.ComboBox({
id: 'Comune',
name: 'comune',
store: strComuniDaProvincia,
fieldLabel: 'Comune',
emptyText: 'Seleziona un Comune',
valueField: 'nome',
displayField: 'nome',
triggerAction: 'all',
disabled:true,
editable: true,
width: 195,
allowBlank: false,
blankText:'Selezionare un Comune',
mode:'local'
});


var testoCosto = new Ext.form.TextArea({
id: 'testoCosto',
name: 'testoCosto',
fieldLabel: 'Testo pagam.',
disabled: true,
anchor: '92%',
style: 'margin-top: 5px;margin-left: 5px;'
});


// Nomi dei giorni e relativo array
var arrGiorni = new Array();


arrGiorni.push("D");
arrGiorni.push("L");
arrGiorni.push("M");
arrGiorni.push("M");
arrGiorni.push("G");
arrGiorni.push("V");
arrGiorni.push("S");


var txtCosto = new Ext.form.NumberField({
id: 'costo',
name: 'costo',
fieldLabel: 'Costo',
allowBlank: false,
disabled: true,
blankText: 'Inserire il Costo',
decimalPrecision: 2,
value: '0.00',
width: 90
});


txtCosto.on('change', function (item, newValue, precValue) {
if (newValue > 0) {
Ext.getCmp('testoCosto').enable();
}
else {
Ext.getCmp('testoCosto').disable();
}
});


//Pannello dell'Avviso sulle Adesioni
var panelNotes = new Ext.Panel({
border: false,
bodyStyle: "background:transparent",
style: 'margin-top: 30px;',
items: [
{
xtype: 'label',
style: 'color: #FF0000; font-size: 10px',
text: '* vuoto per adesioni illimitate'
}
]
});




//Pannello Centrale del Pannello dei Settings
var panelSettingsMiddle = new Ext.Panel({
layout: 'column',
bodyStyle: "background:transparent",
style: 'margin-top: 5px;',
labelAlign: 'left',
border: false,
items: [
{
xtype: 'panel',
columnWidth: 0.7,
style: 'margin-top: 10px;',
border: false,
layout: 'form',
items: [
{
xtype: 'container',
layout: 'column',
anchor: '100%',
items: [
{
xtype: 'container', // 3
layout: 'form',
columnWidth: 0.5,
labelWidth: 100,
items: [
cmbProvince
]
},
{
xtype: 'container', // 5
layout: 'form',
labelWidth: 94,
columnWidth: 0.5,
items: [
cmbComuni
]
}]
},
testoCosto,
{
xtype: 'container',
layout: 'column',
columnWidth: 0.5,
style: 'margin-top: 10px;',
items: [{
xtype: 'container',
layout: 'form',
columnWidth: 0.25,
items: [
{
name: 'minisito',
id: 'minisito',
fieldLabel: 'Minisito',
xtype: 'checkbox',
checked: true
}
]
},
{
xtype: 'container',
layout: 'form',
columnWidth: 0.25,
items: [
{
name: 'adesione',
id: 'adesione',
fieldLabel: 'Adesione',
xtype: 'checkbox',
checked: true
}
]
},
{
xtype: 'container',
layout: 'form',
columnWidth: 0.25,
items: [
{
name: 'pagamento',
id: 'pagamento',
fieldLabel: 'Pagamento',
xtype: 'checkbox',
checked: false
}]
},
{
xtype: 'container',
layout: 'form',
columnWidth: 0.25,
items: [
{
name: 'mappa',
id: 'mappa',
fieldLabel: 'Mappa',
xtype: 'checkbox',
checked: true
}]
}
]
}
]
},
{
xtype: 'panel',
columnWidth: 0.3,
style: 'margin-top: 10px;',
border: false,
anchor: '100%',
items: [
{
xtype: 'container',
layout: 'form',
border: false,
labelWidth: 100,
items: [
{
name: 'data',
xtype: 'datefield',
cancelText: 'Annulla',
dayNames: arrGiorni,
nextText: 'Mese successivo (CTRL + destra)',
prevText: 'Mese precedente (CTRL + sinistra)',
showToday: false,
startDay: 1,
format: 'd/m/Y',
disabledDatesText: "Festivo",
disabledDates: ["25/12", "08/12", "01/01", "01/11"],
allowBlank: false,
blankTest: 'Selezionare una Data',
editable: false,
fieldLabel: 'Data'
}
]
},
{
xtype: 'container',
layout: 'column',
anchor: '100%',
items: [
{
xtype: 'container', // 3
layout: 'form',
style: 'margin-top: 10px;',
columnWidth: 0.5,
labelWidth: 60,
items: [
{
fieldLabel: 'Ora Inizio',
id: 'oraIni',
name: 'oraIni',
xtype: 'timefield',
format: 'H:i',
value: '9:00',
allowBlank: false,
width: 65
}
]
},
{
xtype: 'container', // 5
layout: 'form',
labelWidth: 50,
style: 'margin-top: 10px;',
columnWidth: 0.5,
items: [
{
fieldLabel: 'Ora Fine',
id: 'oraFin',
name: 'oraFin',
xtype: 'timefield',
format: 'H:i',
value: '18:00',
allowBlank: false,
width: 65
}
]
}]
},
{
xtype: 'container',
layout: 'form',
style: 'margin-top: 10px;',
labelWidth: 100,
items: [
{
xtype: 'numberfield',
decimalPrecision: 0,
fieldLabel: 'Max Adesioni*',
name: 'limiteAdesioni',
id: 'limiteAdesioni',
width: 90
},
txtCosto,
{
xtype: 'numberfield',
fieldLabel: 'Crediti',
name: 'crediti',
id: 'crediti',
//allowBlank: false,
//blankText: 'Inserire il numero di crediti',
value: '0',
width: 90
}
]
},
panelNotes
]
}
]
});
// Quando seleziono la Provincia carico la combo dei comuni con i comuni della provincia selezionata
cmbProvince.on('select', function (item, Value) {
var provincia = Ext.getCmp('provincia').getValue();
cmbComuni.store.setBaseParam("provincia", provincia);
cmbComuni.store.load({ params: {},
callback: function (r, options, success) {
if (success) {
cmbComuni.clearValue();
cmbComuni.enable();
}
}
});
});






//Secondo Pannello (Gestione Programma)


// Store del programma
var strProgramma = new Ext.data.ArrayStore({
fields: [
'oraEventoProgramma',
'eventoProgramma',
'btnModifica',
'btnElimina'
]
});








var grdProgramma = new Ext.grid.EditorGridPanel({
id: 'grigliaProgramma',
store: strProgramma,
loadMask: true,
autoScroll:true,
stripeRows: false,
style: 'margin-left: 10px;',
autoExpandColumn: 'eventoProgramma',
clicksToEdit: 1,
disableSelection: false,
ddGroup: 'programma-dd',
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
enableDragDrop: true,
ddText: 'Sposta evento',
columns: [
{
id: 'oraEventoProgramma',
name: 'oraEventoProgramma',
header: 'Ora',
dataIndex: 'oraEventoProgramma',
sortable: true
// editor: new Ext.form.TimeField({
// allowBlank: false,
// format: 'H:i'
// })
},
{
id: 'eventoProgramma',
name: 'eventoProgramma',
header: 'Testo',
dataIndex: 'eventoProgramma'
},
{
id: 'modificaEvento',
name: 'modificaEvento',
width: 30
},
{
id: 'eliminaEvento',
name: 'eliminaEvento',
width: 30
}
]
});


var ddrow = null;


grdProgramma.on('render', function() {
ddrow = new Ext.dd.DropTarget(grdProgramma.getView().mainBody, {
ddGroup: 'programma-dd',
notifyDrop: function(dd, e, data) {
var sm = grdProgramma.getSelectionModel();
var rows = sm.getSelections();
var cindex = dd.getDragData(e).rowIndex;
if (sm.hasSelection()) {
for (i = 0; i < rows.length; i++) {
strProgramma.remove(strProgramma.getById(rows[i].id));
strProgramma.insert(cindex, rows[i]);
}
sm.selectRecords(rows);
}
}
});
});


oraProgrammaStep2 = new Ext.form.TimeField({
id: 'oraIntervento',
name: 'oraIntervento',
fieldLabel: 'Ora',
width: 60,
format: 'H:i',
allowBlank: false
});






var voceProgrammaHtml = new Ext.Panel({
layout:'form',
id: 'voceProgrammaPanel',
name: 'voceProgrammaPanel',
bodyStyle: "background:transparent",
border: true,
style: 'margin-top: 10px; margin-bottom: 10px;',
defaultType: 'textfield',
labelAlign: 'left',
items: [{
xtype:'textarea',
id: 'voceProgrammaHtml',
name: 'voceProgrammaHtml',
fieldLabel: 'Descrizione',
allowBlank: false,
height: 100,
width: 647
}]
});


chkDisabOra = new Ext.form.Checkbox({
style: 'margin-top: 3px;',
fieldLabel: 'Disabilita Ora',
handler: function(elem, checked) {
if (checked) {
oraProgrammaStep2.disable();
}
else {
oraProgrammaStep2.enable();
}
}
});


btnAggiungi = new Ext.Button({
text: '↓ Aggiungi ↓',
id: 'btnAggiungi',
name: 'btnAggiungi',
style: 'margin-right: 310px;',
handler: function (_this, _event) {
if (pnlProgramma.getForm().isValid()) {
// Gestisco eventi con l'orario e senza
var errore='';
var oraEvento = '';


if (!chkDisabOra.getValue()) {
oraEvento = Ext.get('oraIntervento').dom.value;
}


// Recupero il testo dell'intervento
var testoIntervento = Ext.get('voceProgrammaHtml').dom.value;


// Creo il record da inserire
var record = new grdProgramma.store.recordType(
{
oraEventoProgramma: oraEvento,
eventoProgramma: testoIntervento,
btnElimina: '<img src="css/img/dialog_close.png" onclick="eliminaEvento();" />',
btnModifica: '<img src="css/img/pencil.png" onclick="modificaEvento();" />'
}
);
// Inserisco l'evento
grdProgramma.store.add(record);
//strProgramma.sort('oraEventoProgramma', 'ASC');
if (errore!='') { finestraAvviso("Form non Valido",errore);}
}
else {
finestraAvviso("Dati evento mancanti", "Inserire i dati mancanti per l'evento.");
}
}
});
btnModifica = new Ext.Button({
text: 'Modifica',
id: 'btnModifica',
name: 'btnModifica',
hidden: true,
handler: function (_this, _event) {
if (pnlProgramma.getForm().isValid()) {
// Gestisco eventi con l'orario e senza
var oraEvento = '';


if (!chkDisabOra.getValue()) {
oraEvento = Ext.get('oraIntervento').dom.value;
}


// Recupero il testo dell'intervento
var testoIntervento = Ext.get('voceProgramma').dom.value;


// Creo il record da inserire
var record = new grdProgramma.store.recordType(
{
oraEventoProgramma: oraEvento,
eventoProgramma: testoIntervento,
btnElimina: '<img src="css/img/dialog_close.png" onclick="eliminaEvento();" />',
btnModifica: '<img src="css/img/pencil.png" onclick="modificaEvento();" />'
}
);


btnAggiungi.show();
btnModifica.hide();
btnAnnulla.hide();
var griglia = Ext.getCmp('grigliaProgramma');
griglia.enable();


// Creo l'evento
var storeDaModificare = grdProgramma.getStore();
var idRecordDaModificare = storeDaModificare.indexOf(recordDaModificare);
storeDaModificare.remove(recordDaModificare);
storeDaModificare.insert(idRecordDaModificare, record);
}
else {
finestraAvviso("Dati evento mancanti", "Inserire i dati mancanti per l'evento.");
}
}
});
btnAnnulla = new Ext.Button({
text: 'Annulla',
id: 'btnAnnulla',
name: 'btnAnnulla',
style: 'margin-right: 270px;',
hidden: true,
handler: function() {
btnAggiungi.show();
btnModifica.hide();
btnAnnulla.hide();
grdProgramma.enable();
}
});


var frmDisabilitaOra = new Ext.Panel({
//bodyStyle: "background:#DFE8F6",
bodyStyle: "background:transparent",
border: true,
width: 200,
layout:'form',
style: 'margin-top: 10px; margin-bottom: 10px;',
defaultType: 'textfield',
labelAlign: 'left',
items: [
{
xtype: 'container',
layout: 'column',
anchor: '100%',
items: [
{
xtype: 'container', // 3
layout: 'form',
columnWidth: 0.5,
labelWidth: 20,
items: [oraProgrammaStep2]
},
{
xtype: 'container', // 5
layout: 'form',
labelWidth: 80,
columnWidth: 0.5,
items: [chkDisabOra]
}
]
}]
});


var pnlProgramma = new Ext.form.FormPanel({
id: 'frmNewInterv',
name: 'frmNewInterv',
border:true,
style: 'margin-left: 10px;',
items: [
frmDisabilitaOra,
voceProgrammaHtml
],
buttons: [
btnAggiungi,
btnModifica,
btnAnnulla
]
});


var pannelloCreazioneProgramma = new Ext.Panel({
id: 'pnlCreazioneProgramma',
title: 'Programma',

bodyStyle: "background:transparent",
collapsible: true,
collapsed:true,
items: [pnlProgramma, grdProgramma]
});




// Pannello Gestione Mappa
var pannelloCreazioneMappa = new Ext.Panel({
id: 'pnlCreazioneMappa',
title: 'Mappa',
bodyStyle: "background:transparent",
collapsible: true
});


// Gestione checkbox
var checkMinisito = Ext.getCmp('minisito');
var checkAdesione = Ext.getCmp('adesione');
var checkPagamento = Ext.getCmp('pagamento');
var checkMappa = Ext.getCmp('mappa');




checkMinisito.on('check', function (item, newValue, precValue) {
if (newValue == true) {
checkAdesione.enable();
checkPagamento.enable();
checkMappa.enable();
}
else {
checkAdesione.reset();
checkPagamento.reset();
checkAdesione.disable();
checkPagamento.disable();
checkMappa.reset();
checkMappa.disable();
}
});


checkPagamento.on('check', function (item, newValue, precValue) {
if (newValue == true) {
txtCosto.enable();
}
else {
txtCosto.disable();
}
});


checkAdesione.on('check', function (item, newValue, precValue) {
var limAdesioni = Ext.getCmp('limiteAdesioni');
if (newValue == true) {
limAdesioni.enable();
}
else {
limAdesioni.disable();
}
});


checkMappa.on('check', function (item, newValue, precValue) {
var pnlMappa = Ext.getCmp('pnlMappa');
if (newValue == true) {
pnlMappa.enable();
}
else {
pnlMappa.disable();
pnlMappa.collapse();
}
});


var pannelloCreazioneSettings = new Ext.Panel({
id: 'pnlSettings',
title:'Convegno',
layout: 'form',
collapsible:true,
bodyStyle: "background:transparent",
labelAlign: 'left',
items: [
new Ext.form.TextField({
id: 'Titolo',
name: 'titolo',
fieldLabel: 'Titolo',
style: "margin-top: 5px;margin-left: 5px;",
anchor: '92%',
allowBlank: false,
blankText: 'Inserire il Titolo'
}),
new Ext.form.TextField({
id: 'Sottotitolo',
name: 'descrizione',
fieldLabel: 'Sottotitolo',
style: "margin-top: 5px;margin-left: 5px;",
anchor: '92%',
allowBlank: false,
blankText: 'Inserire il Sottotitolo'
}),
new Ext.form.TextArea({
name: 'luogo',
fieldLabel: 'Indirizzo',
style: "margin-top: 5px;margin-left: 5px;",
anchor: '92%',
allowBlank: false,
blankText: 'Inserire l\'Indirizzo'
}),
panelSettingsMiddle
]
});













var pannelloCreazioneLoghi = new Ext.Panel({
id: 'pnlCreazioneLoghi',
title: 'Loghi',
bodyStyle: "background:transparent",
collapsible: true
});






var PannelloCreazione = new Ext.Panel({
id: 'pnlCreazione',
frame: true,
layout:'fit',
items: [pannelloCreazioneSettings, pannelloCreazioneProgramma, pannelloCreazioneLoghi, pannelloCreazioneMappa],
fbar: {
items: ['->',
{
xtype: 'button',
text: 'Salva',
id: 'btnSalva',
name: 'btnSalva'
},
{
xtype: 'button',
text: 'Annulla',
id: 'btnAnnulla',
name: 'btnAnnulla'
}
]
}
});






// Finestra per la creazione dei convegni
finCreaConv = new Ext.Window({
title: 'Creazione nuovo convegno',
closable: true,
autoScroll:true,
width: 1000,
height:800,
modal: true,
resizable: false ,
items: [PannelloCreazione]
});


// Visualizzazione della finestra
finCreaConv.show();
finCreaConv.center();
}


function eliminaEvento() {
// Griglia contenente il programma
var griglia = Ext.getCmp('grigliaProgramma');


var recordDaEliminare = griglia.getSelectionModel().getSelected();
griglia.getSelectionModel().clearSelections();
griglia.getStore().remove(recordDaEliminare);
}

mitchellsimoens
16 Dec 2011, 8:53 AM
I'm not going through that much code (especially since it's not wrapped in code tags)... autoScroll?