Prevent qtip from showing - javascript

How can I prevent qtip from showing on grid cells with "large" data that does not fit inside its width? (on ExtJS 6.5.2 - Modern Toolkit)
Example
Add this to a sencha fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
store: store,
columns: [
{
text: 'Name',
dataIndex: 'name',
minWidth: 200,
//flex: 1,
//cellWrap: true,
cell: {
bodyStyle: {
whiteSpace: 'normal'
}
}
},
{ text: 'Email', dataIndex: 'email', flex: 2, minWidth: 250 },
{ text: 'Phone', dataIndex: 'phone', flex: 1, minWidth: 120 }
],
//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});

Grid without tooltip
Default wrapping behaviour but no tooltip, demo: https://fiddle.sencha.com/#view/editor&fiddle/29ii
Grid with wrapping capabilities
Demo: https://fiddle.sencha.com/#view/editor&fiddle/29if
In short you need to set these rules to wrap content:
white-space: normal;
word-break: break-word;
And set grid's "variableHeights" to true: http://docs.sencha.com/extjs/6.5.1/modern/Ext.grid.Grid.html#cfg-variableHeights
Note: in the fiddle the CSS rules are applied using grid's "cls" config param, and styles are placed inside index.html

Related

Hbox layout panel doesn't auto fit items after resize event

