PDA

View Full Version : [CLOSED][B3] FormPanel buttons styling



westy
18 Apr 2011, 3:23 AM
In beta2 the buttons for a FormPanel in a Window had a suitable background, matching the panel.
Now it's white, i.e. the default window background.
25690



Ext.define('Blah.view.LoginPanel', {
extend: 'Ext.form.FormPanel',

config: {
loginFunction: undefined,
callback: undefined,
callbackScope: undefined
},

frame: true,
border: false,

cls: 'loginPanel',

bodyPadding: 10, // FIXME: Shouldn't need this when SASS compiles again, so can pick up style...

layout: 'anchor',
defaults: {
anchor: '100%',
labelSeparator: ' :',
labelWidth: 80
},

defaultType: 'textfield',
items: [
{
xtype: 'numberfield',
minValue: 0, //prevents negative numbers

// Remove spinner buttons, and arrow key and mouse wheel listeners
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false,

fieldLabel: 'Client Code',
name: 'clientId',
allowBlank: false,
allowDecimals: false
},
{
fieldLabel: 'Username',
name: 'username',
allowBlank: false
},
{
inputType: 'password',
fieldLabel: 'Password',
name: 'password',
allowBlank: false
}
],

buttons: [
{
text: 'Submit',
formBind: true, // only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
// getValues returns strings, so need to call getValue instead.
form.owner.getLoginFunction().call(
form.owner.getCallbackScope(),
form.findField('clientId').getValue(),
form.findField('username').getValue(),
form.findField('password').getValue(),
form.owner.getCallback()
);

var win = this.up('window');
if (win) {
win.close();
}
}
}
}
],

constructor: function(config) {
this.initConfig(config);
this.callParent(arguments);
}
});




Ext.define('Blah.view.LoginWindow', {
extend: 'Ext.window.Window',

requires: [
'Blah.view.LoginPanel'
],

title: 'Login',
width: 270,
frame: false,

config: {
loginFunction: undefined,
callback: undefined,
callbackScope: undefined
},

constructor: function(config) {
this.initConfig(config);
this.callParent(arguments);
},

initComponent: function() {
this.loginPanel = Ext.create('Blah.view.LoginPanel', {
loginFunction: this.getLoginFunction(),
callback: this.getCallback(),
callbackScope: this.getCallbackScope()
});

this.items = [this.loginPanel];

this.callParent(arguments);
},

listeners: {
afterrender: function(form) {
var field = form.down('field');
if (field) {
field.focus(true);
}
}
}
});


Cheers,
Westy

westy
18 Apr 2011, 9:22 AM
Finally rebuilt SCSS, and now have a background, albeit a little odd... but it'll do for now :)
25698


Can close this one then, thanks.


Edit: Updated compass/sass and sorted my config.rb, now looks fine.