How to use custom sass in Ext JS 7 - javascript

I have been trying to change the button colour in a form I have created on Ext JS v7.0.0.40
Login.js location is app\modern\src\view\main\Login.js
extend: "Ext.form.Panel",
xtype: "form-login",
title: "Login Form",
bodyPadding: 20,
width: 320,
autoSize: true,
items: [
{
xtype: "textfield",
allowBlank: false,
required: true,
label: "User ID",
name: "user",
placeholder: "user id"
},
{
xtype: "passwordfield",
allowBlank: false,
required: true,
label: "Password",
name: "pass",
placeholder: "password"
},
{
xtype: "checkbox",
boxLabel: "Remember me",
name: "remember"
}
],
buttons: [
{
text: "Login",
handler: "onLogin"
}
]
});
Login.sass location is app\modern\sass\var\view\main\Login.sass
.form-login {
.button {
background-color: #ff3737;
}
}
For some reason I cannot get the color of the button to be changed, I'm sure this has a pretty simple fix.
Thanks in advance!

Welcome to Stack Overflow:
You did not set the cls (custom class for the element) for the form.
And the button styling for the background-color is done in a subelement:
scss file:
.form-login {
.x-button .x-inner-el {
background-color: #ff3737;
}
}
https://fiddle.sencha.com/#view/editor&fiddle/325q
Further information:
To find out yourself, you can inspect the button and see that,
the button cls is x-button
adding the background color to the x-button will not help
going further down inside the x-button is the x-button-el and adding the background color there will acutally change the color.
The scss file should go parallel to the form-login file, but you do not have to do that.
If you plan to use this type of color
more often: Use a cls and create a custom component with that style
always: Take a look at the documentation to change the button background color in your theme

Related

Setting icons to kendo ui tabstrip tabs instead of text?

I am wanting to just display an icon instead of using text on the tabstrip tabs (the titles of the tab, not the content that pops up when you press the tab).
I have this tabstrip:
$('#filterTabStrip').kendoTabStrip({
//animation: false,
collapsible: true,
dataTextField: 'text',
dataImageUrlField: 'imageUrl',
dataContentField: 'content',
dataSource: [
{
text: 'Users',
//imageUrl: $('#user_tab_image').html(),
content: $('#user_filter_template').html()
},
{
text: 'Location',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/utility-sprite/svg/symbols.svg#location")}'
content: $('#location_filter_template').html()
},
{
text: 'Description',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/action-sprite/svg/symbols.svg#description")}'
content: $('#description_filter_template').html()
},
{
text: 'Type',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/utility-sprite/svg/symbols.svg#picklist")}'
content: $('#type_filter_template').html()
},
{
text: 'Custom',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/utility-sprite/svg/symbols.svg#apps")}'
content: $('#user_filter_template').html()
}
]
});
I have attempted to use static resource URL as well as setting the svg image in an html template, then setting the imageURL to that template, but that didn't work either.
I am hoping this is possible. Thank you for any help.
You can probably try to have an empty text for the dataTextField and provide the imageUrl of the icon which needs to show up. Something similar to this might help!

How to make column hidden in jsGrid?

I am using jsGrid in my project and now I am stuck here to hide a column that is being used in code but should not be displayed in page.
The grid I am using is : jsGrid
I have tried to take input control hidden but, still it doesn't work.
The following code is defines the columns of grid where I have taken hidden field for AccountID. but, it doesn't work.
Code:
fields: [
{ name: "Account", width: 150, align: "center" },
{ name: "Name", type: "text" },
{ name: "AccountID", type: "hidden", width: 0}
]
Since v1.3 jsGrid fields have an option visible
http://js-grid.com/docs/#fields
If you need to hide (or show) a field at runtime, it can be done like the following:
$("#grid").jsGrid("fieldOption", "ClientName", "visible", false);
Try this below code.
create a css class like below
.hide
{
display:none;
}
And assign the css property to the field like below
fields: [
{ name: "Account", width: 150, align: "center" },
{ name: "Name", type: "text" },
{ name: "AccountID", css: "hide", width: 0}
]
Hope this will help you.
fields: [
{ name: "Account", width: 150, align: "center" },
{ name: "Name", type: "text" },
{ name: "AccountID", visible: false, width: 0}]
fields: [{
name: "<FIELD NAME>",
visible: false
}
]
hidden very simple, make it like this example :
{ name: "id", title: "Id", type: "text", width: 1, css:"hide"}
where css class hide from bootsrap
In my case we started our application to show a column in JSGrid and went all the way to production. Later there was a need to hide that column but I used that column to do custom sorting. So this is how I did
My styles
.idStyle:
{
color: red;
}
Created new style
.hiddenStyle:
{
display: none;
}
Below are my jsGrid Fields
var jsGridField =
[
{ name: "Student ID", type: "text", width: "auto", css: "idStyle hiddenStyle" },
{ name: "Student Name", type: "text", width: "auto", css: "labelStyle" },
]
No data Row has been created on jsgrid for row data when there is no data. we have used below css row data for hiding it and showing.
<tr class="jsgrid-nodata-row"><td class="jsgrid-cell" colspan="16" style="width: 60.3958px;">Not found</td></tr>
When row data taking time to display by a API call , we are showing spinner on the grid, but user has been shown as no data found .. so which is not a best user experience .
For solving this we can use hide and show the css element on modifying the CSS class
For Hiding :
$('.jsgrid-nodata-row').hide();
$('.jsgrid-cell').hide();
For Showing :
$('.jsgrid-nodata-row').show();
$('.jsgrid-cell').show();

