I'm trying to format each record I retrieve from a server by using a class (carousel-squares) defined in a css file. I need that each record appears inside a thumbnail in my view.
However, when I use it inside a div in my itemTpl, nothing appears. Why itemTpl does not recognize the class? If i use the class outside (in cls:) it is recognized.
The code I have in my dataview is the following:
xtype: 'dataview',
store: {
autoLoad: true,
fields: ['Title', 'Description', 'State'],
proxy: {
type: 'ajax',
url: 'ws/idea/GetByState.php?title=&page=1',
reader: {
type: 'xml',
record: 'WebIdea',
rootProperty: 'GetByStateResult'
}
}
},
styleHtmlContent: true,
cls: 'carousel-squares',
itemTpl: '<div class="carousel-squares"><h3>{Title}</h3><p>{Description}</p></div>',
flex: 1
My css is the following:
.carousel-squares {
background-color: #fcfcfc;
border: 2px solid #99cb39;
width: 90%;
height: 30px;
margin: 20px 5px;
}
Related
Creating an EXT js file:
Add border to header and body of tabpanel.
I have tried adding below stuff in .scss file, but did not work.
*.scss
.maintabpanel1 {
.x-tab-bar-plain { border:1px solid red !important;
}
.x-tab-bar-top+.x-panel-body, .x-panel.x-tabpanel-child {
border: 1px solid green !important;`enter code here`
}
You need to provide cls and bodyCls to your tabpanel.
An cls optional extra CSS class that will be added to this component's Element. The value can be a string, a list of strings separated by spaces, or an array of strings. This can be useful for adding customized styles to the component or any of its children using standard CSS rules.
A bodyCls class, space-delimited string of classes, or array of classes to be applied to the panel's body element.
In this gitlab-repo, I have created a demo using ExtJS6.2. I hope this will help/guide you to achieve your requirements.
screenshot from my local.
CODE SNIPPET
Ext.define('GeoLocation.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
cls: 'x-geo-tab',
bodyCls: 'x-geo-tab-body',
controller: 'main',
titleRotation: 0,
tabRotation: 0,
activeTab: 0,
items: [{
title: 'Tab 1',
html: 'it is tab 1'
}, {
title: 'Tab 2',
html: 'it is tab 2'
}, {
title: 'Tab 3',
html: 'it is tab 3'
}]
});
CSS part
.x-geo-tab {
.x-tab-bar-default {
background-color: #ece2e2;
border: 2px solid red !important;
padding: 5px;
.x-tab-bar-strip-default {
background-color: red;
height: 2px !important;
}
}
.x-geo-tab-body {
border: 2px solid green !important;
padding: 10px;
}
}
how do I shrink the area between these displayfields?
I've tried moving padding... margins... nothing seems to work. When I do end up getting the labels the way they should look (with very little space)... then the values are not aligned next to the label correctly.
this is how I have it setup.
layout: 'column',
defaults: {
layout: 'form',
xtype: 'container',
//defaultType: 'textfield',
style: 'width: 50%'
},
items: [{
items: [
{
xtype: 'displayfield',
fieldLabel: 'Client',
bind: {
value: '{selectedClientListModel.ClientName}'
},
fieldStyle: 'color: #ff0000; padding: 0px; margin: 0px;',
labelStyle: 'color: #ff0000; padding: 0px; margin: -5px;'
//ui: 'dark'
},
{
xtype: 'displayfield',
fieldLabel: 'Acct Desc',
itemId: 'textfieldAcctDesc',
bind: {
value: '{selectedManager.AcctShortCode}'
},
fieldStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: 0px;',
labelStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: -15px;'
},
{
xtype: 'displayfield',
fieldLabel: 'Acct Num',
itemId: 'textfieldAcctNum',
bind: {
value: '{selectedManager.AcctNum}'
},
fieldStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: 0px;',
labelStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: -5px;'
}
]
}, {
displayfields are intended to align neatly with other form fields - which have spacious borders around their input fields. For that reason, displayfields have the same height, they even haven't got a different SCSS variable for displayfield height.
Furthermore, from the CSS classes available, the fieldLabel cannot distinguish between being a displayfield's label and another field's label. Because of that, you will have to give your displayfield at least a custom userCls, or else all your regular form fields will look ridiculous.
Then you can go and add some CSS like this:
.myUserCls,
.myUserCls .x-form-item-label,
.myUserCls .x-form-display-field
{
line-height:16px;
min-height:16px;
margin-bottom:0;
margin-top:0;
padding-top:0;
}
I have made you a fiddle.
I have been using w2ui grid for displaying information in a table. It has worked great, but I did not particularly like how the table looks. So I was looking to style it. Is there a way to style the table without directly editing the css for w2ui?
As mentionned by TheUknown, I believe that it is more convenient to simply write As mentionned by TheUknown, I believe that it is more convenient to simply write your css rules.
But you can also use the 'style' common property on many elements such as your grid, columns or records.
See this example :
jsfiddle link
$('#myGrid').w2grid({
name : 'myGrid',
columns: [
{ field: 'fname', caption: 'First Name', size: '30%', style : 'border: 1px solid blue' },
{ field: 'lname', caption: 'Last Name', size: '30%', style : 'font-weight: bold' },
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '120px' },
],
records: [
{ recid: 1, fname: 'John', lname: 'Doe', email: 'jdoe#gmail.com', sdate: '4/3/2012', style : 'border: 1px solid green' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe#gmail.com', sdate: '4/3/2012' },
{ recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe#gmail.com', sdate: '4/3/2012' }
],
style : 'border: 1px solid red'
});
You can add class onRender event or onRefresh event. This apply for w2ui widgets: layout, grid, toolbar, sidebar, tabs, form.
$('#myGrid').w2grid({
name : 'myGrid',
columns: [
{ ... },
],
records: [
{ ... }
],
onRender: function(event) {
event.onComplete = function() {
$('[name="myGrid"]').addClass('grid-custom');
}
},
});
This is an old question, but still somewhat relevant since this library is still being used by a lot of people.
My solution to this was to create a separate stylesheet called "w2ui-overrides.css" and then override the classes that are defined in the supplied w2ui stylesheet.
For instance, the default border style for the sidebar context menu is
.w2ui-overlay > div {
border-radius: 4px;
position: relative;
border: 3px solid #777777;
}
But I didn't care for that, so I added this to my overrides css:
.w2ui-overlay > div {
border-radius: 2px;
border: 1px solid #777;
}
And so on, for all of the styles I wanted to change. I use the Chrome developer tools to find the class names and selectors that I need to override.
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 want to implement an X button inside a textfield (x on right side of textfield) to clear entered texts. I have seen many extjs application that has this feature. How do I go about doing that? Any suggestion or comments would be really appreciated...
THanks
it looks something like this...
You have to use a Ext.form.field.Trigger. Here is a example for that
Ext.define('Ext.ux.CustomTrigger', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.customtrigger',
initComponent: function () {
var me = this;
me.triggerCls = 'x-form-clear-trigger'; // native ExtJS class & icon
me.callParent(arguments);
},
// override onTriggerClick
onTriggerClick: function() {
this.setRawValue('');
}
});
Ext.create('Ext.form.FormPanel', {
title: 'Form with TriggerField',
bodyPadding: 5,
width: 350,
renderTo: Ext.getBody(),
items:[{
xtype: 'customtrigger',
fieldLabel: 'Sample Trigger',
emptyText: 'click the trigger'
}]
});
For ease of testing, here is a JSFiddle
This is what works for me with the CSS:
CSS
.x-form-clear {
background-image: url('../../resources/themes/images/default/form/clear-trigger.gif');
background-position: 0 0;
width: 17px;
height: 22px;
border-bottom: 1px solid #b5b8c8;
cursor: pointer;
cursor: hand;
overflow: hidden;
}
.x-form-clear-over {
background-position: -17px 0;
border-bottom-color: #7eadd9;
}
.x-form-clear-click {
background-position: -68px 0;
border-bottom-color: #737b8c;
}
Class
Ext.define('Ext.ux.form.field.Clear', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.clearfield',
triggerBaseCls: 'x-form-clear',
onTriggerClick: function() {
this.setValue();
}
});
Usage
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
items: [
Ext.create('Ext.ux.form.field.Clear', {
fieldLabel: 'Clear Field',
cls: 'clear-trigger'
})
]
})
Or use this 'clearbutton' plugin: http://www.eekboom.de/ClearButton.html
I like it because it's just a plugin, one line, instead of requiring a custom subclass.
Also, it can be used on all kinds of fields, not just on a textfield.
You can use the Ext.form.field.Text with triggers in Extjs 5.0 and later, no need to define a new type.
var textfield = Ext.create('Ext.form.field.Text', {
triggers: {
clear: {
cls: 'x-form-clear-trigger',
handler: function () {
this.setValue('');
}
}
}
});
The scope of the trigger's handler is the Ext.form.field.Text component.
You can have multiple triggers, and can also use MVVM model. For example:
var textfield = Ext.create('Ext.form.field.Text', {
triggers: {
clear: {
cls: 'x-form-clear-trigger',
handler: function () {
this.setValue('');
}
},
search: {
cls: 'x-form-search-trigger',
handler: 'onSearch'
}
}
});
The search trigger uses a handler function, i.e. onSearch, that is defined in the controller of the component that has the Ext.form.field.Text object.
In ExtJS 6+, you can also just add the following 2 configs on your Ext.form.field.Text and show/hide the trigger with the built-in change listener
triggers: {
clearText: {
cls: 'clear-text-trigger-icon',
handler: function() {
this.setValue('');
}
}
},
listeners: {
change: function(textField) {
if (textField.getValue()) {
textField.setHideTrigger(false);
} else {
textField.setHideTrigger(true);
}
}
}