Extjs on resize column width textfield Ui get destroyed - user-interface

Basically, the problem that I have is the following:
When I resize the column in my GridPanel the textbox UI near Name get destroyed: the line on the right disappear. It should instead resize according to the width. How could I fix it?
This is my code:
...
columns: {
defaults: {
flex: 1,
},
layout:'auto',
items: [{
text: Strings.sharedName,
flex: 1,
minWidth: Traccar.Style.columnWidthNormal,
dataIndex: 'name',
//style: 'text-align:right;!important',
filter: 'string',
defaults: {
margin: '-28 30 -5 50'
},
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'right'
},
flex: 2,
items: [{
xtype: 'textfield',
id: 'nameFilter',
listeners: {
change: function(field, value) {
filterGrid('name', value);
}
}
}]
}]
}
...
Here a reproducible example:
https://fiddle.sencha.com/#view/editor&fiddle/3a41

Related

Error dom is null in Ext.grid.Panel after cell click only when grid is sorted

I've error on grid, when try to click on disabled cell. Here is the code:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
columns: [{
text: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield',
disabled: true
}
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}],
height: 100,
width: 400,
renderTo: Ext.getBody()
});
}});
How to reproduce:
Click on cell "Lisa"
Sort by "Name" column
Wait 30 sec
Click on cell "Lisa" cell again
This error occurs:
Uncaught TypeError: Cannot read properties of null (reading 'value')
Reproduced on ExtJs "7.5.0" and older.

Sencha Ext JS - how to refresh the Tabs after date picking?

I have MVC app, it's a Tab Panel containing few Tabs with a chart on each, there is also a Date Picker with Refresh button, and a Combo box to choose which data source is being used for the 'Date Range'.
The app currently loads the charts with all available data but the purpose is to select 1 of 3 available data sources, select a date range and refresh every chart tab by clicking a button, how do I do it?
Fiddle sample

Something like this:
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
height: 800,
width: 800,
layout: 'border',
defaults: {
collapsible: false,
split: true,
},
items: [{
title: 'PanelCenter',
xtype: 'tabpanel',
region: 'center',
itemId: 'centerPanel',
bodyPadding: 10,
activeTab: 0,
items: [{
title: "Tab1",
items: {
xtype: 'cartesian',
width: 655,
height: 400,
store: {
fields: ['name', 'value'],
data: [{
name: 'metric one',
value: 10,
}, {
name: 'metric two',
value: 7,
}, {
name: 'metric three',
value: 5,
}]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name',
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'value'
}
]
}
}, {
title: "Tab2",
items: {
xtype: 'cartesian',
width: 655,
height: 400,
store: {
fields: ['name', 'value'],
data: [{
name: 'metric one',
value: 3,
}, {
name: 'metric two',
value: 5,
}, {
name: 'metric three',
value: 10,
}]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name',
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'value'
}
]
}
}, {
title: "Tab3",
items: {
xtype: 'cartesian',
width: 655,
height: 400,
store: {
fields: ['name', 'value'],
data: [{
name: 'metric one',
value: 10,
}, {
name: 'metric two',
value: 3,
}, {
name: 'metric three',
value: 9,
}]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name',
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'value'
}
]
}
}]
}, {
xtype: 'form',
title: 'PanelTop',
layout: {
type: 'hbox',
},
region: 'north',
border: false,
bodyPadding: 10,
height: '100',
width: '100%',
margin: '0 0 5 0',
region: 'north',
items: [{
xtype: 'combo',
name: 'data_type',
itemId: 'dataTypeSelect',
emptyText: 'Select date type',
displayField: 'source',
store: {
fields: ['code', 'source'],
data: [{
code: 'created',
source: 'Sales date'
}, {
code: 'invoice',
source: 'Invoice date'
}, {
code: 'bookIn',
source: 'Order date'
}]
},
allowBlank: false,
}, {
xtype: 'datefield',
itemId: 'dateFromSearchField',
fieldLabel: 'From',
labelAlign: 'right',
name: 'from_date',
format: 'd/m/Y',
maxValue: new Date(),
allowBlank: false,
}, {
xtype: 'datefield',
itemId: 'dateToSearchField',
fieldLabel: 'To',
labelAlign: 'right',
name: 'to_date',
format: 'd/m/Y',
maxValue: new Date(),
value: new Date(),
padding: '0 30 0 0',
allowBlank: false
}, {
xtype: 'button',
itemId: 'refreshButton',
region: 'center',
text: 'Refresh',
formBind: true,
handler: function () {
const formData = this.up('panel').getValues();
if (
formData.data_type && formData.from_date && formData.to_date
) {
const tabPanel = Ext.ComponentQuery.query('tabpanel#centerPanel')[0];
const cartesianCharts = tabPanel.query('cartesian');
Ext.Array.each(cartesianCharts, function (cartesianChart) {
cartesianChart.getStore().load({
params: formData,
callback: function (records, operation, success) {
},
scope: this
});;
}, this);
}
}
}],
}]
});

ExtJs 5 how add item to dashboard programmatically?