How to apply style for Ext js xtype tabpanel using style property?

I want to change style for Ext.tab.Panle element by writing inline css structure as like the following xtype : button element
{
xtype: "button",
itemId: "imageUploadButton1",
text: "Uploader",
style: {
background : '#C81820'
}
}
I want to change the style of tab-panel's header by writing css like this in a Json format. Is it possible?
Following is my tabpanel elemental structure:
{
xtype:"tabpanel",
activeTab:0,
items:[{
xtype:"panel",
title:"SHOPABLE IMAGES",
},{
xtype:"panel",
title:"LAYOUT SETTINGS"
},{
xtype:"panel",
title:"HOTSPOT SETTINGS"
}]
}
Thanks.
The tab headers are instances of Ext.tab.Tab, which are created dynamically by the tab panel. You can provide a tabConfig configuration on the tab panel's items to customize them, and since they're subclasses of Ext.Component, of course you can also set the style config:
items:[{
xtype: "panel",
title: "SHOPABLE IMAGES",
tabConfig: {
style: {
background: '#C81820'
}
}
},{
xtype: "panel",
title: "LAYOUT SETTINGS"
},{
xtype: "panel",
title: "HOTSPOT SETTINGS"
}]
Fiddle: https://fiddle.sencha.com/#fiddle/o7c

EXTJS: How can I add an click event on Icon node in a Tree Panel

I try to get an event click on the node's Icon in a tree panel.
I have a tree with many node and in front of the leaf node, I have an Icon.
For the moment, when I click on a node I display a PDF file.
I want to do a specific action when I click on the Icon of this node.
Someone have an idea for do that?
Thanks a lot for your futur answers!
EDIT:
Thanks for your answer,
#Hown_: Ok, but I must do an specific action which depends to the select node. With a CSS selector, I can't do that. I'm wrong?
#budgw: Yes, it's a good solution, but my icon must be in front of the text node :(
I guess the simplest way would be to add itemclick event to your TreePanel and check in the handler fn if the tree icon was clicked by checking the target of the event. It works as simple as this:
You may have to change the css selector of the getTarget fn for your specific use. ( e.g. only leaf elements or pdf icons or something like that )
Ext.onReady(function() {
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "detention",
leaf: true
}, {
text: "homework",
expanded: true,
children: [{
text: "book report",
leaf: true
}, {
text: "alegrbra",
leaf: true
}]
}, {
text: "buy lottery tickets",
leaf: true
}]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
listeners: {
itemclick: function(treeModel, record, item, index, e, eOpts){
var iconElClicked = e.getTarget('.x-tree-icon');
if(iconElClicked){
//tree icon clicked
//do something in here
console.log('tree icon clicked');
}
}
}
});
});
I don't think you can do that with the icon in front of the node (maybe I'm wrong).
But I usually solve this kind of use case by using a treepanel with 2 columns :
a treecolumn
an action column like in this example here.
The trick is to use the config property 'hideHeaders:true' on the tree panel to make it looks like a classic tree.
You can select the dom elements of the icons via css selector and add a click event after the render method.
here is an example:
https://fiddle.sencha.com/#fiddle/8kd
UPDATE:
exmaple:
Ext.onReady(function() {
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "detention",
leaf: true
}, {
text: "homework",
expanded: true,
children: [{
text: "book report",
leaf: true
}, {
text: "alegrbra",
leaf: true
}]
}, {
text: "buy lottery tickets",
leaf: true
}]
}
});
Ext.define('MyPanel', {
extend: 'Ext.tree.Panel',
title: 'Simple Tree',
width: 200,
onTreeIconClick: function(treeModel, record, item, index, e, eOpts){
// DO SOMETHING IN HERE
console.log('onTreeIconClicked');
},
render: function(){
this.callParent(arguments);
var domEls = this.el.dom.querySelectorAll('#' + this.getId() + ' .x-tree-icon', this.el.dom);
for(var i = 0; i<domEls.length; i++){
Ext.get(domEls[i]).on('click', function(){
//click on tree icon
this.on('itemclick', this.onTreeIconClick, this, { single: true });
}, this);
}
}
});
Ext.create('MyPanel', {
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
});

