I have the strangest little problem that I cannot seem to solve. We are using the admin dashboard from Sencha and we define a datefield inside a form:
{
xtype: 'fieldcontainer',
defaultType: 'textfield',
width: '100%',
defaults: {
labelWidth: 100,
labelSeparator: '',
submitEmptyText: false,
margin: "3 10 0 10"
},
items:[
{
xtype: 'datefield',
fieldLabel: 'Geburtsdatum',
name: 'geburtstag',
format: 'd.m.Y'
},
{
fieldLabel: 'Alter',
editable: false,
name: 'alter'
},
{
xtype: 'combobox',
name: 'geschlecht',
fieldLabel: 'Geschlecht',
store: 'lookup.Geschlecht',
queryMode: 'remote',
displayField: 'text',
valueField: 'id',
editable: false
},
{
xtype: 'datefield',
fieldLabel: 'geworben am',
name: 'geworbenAm',
format: 'd.m.Y'
},
{
fieldLabel: 'geworben von',
name: 'geworbenVon'
},
{
fieldLabel: 'Ehrungen',
name: 'ehrungen'
}
]
}
Everything works fine with one exception: the background of the pop-up calendar is transparent: https://www.dropbox.com/s/eic6sua4y7m9n9w/Screenshot%202016-02-16%2009.00.51.png?dl=0
Any idea how to fix this? I'm not sure where to look to solve this :/
Thanks in advance!
If you use Sencha Cmd, the CSS is compiled from SASS sources every time you build your solution.
Since browsers cannot read sass sources, the uncompiled version of your ExtJS app still has to use the compiled version of your CSS.
The CSS is compiled by concatenating together and then compiling all SASS files where path and filename correspond to a ExtJS javascript source file that is required in your ExtJS project at the time of compilation.
If you require other builtin Ext javascript files afterwards, the JS is loaded dynamically, but the CSS for these is not readily available, but a recompile of your app will solve this.
Related
I´ve a following combobox in extjs:
xtype: 'mcomboboxfield',
itemId: 'component1-'+i+'-mes-'+mesSeleccionado,
cls: 'component1-cls',
fieldLabel: 'PATRON',
height: 333,
flex: 4,
displayField: 'nombre',
valueField: 'codPatron',
editable: false,
queryMode: 'remote',
shadow : false,
left:0,
valueOriginal: codPatron,
value: codPatron ,
store : 'sPatronesTodos',
disabled: isWeekDisabled,
layout:{
type: 'hbox',
align: 'stretch'
},
listeners: {
afterrender: function(cmp) {
cmp.getStore().load();
},
}
Sometimes works fine, but sometimes codPatron is showed instead nombre. Why does it happen and how can I prevent it?
The value is shown when there is no corresponding entry in the backing store. To fix it, make sure there is an entry for every value in the backing store.
Learning ExtJS5 I have a problem with grid. I have such panel description:
{
xtype: 'tabpanel',
items: [
{
title: 'Texts',
xtype: 'gridpanel',
reference: 'textGrid',
store: Ext.create('Ext.data.Store', {
fields: ['active', 'textValue'],
data: {
items: [
{active: true, textValue: 'test'},
{active: false, textValue: 'no test'}
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}),
columns: [
{ xtype: 'checkcolumn',
text: 'Enable', dataIndex: 'active', width: 100,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
},
{ text: 'Value', dataIndex: 'textValue', flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],
plugins: {
ptype: 'rowediting',
clicksToEdit: 1
}
},
{
title: 'Images',
xtype: 'gridpanel'
}
]
}
But it's rendered wrong. I don't see a checkbox and area for text column is too small. There're no any errors in firebug console.
What's wrong with code?
Thanks.
I had this problem too and it looks like this sometimes happens when there are requires missing in your classes.
Look into the console for warnings like these:
[Ext.Loader] Synchronously loading 'Ext.layout.container.Border'; consider adding Ext.require('Ext.layout.container.Border') above Ext.onReady
And add the missing classes to the requires array of the class that uses them like this:
Ext.define('Test.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'Ext.layout.container.Border',
'Ext.tab.Panel'
],
...
Styles are missing.
If you created the proyect with Sencha Command (you are loading proyect with microloader bootstrap, see your index.html), then you must be sure you have defined all requires of the components that you used on your app and launch this command from the root directory:
sencha app build
This command compile the css that will be use on your app (among other things). You can try too:
sencha app refresh
And a latest two command if the latest don't work (use both):
sencha app clean
sencha app build
Hope it work
I have following code-
{ fieldLabel: 'Date', name: 'Date', xtype: 'datefield' }
{ fieldLabel: 'Name', name: 'PerName', xtype: 'textfield' },
{
xtype: 'panel',
layout: 'form',
border: false,
labelWidth: 200,
items: [
this.fields.check1 = { xtype: 'checkbox', name: 'Check1', fieldLabel: 'Checkbox 1', width: 320 },
this.fields.check2 = { xtype: 'checkbox', name: 'Check2', fieldLabel: 'Checkbox 2', width: 320 }
]
}
Here, I am taking the checkboxes inside a panel as I need to increase the label width.
The label is showing but checkbox is not displaying .
What I am doing wrong
How about you add your checkboxes inside a FormPanel something like this:
var myPanel = new Ext.form.Panel({
alias: 'widget.myformPanel',
renderTo: Ext.getBody(),
defaults: {
labelWidth: 100,
},
items: [{
xtype: 'checkbox',
name: 'Check1',
fieldLabel: 'Checkbox 1'
}, {
xtype: 'checkbox',
name: 'Check2',
fieldLabel: 'Checkbox 2'
}]
});
In that way, you can set the labelWidth of the formPanel items.
Try to play it with jsfiddle.
Build your application with
sencha app build
It seems that you need to build only for deployment, however, development version uses production css. Therefore, anytime you add a new class you need to build the app to re-create css to include the new class styling.
I try to create treepicker but i can't done with that http://jsfiddle.net/UKFVd/
Here is my code
var Panel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5,
width: 300,
height: 100,
title: 'Filters',
items: [ {
xtype: 'treepicker',
name: 'list_id',
fieldLabel: 'Task List',
labelWidth: 60,
displayField: 'text',
store: store
}],
renderTo: Ext.getBody()
});
i check error is TypeError: k is undefined How to working with treepicker thanks
You need to include:
Ext.ux.TreePicker
if you have not.
The code in the fiddle you posted is perfectly fine, however, on the left side under External Resources, add the full URL path to TreePicker.js, and try again, and it will work.
Here is a working fiddle rev: http://jsfiddle.net/UKFVd/6/
Tree picker is not an out of box component that ships with extjs, you have to add it to your web page as an additional resource.
here is a page showing examples:
http://extjs.dariofilkovic.com/
i am new to extjs and i am trying to add a checkbox to my container.viewport gridpanel.
This is my code:
xtype: 'gridpanel',
flex: 2,
autoScroll: true,
title: 'title',
store: 'OutgoingDataStore',
columns: [
{
xtype: 'gridcolumn',
align: 'right',
dataIndex: 'calls_m',
text: 'Calls Monthly'
},
{
xtype: 'checkcolumn',
align: 'right',
dataIndex: 'check',
text: 'check',
}..
without the checkcolumnit works fine, but when i add it the app shows empty page and on the console i see :'Uncaught TypeError: Cannot call method 'substring' of undefined '
It depends on what version you're using. In 4.2.0, the CheckColumn was moved into the core library. If you're using an earlier version (which it seems like you are), then the CheckColumn is just an extension, so you'd need to include it from the examples/ux folder.
In 4.2.0 you would do it like this.
xtype: 'gridpanel',
flex: 2,
autoScroll: true,
title: 'title',
store: 'OutgoingDataStore',
selModel: Ext.create('Ext.selection.CheckboxModel'), // This will add check column
columns: [
{
xtype: 'gridcolumn',
align: 'right',
dataIndex: 'calls_m',
text: 'Calls Monthly'
}
...