I've a resizable panel which includes another panel with hbox layout inside. Whole display settings are correct expect one behaviour; when resizing main panel with mouse after render; it's not auto-fit items inside.
To be success fit those item; need to resize main panel once again or refreshing main panel from tool config's gear. How can I set this mouse event resizing as auto-fit?
Here is a screenshot and both of panel's code snippets;
Main Panel:
Ext.define('MyApp.BasePanel', {
extend: 'Ext.panel.Panel',
xtype: 'basepanel',
resizable: true,
scrollable: true,
frame: true,
plugins: 'responsive',
tools: [
{
type: 'refresh',
handler: 'refreshPanel'
},
{
type: 'gear',
handler: 'setPanel'
}
],
initComponent: function() {
var me = this;
me.items = me.setupItems();
me.callParent();
},
setupItems: function() {
var me = this;
return Ext.Array.merge(me.getChildPanel(), me.getOtherChildPanel());
},
getChildPanel: function () {
return [];
},
getOtherChildPanel: function () {
return [];
},
Here is called child panel;
Ext.define('MyApp.ChildComponent', {
//Calling this class with 'getChildPanel()' method on BasePanel.
extend: 'Ext.container.Container',
alias: 'widget.mychildcomponent',
layout: {
type: 'hbox', align: 'stretch', pack: 'center'
},
defaults: {
margin: 10,
width: 300,
height: 90,
flex: 1
},
items: [
{
How can I set this mouse event resizing as auto-fit
You need to use flex config for ExtJS child items to automatically adjust.
Flex
Flex may be applied to child items of a box layout (Ext.layout.container.VBox or Ext.layout.container.HBox). Each child item with a flex property will fill space (horizontally in hbox, vertically in vbox) according to that item's relative flex value compared to the sum of all items with a flex value specified.
Any child items that have either a flex of 0 or undefined will not be 'flexed' (the initial size will not be changed).
In this Fiddle, I have created a demo using resizable panel.
Code snippet
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('CommonGrid', {
extend: 'Ext.grid.Panel',
xtype: 'commongrid',
title: 'Data',
store: {
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'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
},
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}]
});
Ext.create({
xtype: 'panel',
layout: 'vbox',
title: 'Demo',
bodyPadding: 10,
width: 500,
border: true,
resizable: true,
draggable: true,
tools: [{
type: 'refresh'
}, {
type: 'settings'
}],
renderTo: Ext.getBody(),
defaults: {
layout: 'hbox',
xtype: 'container',
width: '100%',
flex: 1,
defaults: {
xtype: 'button',
margin: '0 10',
flex: 1
}
},
items: [{
maxHeight:30,
items: [{
text: 'Button 1'
}, {
text: 'Button 2'
}, {
text: 'Button 3'
}]
},{
xtype:'tbspacer',
height:10,
maxHeight:10
}, {
items: [{
xtype: 'commongrid'
}, {
xtype: 'commongrid'
}]
}]
})
}
});
This happens because the default layout for all Containers is Auto Layout
Make BasePanel layout hbox or vbox and if you want it to be scrollable do not set align

Dynamically changing property field in ExtJs Grid

I am using a grid with a checkbox and a combobox. Right now I am trying to find a way to make the combobox multi select if the checkbox is checked in roweditor.
var pEditing =
Ext.create('Ext.grid.plugin.RowEditing',
{
clicksToMoveEditor: 2,
errorSummary: false,
autoCancel: false,
listeners:
{
change: function (newValue, oldValue, eOpts)
{
if (newValue.value == true)
{
this.down().down('grid').queryById('comboboxColumn').multiSelect = true;
}
else
{
this.down().down('grid').queryById('comboboxColumn').multiSelect = false;
}
console.log("Checkbox Change Debug");
}
}
});
Grid creation code :
{
renderer: renderCheckbox,
itemId: 'checkboxColumn',
header: 'Checkbox',
width: 100,
sortable: false,
dataIndex: 'ddCheckbox',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor',
listeners:{
change: function (newValue, oldValue, eOpts) {
pEditing.fireEvent('change',newValue, oldValue, eOpts);
}
},
},
},
{
header: 'Speed',
dataIndex: 'ddSpeed',
itemId: 'comboBoxColumn',
width: 125,
editor:
{
xtype: 'combo',
editable: false,
multiSelect: false,
store:
[
['1', '1'],
['2', '2'],
['3', '3'],
['4', '4'],
['5', '5']
]
}
}
Right now the event is firing off and I can see the debug message printed to the log. However the multiselect property is not persisting after the event is fired. Is there any easy way to change the property of this combobox in the row? For example, if there are 3 rows in the grid, row one can have the checkbox checked, and multiple values selected while row two has the checkbox unchecked and only one selection can be made? I know I can find the index of the checkbox selected by using in the change function.
this.down().down('grid').getSelectionModel().getSelection()[0].getData()
Thanks
"multiselect" property is not persisting because, your below code is not yet reach till combo box control.
this.down().down('grid').queryById('comboboxColumn').multiSelect = true;
As per your code, combo box control is under 'comboBoxColumn' item. So specify "itemID" for combo box like
xtype: 'combo',
editable: false,
multiSelect: false,
itemId: 'comboBoxItems',
store:[....]
Then, try below code
this.down().down('grid').queryById('comboboxColumn').queryById('comboBoxItems').multiSelect = true;
As you using RowEditing plugin
In checkbox on value change event you will get 4 parameters change:function(field, newValue, oldValue, eOpts)
1) Usign field parameter you will get your selected row(roweditor) like this field.up().
2) Using this roweditor you can use roweditor.down() method and get your combo.
3) After that getting your component(combo) and using second parameter newValue you can set multiSelect like combo.multiSelect = newValue
Here is I have created an sencha fiddle demo.
Hope this will help you to achieve your solution or requirement
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'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'combobox',
allowBlank: false
}
}, {
header: 'Multiple',
dataIndex: 'multiple',
sortable:false,
menuDisabled:true,
flex: 0.5,
editor: {
xtype: 'checkboxfield',
// checked:true,
listeners: {
change: function (field, newValue) {
var combo = field.up().down('#state');
combo.reset();
combo.multiSelect = newValue
}
}
}
}, {
header: 'States',
dataIndex: 'states',
flex: 1,
editor: {
xtype: 'combo',
store: states,
itemId: 'state',
queryMode: 'local',
displayField: 'name',
multiSelect:true,
valueField: 'abbr',
filterPickList: false,
listeners:{
afterrender:function(){
this.multiSelect=false;
}
}
}
}],
selModel: 'rowmodel',
plugins: {
ptype: 'rowediting',
clicksToEdit:1
},
height: 200,
width: '100%',
renderTo: Ext.getBody()
});

ExtJS GridPanel with radiobutton on the columns