Sencha static top and bottom bars for page changes

I've been learning sencha touch 2.0 over the last 2 weeks and i've stumbled onto two problems. What i would like to do is have a static top bar and bottom bar on my page and let the dynamic content be controlled by buttons placed at the bottom dock. I've spent 4 hours on trying to get this to work the way i want to, i'm almost there but i need a little guidance.
My first problem is that i want to add an image to the static top dock. The code that was suggested in another form does not work.
var topBar = new Ext.BoxComponent(
{
xtype: 'box',
autoEl: {tag: 'img', src:'/resources/icons/icon.png'}
}
)
This code doesnt give any errors but it also doesnt show the required image. The image is 60px by 30px
The second problem i'm having is that i would like to add icons to my bottom dock so that when the user click on them, the page would change to show a new page. I have a form with 3 fields that i would like to link to one of the icons on the bottom dock so when the icon is clicked, the form would show. Here is the full code:
Ext.setup({
phoneStartupScreen : 'resources/images/icon.png',
icon : 'resources/images/Homescreen.png',
glossOnIcon : false,
onReady : function() {
var topBar = new Ext.BoxComponent(
{
xtype: 'box',
autoEl: {tag: 'img', src:'/resources/icons/icon.png'}
}
)
var tapHandler = function (btn, evt) {
alert("Button '" + btn.text + "' tapped.");
}
var form = new Ext.form.FormPanel({
items:
[
{
xtype: "textfield",
name: "name",
label: "Name",
placeHolder: "your name here"
},
{
xtype: "emailfield",
name: "email",
label: "Email",
placeHolder: "you#example.com"
},
{
xtype: "urlfield",
name: "url",
label: "Url",
placeHolder: "http://www.example.com"
}
]
})
var searchPageContent ={
html:'This is a test for search page'
}
var userPageContent ={
html:'This is a test for user page'
}
var dockedItems = [
{
xtype : 'toolbar',
dock : 'top',
items : topBar
},
{
xtype: "toolbar",
dock: "bottom",
items: [
{
xtype: 'spacer'
},
{
iconMask: true,
iconCls: "favorites",
items: form
},
{
xtype: 'spacer'
},
{
iconMask: true,
iconCls: "search",
items: searchPageContent
},
{
xtype: 'spacer'
},
{
iconMask: true,
iconCls: "user",
items: userPageContent
},
{
xtype: 'spacer'
},
]
}
]
new Ext.Panel({
id : 'buttonsPanel',
fullscreen : true,
dockedItems : dockedItems
});
}
});
as mentioned before, i have been able to create the static top and bottom bars but my image does not work in my top bar, which is my first problem, and when i click one of the 3 buttons, nothing happens; i would like my form to be displayed when i click my favorites button but nothing happens. Where have i gone wrong?
Thank you
After a few days of wrestling with sencha, i found an example that almost had what i wanted so modified it and it worked out exactly the way i wanted. I now have a static top bar and a static bottom bar with page icons such that when i click the page icons, the main content scrolls and the new page is displayed.
Ext.setup({
onReady: function() {
var topBar = new Ext.BoxComponent({
layout: 'hbox',
html:
'<img src="resources/icons/icon.png" height="30", width="48"/>',
flex: 1,
style:{
textAlign: 'center'
}
})
var dockedItems = [
{
//this creates the top bar, places it at the top of the page and gives it a background image
xtype : 'toolbar',
dock : 'top',
style: 'background-image:url("resources/images/backgroundSmall.png"); background-repeat: repeat-x;',
items : topBar
}
]
// Sub-page sections
// Main portion of the page, which includes top toolbar and content
var welcome = new Ext.Panel({
items: [{
html: 'this is the welcome screen'
}],
title: "Welcome",
iconCls: "welcome",
});
var search = new Ext.Panel({
items: [{
html: 'this is the search screen'
}],
title: "Search",
iconCls: "search",
});
// This is the outer panel with the bottom toolbar
var wrapper = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
style: 'background:#8a9cB2;',
layout: {
pack: 'center'
}
},
items: [
welcome,
search,
{
iconMask: true,
iconCls: "search"
},
{
iconMask: true,
iconCls: "user"
}
],
dockedItems: dockedItems
});
}
});

Categories