I need some help. When creating dashboard I know that it need to fill parts object
parts: {
portlet: {
viewTemplate: {
layout: 'fit',
html: 'messafe from portlet'
}
},
portlet2: {
viewTemplate: {
layout: 'fit',
html: 'message from portlet2'
}
}
}
also I know that I can use them below to render parts
defaultContent: [{
type: 'portlet',
title: 'Test1',
columnIndex: 0,
height: 500
}, {
type: 'portlet2',
title: 'Test2',
columnIndex: 1,
height: 300
}, {
type: 'portlet',
title: 'Test3',
columnIndex: 1,
height: 300
}, {
type: 'portlet',
title: 'Test4',
columnIndex: 2,
height: 350
}, {
type: 'portlet',
title: 'Test5',
columnIndex: 3,
height: 350
}]
now my question is now add(do all this job) programmatically? for example I want to create new component on button click

How can I create a view like this in sencha touch 2?

I need to create a view like this in sencha touch. I'm a beginner . Please help me. I'm not getting tap event on component.
My Code
config: {
defaults: {
margin: 10
}, layout: {
type: 'hbox'
},
items: [{
flex:1,
layout: {
type: 'vbox'
},
items: [
{
xtype: 'component', flex: 10,
html: 'Flex: 1', style: 'background-color: lightgray'
},
{
xtype: 'spacer',flex:1
},
{
xtype: 'component', flex: 10,
html: 'Flex: 2', style: 'background-color: pink'
}
]
}, {
flex: 1,
layout: {
type: 'vbox'
},
items: [
{
xtype: 'component', flex: 10,
html: 'Flex: 3', style: 'background-color: orange',
handler:function() {
console.log('Tapped !');
}
},
{
xtype: 'spacer',flex:1
},
{
xtype: 'component', flex: 10,
html: 'Flex: 4', style: 'background-color: lightblue'
}
]
}]

Try Ext.dataview.DataView. You will get examples from github.

Sencha "Card Panel + Data view" makes scrolling impossible

I have a scrolling problem that's driving me crazy. It only happens with card layout, and I tried every possible combination of "scroll" values, withou success.
Here is my situation:
I have an app with a tab panel attached to Viewport
Inside each tab, I need a card layout panel, so I can navigate on each tab independently (each tab is a different section)
The problem is: the scrolling works with simple elements like html div's, but if I try to grab a Ext.DataView OR a Ext.List component and scroll, it does not work properly
Funny thing: if I grab a DataView (or List), move the mouse a little bit and try to scroll, it works
The project is online for you to check: http://gaeti.com/scrollTest/
The code for the troubled card is here:
homeCardStart.js
Ext.regModel('testModel', {
fields: [{
name: 'name',
type: 'string'
}, {
name: 'birthday',
type: 'string'
}, {
name: 'description',
type: 'string'
}]
});
var testStore = new Ext.data.Store({
model: 'testModel',
method: 'GET',
proxy: {
url: 'res/recSample.json',
type: 'ajax',
reader: {
type: 'json',
root: 'items',
record: 'people',
}
}
});
var testData = new Ext.DataView({
tpl: '<tpl for="."><div class="person">{name}<br>{birthday}<br>{description}</div></tpl></div>',
store: testStore,
itemSelector: 'div.person',
scroll: false,
width: 350,
autoHeight: true,
margin: 20,
style: 'border:2px solid magenta'
});
testData.on('render', function () {
testData.store.load();
}, this);
App.views.HomeCardStart = Ext.extend(Ext.Panel, {
title: 'Home Start',
iconCls: 'home',
layout: 'vbox',
scroll: 'vertical',
style: 'background-color: silver',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
title: 'Home Start'
}],
items: [{
html: 'Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>',
style: 'border:2px solid green',
width: 350,
autoHeight: true
},
testData]
});
Ext.reg('homeCardStart', App.views.HomeCardStart);
Viewport.js:
App.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
id: 'mainTabPanel',
defaults: {
scroll: 'vertical'
},
items: [{
xtype: 'homeCard',
id: 'homeCard',
cls: 'home'
}, {
title: 'Mais',
iconCls: 'more'
}, {
title: 'Mais',
iconCls: 'more'
}, {
title: 'Mais',
iconCls: 'more'
}, {
title: 'Mais',
iconCls: 'more'
}]
});
HomeCard.js:
App.views.HomeCard = Ext.extend(Ext.Panel, {
title: 'Home',
iconCls: 'home',
layout: 'card',
width: '100%',
height: '100%',
style: 'background-color: green;',
items: [{
xtype: 'homeCardStart'
}, {
xtype: 'panel',
title: 'Another card',
style: 'background-color: pink'
}]
});
Ext.reg('homeCard', App.views.HomeCard);
What can be happening? Is it a bug? It only happens with card panel (the same bug occurs without a main tab panel outside)
Thanks!
Leo

The problem you are having is that you are nesting scrollable panels. In your tab panel you set the defaults to always add scroll to each card, and then within that card, the dataview is also scrollable.
To fix the issue, you should either turn scrolling off on your dataview, or remove scrolling on your card item. You cannot have both.

Resources