PDA

View Full Version : button disable



_PASCAL_
3 Jul 2012, 12:16 PM
Hi,

I have written some code to display an wizard to create an bill.

there are 2 buttons to move prev/next which I have to "enable" or "disable" according to the shown wizard tab.

My Problem is that the first "btn.setDisabled(true/false)" works greate ... after the secord the button always looks like the mouse hoover is active but why? right button on Dock bottom.
36768

Here's the right showing
36769

I tried to check whether the btn.isDisabled() before btn.enable() but that also doesn't work.

greetings

affiliateWise
3 Jul 2012, 12:51 PM
Well there could be a few reasons as to why that is happening, although it will be a little hard to try and tell you without seeing how you coded it. If you could post the code you are using to accomplish this then I could give a better answer.

Are you setting the buttons with the bbar or are you creating your own buttons attributes variable?

_PASCAL_
3 Jul 2012, 1:13 PM
yes you are right but i thought that problem is well known

i created the buttons with bbar and then with Ext.getCmp('')

here an example view
36771

here are my two files ... createView and calcCon :


Ext.define('gfa.view.CreateView', {
extend: 'Ext.form.Panel',
alias: 'widget.createview',
layout: 'fit',
id: 'CreateView',

stores: ['HourNoCalc','ClientNumber'],

initComponent: function() {

var me = this;

var client_store = new gfa.store.ClientNumber;
client_store.load({
params:{
session_id: gfa.gfaGlobals.session_ID
}
});

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*'
]);

// Column Model shortcut array
var columns = [{
xtype: 'datecolumn',
text: "Arbeitstag",
format: 'd.m.Y',
flex: 3,
sortable: true,
menuDisabled: true,
dataIndex: 'date',
hideCollapseTool: true
},{
xtype: 'datecolumn',
header: "Anfang",
format: 'H:i',
flex: 2,
sortable: false,
menuDisabled: true,
dataIndex: 'starttime',
hideCollapseTool: true
},{
xtype: 'datecolumn',
header: "Ende",
format:'H:i',
flex: 2,
sortable: false,
menuDisabled: true,
dataIndex: 'stoptime',
hideCollapseTool: true
},{
text: "Autohaus",
sortable: false,
menuDisabled: true,
flex: 6,
dataIndex: 'client'
}];

// create the data store
var sourceGridStore = new gfa.store.HourNoCalc;

var destinationGridStore = Ext.create('Ext.data.Store', {
model: gfa.model.HourMod
});

var sourceGrid = Ext.create('Ext.grid.Panel', {
multiSelect: true,
id: 'create_source_grid',
hideCollapseTool: true,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'firstGridDDGroup',
dropGroup: 'secondGridDDGroup'
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
},
itemclick: function(self, store_record, html_element, node_index, event){

var dest_store = Ext.getCmp('create_destination_grid').getStore();
dest_store.add(store_record);
self.getStore().remove(store_record);

var next = Ext.getCmp('create_move_next');

if(dest_store.count() > 0){
if(next.isDisabled())
next.enable();
}else{
if(!next.isDisabled())
next.disable();
}

}
}
},
store : sourceGridStore,
columns : columns,
stripeRows : true,
title : 'nicht verrechnete Arbeitstage',
margins : '0 2 0 0'
});

// create the destination Grid
var destinationGrid = Ext.create('Ext.grid.Panel', {
id: 'create_destination_grid',
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'secondGridDDGroup',
dropGroup: 'firstGridDDGroup'
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
},
itemclick: function(self, store_record, html_element, node_index, event){

var source_store = Ext.getCmp('create_source_grid').getStore();
source_store.add(store_record);
self.getStore().remove(store_record);

var next = Ext.getCmp('create_move_next');

if(self.getStore().count() > 0){
if(next.isDisabled())
next.enable();
}else{
if(!next.isDisabled())
next.disable();
}

}
}
},
store : destinationGridStore,
columns : columns,
stripeRows : true,
title : 'zu verrechnende Arbeitstage',
margins : '0 0 0 3'
});

Ext.applyIf(me, {

items: [{
id: 'create_wizard',
xtype: 'panel',
layout: 'card',
bodyStyle: '15px',
defaults: {
border: false,
bodyStyle: {
background: gfa.gfaGlobals.panelBackground
}
},

items: [{
id: 'wiz1',
bodyPadding: '30px',
layout:{
type: 'vbox',
align: 'center'
},
items:[{
xtype: 'label',
margin: '40 0 10 0',
text: 'Bitte Autohaus auswählen ...'
},{
xtype: 'combobox',
id: 'create_combobox_client',
store: client_store,
name: 'client_id',
queryMode: 'local',
displayField: 'autohaus',
valueField: 'id',
allowBlank: false,
fieldLabel: 'Autohaus',
viewConfig:{
loadMask: false
},
listeners:{
select: function(combo, records, eOpts){

sourceGridStore.load({
params:{
session_id: gfa.gfaGlobals.session_ID,
client_id: combo.getValue()
},
text: ' ',
callback : function(options, success, response) {

var next = Ext.getCmp('create_move_next');

if(sourceGridStore.count() > 0){
if(next.isDisabled())
next.enable();
}else{
if(!next.isDisabled())
next.disable();
}

}

});

var rnummer = Ext.getCmp('rnummer_field');

Ext.Ajax.request({

params: {
session_id: gfa.gfaGlobals.session_ID
},

url: 'back/calc?action=NextCalc',

success: function(resp){

respData = Ext.JSON.decode(resp.responseText);

if (respData.success === true){

rnummer.setValue(respData.rnummer);

}
}
});


destinationGridStore.removeAll();

}
}
}]

},{

id: 'wiz2',
xtype: 'panel',
layout: 'fit',
defaults: {
border: false,
bodyStyle: {
background: gfa.gfaGlobals.panelBackground
}
},
dockedItems: [{
xtype: 'panel',
border: false,
bodyStyle: {
background: gfa.gfaGlobals.panelBackground
},
dock: 'top',
layout:{
type: 'hbox',
align: 'middle',
padding: 5
},
items:[{
xtype: 'label',
text: 'Rechnungsnummer:'
},{
xtype: 'textfield',
id: 'rnummer_field',
margin: '0 0 0 10'
}]
}],
items: [{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch',
padding: 5
},
defaults: {
flex: 1
},
items:[
sourceGrid,
destinationGrid
]
}]

}],

bbar: [{
id: 'create_move_prev',
text: 'zurück',
disabled: true,
listeners: {
click: function(btn){

var combo = Ext.getCmp('create_combobox_client');

destinationGridStore.removeAll();
sourceGridStore.load({
params:{
session_id: gfa.gfaGlobals.session_ID,
client_id: combo.getValue()
}
});
}
}
},'->',{
id: 'create_move_next',
text: 'weiter',
disabled: true
}]

}]

});

