I have a grid panel with a checkbox added in its header.
How can I stylize the checkbox?
Ext.define('MyApp.view.SalesTour', {
extend: 'Ext.grid.Panel',
controller: 'salestour',
title: 'List of SalesTour',
iconCls: 'x-fa fa-handshake-o',
store: 'MyApp.store.SalesTourStore',
columnLines: true,
header:
{
xtype: 'header',
titlePosition: 0,
defaults: {
margin: '0 10px'
},
items: [
{
xtype: 'checkbox',
//labelStyle: 'color: #FFFFFF',
//style: 'color: #FFFFFF',
boxLabel: 'Hide converted',
name: 'hideConverted',
inputValue: true,
checked: true
}],
listeners: {
beforerender: 'onBeforeHeaderRender'
}
},
columns: [
{
...
...
I tried using labelStyle and style properties unsuccessfully...
I would expect to see the checkbox and its label of white color.
Some suggestion, please? What can I do?
Thanks a lot!!!!
You could add css classes to the checkbox.
For Example
You could create a css class
.boxLabel-font-white {
color: white;
}
And add the class to the config boxLabelCls to color the boxLabel for the checkbox.
https://docs.sencha.com/extjs/7.0.0/classic/Ext.form.field.Checkbox.html#cfg-boxLabelCls
There are many more cls-configs you could use:
https://docs.sencha.com/extjs/7.0.0/classic/Ext.form.field.Checkbox.html
I hope that helps
Related
In my extJs 6.5 project, I am trying to change the background color of a toolbar.
This is only for 1 component and can't seem to figure out the best way with cls or ui. Can someone show me how to change background color?
Ext.define('App.view.menu.Menu', {
extend: 'Ext.panel.Panel',
xtype: 'app-menu',
controller: 'menu',
itemId: 'menuItemID',
requires: [
'App.view.menu.MenuController'
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'left',
cls: 'app-menu',
//ui: 'mainmenuTest',
//ui: 'dark',
style: 'padding: 0; margin: 0;',
items: [
{
xtype: 'combobox',
itemId: 'comboboxClientItemID',
emptyText: 'Select Client...',
editable: false,
displayField: 'clientName',
valueField: 'clientName',
bind: {
store: '{myClientListStore}',
selection: '{selectedClientListModel}'
},
listeners: {
select: 'onComboboxSelect'
},
queryMode: "local"
}
]
}
]
});
In your Menu.scss file add a ui with
#include toolbar-ui(
$ui: 'toolbar-red',
$background-color: #ff0000 // your background color here
);
Then on your toolbar simply add the ui 'toolbar-red'.
{
layout: {
type: 'hbox'
},
items: [
{
xtype: 'selectfield',
placeHolder: 'selectfield',
autoSelect: false,
},
{
xtype: 'textfield',
placeHolder: 'textfield'
}
]
},
I want to use 'hbox' layoout with selectfield and textfield for horizontal components using Sencha Touch 2.0
but like this image, underlines for second component(textfield) in fieldset are not seen. What's wrong?
screenshot
Hi its nothing with hbox layout and fieldset. Its is due to selectField.these lines are the border of selectField. If you want to remove it you need something like this
{
xtype: 'selectfield',
placeHolder: 'selectfield',
autoSelect: false,
border: 0,
},
this will make it disappear these line
i hope you get it ;)
here is a simple fiddle
And In case if you want to have borders follow this code
{
xtype: 'selectfield',
border: 3,
style: 'border-color: blue; border-style: solid;',
flex: 1,
placeHolder: 'selectfield',
autoSelect: false,
},
{
xtype: 'textfield',
border: 3,
style: 'border-color: blue; border-style: solid;',
flex: 1,
placeHolder: 'textfield'
}
I wish to have the same form panel in each tab of the tabbed pannel. Is there a way that the same code is run for each tab without having to copy the code in the items list since that would be redundant.
Here is one way to do it -
You'll normally define a tabpanel and you give multiple panels as an array of items. For each of the panel inside the item, give the same panel container that you define below as the item.
{
xtype: 'tabpanel',
itemId: 'myTabPanel',
activeTab: 0,
plain: true,
items: [{
xtype: 'panel',
itemId: 'tab1',
layout: 'fit',
title: 'Strategies',
items: [{
xtype: 'myTabContainer'
}],
tabConfig: {
xtype: 'tab',
closable: false
}
}, {
xtype: 'panel',
itemId: 'tab2',
layout: 'fit',
title: 'Action Sets',
items: [{
xtype: 'myTabContainer'
}]
}],
listeners: {
tabchange: 'tabChangeListener' // define this and handle the actions for your tab change event
}
}
And here is a sample definition of the container/content for the tab. You can note that I'm using the alias for this container "myTabContainer" as xtype in each of the tabs above. This will make sure that the same view is linked to both the tabs.
Ext.define('MyTabContainer', {
extend: 'Ext.panel.Panel',
alias: 'widget.myTabContainer',
requires: [
// give all required classes
],
viewModel: {
type: 'dfstrategiesmaincontainer'
},
itemId: 'tabContent',
layout: 'border'
// Define all other required items and contents
}
Define a form and set that form as an item in each tab.
//Define the form
Ext.define('App.view.MyForm', {
extend:'Ext.form.Panel',
alias: 'widget.myform',
bodyPadding:10,
items: [....]
});
//Use the form as an item in each tab
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Tab1',
xtype: 'myform'
}, {
title: 'Tab2',
xtype: 'myform'
}]
});
I am learning sencha touch and extjs using citybars sample app provided by sencha itself.
Here is the link
http://docs.sencha.com/architect/3/tutorials/first_mobile_application.html
This app is very good for learning purpose and now i want to create an demo app in which i have following things:
There is a mainview which contains, static/fixed header (name view1).
Main view contains another view, let say view2 which is variable or can be changed.
Question
How can i achieve this functionality in which view2 change dynamically?
I can guide you with what you want to achieve.
If you need a slide navigation then first try this.
I am providing you with an sample code which will give you some idea on your desired layout. Try this view:
Ext.define('Sample.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
'Ext.dataview.List'
],
config: {
layout: 'hbox',
cls: 'main',
items: [{
xtype: 'list',
itemTpl: '{title}',
data: [{ title: 'Red', val: 'red' },
{ title: 'Blue', val: 'blue' },
{ title: 'Orange', val: 'orange' },
{ title: 'Purple', val: 'purple' }],
flex: 1,
listeners: {
itemtap: function(el, index, target, record, e) {
var me = this,
element = Ext.get(e.target),
main = element.parent('.main'), //assign the dom of 'Main' view to 'main'
newCls = record.get('val');
if(me.lastAddedCls) {
main.removeCls(me.lastAddedCls).addCls(newCls);
} else {
main.addCls(newCls);
}
me.lastAddedCls = newCls; // Keeps track of last added view so that it can be further removed
}
}
}, {
cls: 'viewTwo',
flex: 2
}]
}
});
Here suppose the first section is navigation panel and second section is you desired variable view 2.
You can now add some styling in a css file(say style.css)
.main.red {
background-color: red;
}
.main.blue {
background-color: blue;
}
.main.purple {
background-color: purple;
}
.main.orange {
background-color: orange;
}
NB: Don't forget to add this css file in bootstrap.json and app.json files.
I showed this example by changing the background color. You can try adding and removing views here.
Feel free to ask any query.
You could use a TabPanel with a docked top toolbar. The TabPanel bottom bar would then allow your users to navigate between the views in your app.
A very simple example which you could build on for your own use:
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'My title'
},
{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}
]
});
The items would just be your own views created in Architect:
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'My title'
},
{
xtype: 'mylistview',
iconCls: 'home'
},
{
xtype: 'mymapview',
iconCls: 'map'
}
]
Read more here => http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.tab.Panel
I'm having an issue with multiple instances of an ext js grid all showing the same data. I am using Ext js 4.1.1.
I have a main tab panel. In that panel, there are multiple people tabs. Inside each person tab is a details tab and a family tab.
The details tab is a simple form with text boxes, combo boxes, etc. The family tab has both a dataview and a grid.
If only one person tab is open at a time, everything works fine. As soon as a second person is opened, the family tabs look the same (both the dataview and the grid). It seems to me that the problem has something to do with the model. Perhaps they are sharing the same instance of the model, and that is causing one refresh to change all the data. The dataview and the grid both have the same problem, but I think that if I can fix the problem with the grid, then I can apply the same logic to fix the dataview. I will leave the code for the dataview out of this question unless it becomes relevant.
PersonTab.js
Ext.require('Client.view.MainTab.PersonDetailsForm');
Ext.require('Client.view.MainTab.PersonFamilyForm');
Ext.require('Client.view.MainTab.EventForm');
Ext.define('Client.view.MainTab.PersonTab',
{
extend: 'Ext.tab.Panel',
waitMsgTarget: true,
alias: 'widget.MainTabPersonTab',
layout: 'fit',
activeTab: 0,
tabPosition: 'bottom',
items:
[
{
title: 'Details',
closable: false,
xtype: 'MainTabPersonDetailsForm'
},
{
title: 'Family',
closable: false,
xtype: 'MainTabPersonFamilyForm'
},
{
title: 'page 3',
closable: false,
xtype: 'MainTabEventForm'
}
]
});
MainTabPersonFamilyForm.js
Ext.require('Client.view.MainTab.PersonFamilyHeadOfHouseholdDataView');
Ext.require('Client.view.MainTab.PersonFamilyGrid');
Ext.define('Client.view.MainTab.PersonFamilyForm',
{
extend: 'Ext.form.Panel',
alias: 'widget.MainTabPersonFamilyForm',
waitMsgTarget: true,
padding: '5 0 0 0',
autoScroll: true,
items:
[
{
xtype: 'displayfield',
name: 'HeadOfHouseholdLabel',
value: 'The head of my household is:'
},
{
xtype: 'MainTabPersonFamilyHeadOfHouseholdDataView'
},
{
xtype: 'checkboxfield',
boxLabel: "Use my Head of Household's address as my address",
boxLabelAlign: 'after',
inputValue: true,
name: 'UseHeadOfHouseholdAddress',
allowBlank: true,
padding: '0 20 5 0'
},
{
xtype: 'MainTabPersonFamilyGrid'
}
],
config:
{
idPerson: ''
}
});
MainTabPersonFamilyGrid.js
Ext.require('Client.store.PersonFamilyGrid');
Ext.require('Ext.ux.CheckColumn');
Ext.define('Client.view.MainTab.PersonFamilyGrid',
{
extend: 'Ext.grid.Panel',
alias: 'widget.MainTabPersonFamilyGrid',
waitMsgTarget: true,
padding: '5 0 0 0',
xtype: 'grid',
title: 'My Family Members',
store: Ext.create('Client.store.PersonFamilyGrid'),
plugins: Ext.create('Ext.grid.plugin.CellEditing'),
viewConfig:
{
plugins:
{
ptype: 'gridviewdragdrop',
dragGroup: 'PersonFamilyGridTrash'
}
},
columns:
[
{ text: 'Name', dataIndex: 'Name'},
{ text: 'Relationship', dataIndex: 'Relationship', editor: { xtype: 'combobox', allowblank: true, displayField: 'display', valueField: 'value', editable: false, store: Ext.create('Client.store.Gender') }},
{ xtype: 'checkcolumn', text: 'Is My Guardian', dataIndex: 'IsMyGuardian', editor: { xtype: 'checkboxfield', allowBlank: true, inputValue: true }},
{ xtype: 'checkcolumn', text: 'I Am Guardian', dataIndex: 'IAmGuardian', editor: { xtype: 'checkboxfield', allowBlank: true, inputValue: true } }
],
height: 200,
width: 400,
buttons:
[
{
xtype: 'button',
cls: 'trash-btn',
iconCls: 'trash-icon-large',
width: 64,
height: 64,
action: 'trash'
}
]
});
PersonFamilyGrid.js (store)
Ext.require('Client.model.PersonFamilyGrid');
Ext.define('Client.store.PersonFamilyGrid',
{
extend: 'Ext.data.Store',
autoLoad: false,
model: 'Client.model.PersonFamilyGrid',
proxy:
{
type: 'ajax',
url: '/Person/GetFamily',
reader:
{
type: 'json'
}
}
});
PersonFamilyGrid.js (model)
Ext.define('Client.model.PersonFamilyGrid',
{
extend: 'Ext.data.Model',
fields:
[
'idFamily',
'idPerson',
'idFamilyMember',
'Name',
'Relationship',
'IsMyGuardian',
'IAmGuardian'
]
});
relevant code from the controller:
....
....
var personTab = thisController.getMainTabPanel().add({
xtype: 'MainTabPersonTab',
title: dropData.data['Title'],
closable: true,
layout: 'fit',
tabpanelid: dropData.data['ID'],
tabpaneltype: dropData.data['Type']
});
personTab.items.items[0].idPerson = dropData.data['ID'];
personTab.items.items[1].idPerson = dropData.data['ID'];
thisController.getMainTabPanel().setActiveTab(personTab);
....
....
You're setting the store as a property on your grid prototype and creating it once at class definition time. That means that all your grids instantiated from that class will share the exact same store.
Note that you're also creating a single cellediting plugin that will be shared with all instantiations of that grid as well. That definitely won't work. You likely will only be able to edit in either the first or last grid that was instantiated.
In general you should not be setting properties like store, plugins, viewConfig or columns on the class prototype. Instead you should override initComponent and set them inside that method so that each instantiation of your grid gets a unique copy of those properties.
Ext.define('Client.view.MainTab.PersonFamilyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.MainTabPersonFamilyGrid',
waitMsgTarget: true,
padding: '5 0 0 0',
title: 'My Family Members',
height: 200,
width: 400
initComponent: function() {
Ext.apply(this, {
// Each grid will create its own store now when it is initialized.
store: Ext.create('Client.store.PersonFamilyGrid'),
// you may need to add the plugin in the config for this
// grid
plugins: Ext.create('Ext.grid.plugin.CellEditing'),
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'PersonFamilyGridTrash'
}
},
columns: /* ... */
});
this.callParent(arguments);
}
});
It's hard to tell exactly, but from the code you have submitted it appears that you are not setting the id parameter on your tabs and your stores, which causes DOM collisions as the id is used to make a component globally unique. This has caused me grief in the past when sub-classing components (such as tabs and stores) and using multiple instances of those classes.
Try giving each one a unique identifier (such as the person id) and then referencing them using that id:
var personTab = thisController.getMainTabPanel().add({
id: 'cmp-person-id',
xtype: 'MainTabPersonTab',
...
store: Ext.create('Client.store.PersonFamilyGrid',
{
id: 'store-person-id',
...
});
Ext.getCmp('cmp-person-id');
Ext.StoreManager.lookup('store-person-id');
Hope that helps.