So i have an usual grid, with some columns:
{
xtype : 'gridpanel',
mode : "MULTI",
region : 'center',
title : "grid",
id : 'datagridResult',
margin : '10 5 5 5',
columns : [
{
xtype : 'gridcolumn',
dataIndex: 'TEST',
flex : 0.25
},
{
xtype : 'gridcolumn',
dataIndex: 'Test2'
flex : 2
},
//...
What i want is to add 3 more columns which are radiobuttons (one button per column). I tried something like this:
{
xtype : 'gridcolumn',
text : "FOR"
dataIndex: 'for',
flex : 1,
editor: {
xtype : 'radiofield',
name : 'Regex',
inputValue: 'Checked'
},
}
And it doesn't work. So i am here to ask any sugestions.
And it doesn't work. So i am here to ask any sugestions
In ExtJS have xtype :'widgetcolumn'.
A widget column is configured with a widget config object which specifies an xtype to indicate which type of Widget or Component belongs in the cells of this column.
I have created an Sencha Fiddle demo. It will show how is working. Hope this will help you.
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', {
name: 'checked',
type: 'boolean',
defaultValue: true
}],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}, {
text: 'Status',
width: 150,
xtype: 'widgetcolumn',
dataIndex: 'checked',
onWidgetAttach: function (column, widget, record) {
widget.down(`[inputValue=${record.get('checked')}]`).setValue(true);
},
widget: {
xtype: 'radiogroup',
items: [{
boxLabel: 'Yes',
inputValue: true
}, {
boxLabel: 'No',
inputValue: false
}]
}
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

Ext JS components within an expanded row

Simple question here: I have a working grid with expanding rows within my Ext JS application. Boom.
Currently I have html elements inside of my expanded row (it's just one big div), but that seems to be all the expanded row is capable of displaying.
Is there anyway to render Ext components inside of my expanded rows?
Cheers mates, upvotes await!
You can just render components into the row expanders element.
var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
plugins: {
ptype: 'rowexpander',
rowBodyTpl : [
'<div class="row-expander-ct"></div>'
]
},
store: {
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" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]
},
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 300,
width: 400,
renderTo: Ext.getBody()
});
grid.store.on({
// Delay the execution of the listener because the grid view will also
// react to this event, and we want the rows to be rendered before we
// modify them...
delay: 1,
load: function() {
Ext.each(grid.el.query('.row-expander-ct'), function(ct) {
Ext.widget('textfield', {
renderTo: ct
,fieldLabel: "Label"
,width: '100%'
});
});
}
});
grid.store.load();

Grid Return on Editable Field in Rally SDK2

I have a grid with a column like this:
{ text: 'Name', dataIndex: 'Name', editor: 'rallytextfield', flex: 2.5, sortable: false },
When I fill in information in the text field and then click somewhere else, the data is saved; however, when I hit return or tab like in a Custom Grid, nothing happens. What can I configure to allow me to return away from this field and so get the value to save without clicking?
EDITED: It turns out that it's to do with adding checkboxes. If I add a selModel, the return doesn't work. If I take it away, the return works! Here's the full app:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var store = Ext.create('Rally.data.custom.Store', {
data:[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]
});
this.add( Ext.create('Rally.ui.grid.Grid', {
title: 'Simpsons',
store: store,
columnCfgs: [
{ text: 'Name', dataIndex: 'name', editor: 'rallytextfield' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone', editor: 'textfield' }
],
height: 200,
width: 400,
selType: 'checkboxmodel',
selModel: {
injectCheckbox: 1,
mode: 'SIMPLE'
}
}) );
}
});
Commenting out selType & selModel and I can hit return to go from one row to the next, but with the selType & selModel in there, no return but tab does work.
The Return/Tab inline edit navigation should be built-in without any additional configuration. When I try to repro the issue the first thing I run into is this:
App works as desired in debug mode but crashes in Rally environment
That may be the root cause since the app is likely just refreshing once the field is edited.
My working column config on my gridConfig looks like this:
columnCfgs: [
'FormattedID',
{
text: 'Name',
dataIndex: 'Name',
editor: 'rallytextfield',
flex: 2.5,
sortable: false
},
'Owner'
],

Categories