PDA

View Full Version : Designing ExtJS Buttons



ggkaushik
11 Feb 2014, 8:26 AM
I want to create a new button style for my organisation.

Can someone guide me?

Is there a proper way of designing a button stylr in extjs 4.2.1?
What are the images I need to design in photoshop?

I want the button to look similar in IE/FF/Safari.

Thanks

palakurthivishal
11 Feb 2014, 8:40 AM
Hello ggkaushik,
Create a class by extending Ext.button.Button( extending gives your class gives the same config properties of the extending class, it means the newly created class is also of type button here), customize the config properties just the way you like it in the new class, like this


Ext.create('App.view.CustomButton',{
extend : 'Ext.button.Button',
alias : 'widget.myOrgButton',
// you can modify all the config properties here
width : customWidth,
height : customHeight,
style : {
// add style attributes
}
});

Use it as,


{
xtype : 'myOrgButton'
}

ggkaushik
11 Feb 2014, 9:41 AM
palakurthivishal ... Thanks

But how to apply the style? I am stuck with it.

I am using a images as attached.

palakurthivishal
12 Feb 2014, 6:22 AM
Hello ggkaushik,
By looking at the buttons, I can say you have to use the suitable gradient. Then you need to define a css class which has background : "yourBlueGradient", and you have to give it as "cls" property to your customButton.
To design circular buttons you need to give border-radius property.
I don't know how to achieve scrollbar css.

rsravishankar
3 Jul 2014, 8:54 AM
Finally, how did you get this done. Can you kindly let me know the detailed steps? I'm new to ExtJS. Thanks in advance.