I am trying to use the Ext.ux.form.ItemSelector,but no icons are on the add/remove/top/down buttons!
Code below:
Ext.create('Ext.ux.form.ItemSelector', {
renderTo: Ext.getBody(),
name: 'channelRange',
store: Ext.create('Ext.data.Store', {
fields: ['display', 'value'],
data: [{
display: '22',
value: 2
}, {
display: '33',
value: 3
}]
}),
buttons: ['add', 'remove'],//No icons on the buttons! Why?
//imagePath: '../ux/images/',
displayField: 'display',
valueField: 'value',
value : [ 3 ],
allowBlank: false
});
See the result here, the buttons between the 2 multiselect have no icon!
Yes it is an issue with ItemSelector. You will not see any icon on buttons after any kind of BUILD.
I was able to resolve this issue permanently via overriding below CSS. Actually if you debug the code you will see that it is trying to location these button icons on different location.
// Do these overrides in any of your CSS file.
.x-form-itemselector-top {
background-image: url(images/itemselector/top.gif) !important;
}
.x-form-itemselector-up {
background-image: url(images/itemselector/up.gif) !important;
}
.x-form-itemselector-add {
background-image: url(images/itemselector/right.gif) !important;
}
.x-form-itemselector-remove {
background-image: url(images/itemselector/left.gif) !important;
}
.x-form-itemselector-down {
background-image: url(images/itemselector/down.gif) !important;
}
.x-form-itemselector-bottom {
background-image: url(images/itemselector/bottom.gif) !important;
}
NOTE: Also make a sure you have these icons on given path (images/itemselector/). In my case I copied these icons from "ui-client\ext\packages\ux\classic\resources\images\itemselector" to "ui-client\resources\images\itemselector". Here "ui-client" is my application root folder.
Hope above provided information will help.
Solution from my project:
grid.tbar.push({
itemId : 'create',
iconCls : 'iconAdd',
text : 'Add'
}
and config in some .css file:
.iconAdd {background: url(/resources/img/action-add.png) no-repeat !important;}
Related
I'm redesigning a frontend for a uni project written with ExtJS 6.
right now I'm wondering how to properly add an image to a container that fits the size:
I tried a displayfield using value: "img=.../>" but I can't seem to make the image fit properly - it's just way to big. The same goes for "html: img=.../>".
also adressing id: 'TopMenu' with #TopMenu{} in css seems to have no effect whatsoever regardless of the options I try to change :(
I suspect ExtJS defaults have higher priority than my own settings or I'm simply not adressing the container right.
Ext.define('textImager.view.menu.TopMenu', {
extend: 'Ext.panel.Panel',
// id für css: #TopMenu
id: 'TopMenu',
xtype: 'TopMenu',
layout: 'hbox',
items: [
// goethe logo
{
flex: 1,
id: 'GoetheLogo'
},
// Website titel
{
flex: 8,
id: 'Titel',
html: 'TextImager'
},
// dropdown menu
{
flex: 1,
id: 'DropdownMenu',
xtype: 'button',
html: 'menu',
menu: [
{xtype: 'button',
html: 'test1'}]
},
]
});
the current css:
#TopMenu-body{}
#GoetheLogo-body{
background-image:url(../resources/images/menu/TT_logo_transparent.png);
background-position: right center;
background-size: contain;
background-repeat: no-repeat;
background: rgba(123,123, 123, 0.8);
}
#Titel{}
#DropdownMenu{}
simply resizing would be a bad workaround and I also have to adjust the background which currently is not working either.
I would greatly appreciate some insight on how to properly adress the containers with css.
I've found a solution - it might not be the best, but I'm quite happy with the result:
// TT logo mit Link zur Website
{
flex: 1,
xtype: 'button',
height: '100%',
//TODO: add link
html: '<div class="TT_logo"><img src="./resources/images/menu/TT_logo_transparent.png"></div>'
},
css:
.TT_logo{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
.TT_logo img{
max-width: 100%;
max-height: 100%;
}
On my kendo grid there is a button, by default it's add new record. I want to change it. I used the following tag but does not work :
#turbinegrid .k-icon.k-add::after {
content: "ADD";
}
You can set template for the button like below,
$("#myGrid").kendoGrid({
toolbar: [{
template: '<div><div style="float:left;"><h2>Tech Documents</h2></div><div style="float:right;margin: 2% 1% 1% 1%;"><a title="add new" class="k-button k-button-icontext k-grid-add" href="\\#"><span class="k-icon k-i-plus-outline"></span>**Create One**</a></div></div>'
}]
});
Use Your Text for the button in place of Create One.
When using MVC you can set the text like this:
#(Html.Kendo().Grid<GridViewModel>()
.ToolBar(tools =>
{
tools.Create().Text("ADD");
})
)
When using jQuery use this:
$("#grid").kendoGrid({
toolbar: [{ name: "create", text: "ADD" }]
});
#turbinegrid .k-icon.k-add {
font-size: 0px !important;
}
#turbinegrid .k-icon.k-add::after {
content: "New Text" !important;
font-size: 18px !important;
}
For a chrome extension, I am trying to apply a set of CSS rules on some elements injected through a script. I tried separately running the injected html, explicitly linking the CSS file and it works in that case but nothing sort of works this way. Following is the code
Snippet from my manifest.json:
"background": {
"scripts": [ "Scripts/Background/background.js" ]
},
"browser_action": {
"default_icon": "img/icon.png"
//"default_popup": "popup.html"
},
"permissions": [
"bookmarks",
"tabs",
"http://*/*",
"https://*/*",
"activeTab"
],
"web_accessible_resources": [
"HTML/popup.html", "Scripts/External/jquery-2.1.3.min.js", "Scripts/Injected/loadExtUI.js", "Style/extUI.css"
]
My Background script:
// Supposed to be Called when the user clicks on the browser action icon.
function loadExt() {
chrome.tabs.insertCSS(null, { file: "Style/extUI.css" }, function () {
alert("Inserted CSS") //This alert works
});
chrome.tabs.executeScript(null, { file: "Scripts/External/jquery-2.1.3.min.js" }, function () {
chrome.tabs.executeScript(null, { file: "Scripts/Injected/loadExtUI.js" });
});
}
chrome.browserAction.onClicked.addListener(loadExt);
Scripts/Injected/loadExtUI.js:
var popup_root = document.getElementById('chimp_ext_container');
if (popup_root == null) {
$.get(chrome.extension.getURL("HTML/popup.html"), function (data) {
//$(data).appendTo('body');
// Or if you're using jQuery 1.8+:
$($.parseHTML(data)).appendTo('body');
});
} else {
document.body.removeChild(popup_root);
}
Style/extUI.css
#chimp_ext_container {
max-width: 420px !important;
overflow-x: hidden !important;
font-family: Arial, sans-serif !important;
font-size: 12px !important;
margin:1px !important;
padding:10px !important;
border: 1px groove !important;
border-radius: 5px !important;
background-color:aqua;
position: absolute !important;
top:10px !important;
float:right !important;
}
And finally, here is the HTML/pop
<!doctype html>
<html>
<head>
<title>Chimpu</title>
</head>
<body>
<div id="chimp_ext_container">
<h1>Chimpu mera doshtttt!</h1>
</div>
</body>
</html>
The test page where I am running this is my own page which just has a element with no other CSS applied so I am sure, nothing is interfering with my CSS file.
While debugging this, I observed that css styles applied to <p> gets properly seen but not to <div>!
I am using Sencha Touch 2.2.1 . I want to display list items with icons, for that I am using itemTpl config property of the list. The image is rendered as icon but the list item is not getting aligned properly- it appears starting from much below. I want the text to get started from the top- it must be aligned horizontally with the image. I also tried changing 'margin' property but it didn't seem to work.
Please find my code below:
Ext.define('BBraunSencha.view.ListPanel',{
extend: 'Ext.Panel',
xtype: 'listpanel',
config:{
layout:{
type: 'vbox',
align: 'stretch'
},
items:[
{
xtype: 'label',
html: '<div style="margin-left: 20px;">List one</div>'
},{
xtype: 'list',
flex: 1,
ui:'round',
scrollable: true,
data:[
{ name: 'item1', price:'2000',in_stock : 'no'},
{ name: 'item2', price: '3000',in_stock :'yes'}
],
itemTpl: '<img src="images/Tulips.jpg" style="height: 50px;width: 50px;display:inline-block;margin-right:50px;"/>{name}'
}
]
} });
What can be the other way to achieve it?
Add a class to your css, then use that class for your itemTpl:
CSS file:
.tulip-icon {
background-image: url(images/Tulips.jpg);
background-size: 50px 50px;
background-repeat: no-repeat;
padding-left: 50px;
}
JS Code:
itemTpl: '<div class="tulip-icon">{name}</div>'
Add css:
.list-image{
height:20px;
width:20px;
float: left;
}
in js file:
itemTpl:'<div><img src="images/Tulips.jpg" class="list-image">{name}</div>'
I am new to sencha touch.
How do we change the background color of a button to white? I have a button with two images in each corner. I want the button to be plain white.
I tried using css like this:
.quest {
background: url(../images/quest.jpg) no-repeat left,
url(../images/rightarrow.jpg) no-repeat right;
background-color: white;
border: none;
border-color:white;
padding-left: 50px;
text-align: left;
}
My button is here:
{
xtype: 'button',
text: '<div class="quest">Info</div>',
labelWidth: '100%',
name: '',
handler: function() {
}
}
My button has grey borders (Grey default button color in sencha) with white color in mid. How do i make it completely white? Please help.
I have even tried:
style: "background-color: white"
Using 'cls' attribute solved my problem.
{
xtype: 'button',
cls: 'btn',
text: '<div class="person">People</div>',
labelWidth: '100%',
},
In my app.css define
.btn
{
background-color: white !important;
background-image: none;
}
We have to redefine both background-color and background-image properties so that the default sencha-touch.css properties are overridden. Thank you Thiem Nguyen for your help.
This should render your desired button :)
config: {
ui: 'plain',
text: 'Your Text',
style: 'background-color:white;'
}
Just like Thiem Nguyen said, this will work
{
xtype:'button',
text:'text',
ui:'plain',
style:'background-color:white'
}