this.callParent();

}

});



and the Controller:


Ext.define('gfa.controller.CalcCon', {
extend: 'Ext.app.Controller',

refs:[{
ref: 'CalcView',
selector: '#calc'
}],

views: ['CalcView','CreateView'],

init: function() {

this.control({
'#calc_mainpanel':{
itemdblclick: this.getCalc
},
'#calc_button_add':{
click: this.onAddClicked
},
'#myActionCo':{
downloadclick: this.download_calc,
deleteclick: this.delete_calc
},
'#create_move_prev':{
click: this.navigate_down
},
'#create_move_next':{
click: this.navigate_up
}
});

},

onAddClicked: function(button , e, eOpts){

var win = Ext.create('Ext.Window', {
title: 'Rechnung - erstellen',
id: 'create_window',
width: 600,
height: 450,
modal: true,
resizable: false,
border: false,
layout: 'fit',
items: {
xtype: 'createview'
}
});

win.show();

},

getCalc: function(dv, record, item, index, e){

},

download_calc: function(grid, record) {

var rechNummer=record.get('rnummer');

var fp = new Ext.form.FormPanel({
type: 'pdf',
standardSubmit: true,
url: 'back/pdf?action=getPdf',
method: 'POST'

});

var baseParams = {
session_id: gfa.gfaGlobals.session_ID,
rnummer: rechNummer
};

if (!fp.paramsAdded) {
for (i in baseParams) {
fp.add({
xtype: 'hidden',
id: fp.id+'_'+i,
name: i,
value: baseParams[i]
});
}
fp.paramsAdded = true;
}

fp.form.submit();


},

delete_calc: function(grid, record, store) {

Ext.MessageBox.confirm('Löschen?','Rechnung "' + record.get('rnummer') + '" wirklich löschen?', function(btn){

var calc_id = record.get('id');

if(btn==='yes'){

Ext.Ajax.request({

params: {
session_id: gfa.gfaGlobals.session_ID,
calc_id: calc_id
},

url: 'back/calc?action=DeleteCalc',

success: function(resp){

respData = Ext.JSON.decode(resp.responseText);

if (respData.success === true){

store.remove(record);
store.load();

var hour_grid = Ext.getCmp("hour_grid");
var hour_store = hour_grid.getStore();
hour_store.load();

}

}

});

}

});

},

navigate_up: function(btn){

var panel = btn.up("panel");
var direction = "next";

var layout = panel.getLayout();

var btn_down = Ext.getCmp('create_move_prev');

if(btn.getText() != "fertig"){

layout[direction]();

if(!layout.getNext()){
btn.setText('fertig');
if(!btn.isDisabled())
btn.disable();
if(btn_down.isDisabled())
btn_down.enable();
}else{
btn.setText('weiter');
}

}else{

var store = Ext.getCmp('create_destination_grid').getStore();

var datar = new Array();
var jsonDataEncode = "";
var records = store.getRange();
for (var i = 0; i < records.length; i++) {
datar.push(records[i].get('id'));
}
jsonDataEncode = Ext.JSON.encode(datar);

var clientid = Ext.getCmp('create_combobox_client').getValue();
var rechNummer = Ext.getCmp('rnummer_field').getValue();

Ext.Ajax.request({

params: {
session_id: gfa.gfaGlobals.session_ID,
hour_ids: jsonDataEncode,
client_id: clientid,
rnummer: rechNummer
},

url: 'back/pdf?action=createPdf',

success: function(resp){

respData = Ext.JSON.decode(resp.responseText);

if (respData.success === true){

var grid = Ext.getCmp("calc_grid");
store = grid.getStore();

store.load();

var hour_grid = Ext.getCmp("hour_grid");
var hour_store = hour_grid.getStore();
hour_store.load();

}

}

});

var win = Ext.getCmp('create_window');
win.close();

}

},

navigate_down: function(btn){

var panel = btn.up("panel");
var btn_up = Ext.getCmp('create_move_next');

var direction = "prev";

var layout = panel.getLayout();

layout[direction]();

if(!layout.getPrev())
if(!btn.isDisabled())
btn.disable();

btn_up.setText('weiter');

}

});