We Keep Coding

Show tooltip on textfield

I have a textfield with massive text inside and I could not to show it all.
I need tooltip to show all this text from textfield on mouseover. But I can not achieve it using text: c.getValue(). If I put custom string like text: "MyToolTips" everything is OK. I tried to use afterrender and show the same result - nothing, empty tooltip.
Here is my code :-
{
xtype: 'textfield',
name: 'InfoTypingName',
fieldLabel: 'MyLable',
labelWidth: 200,
readOnly: true,
listeners: {
show: function (c) {
Ext.QuickTips.register({
target: c.getEl(),
text: c.getValue(),
enabled: true,
showDelay: 20,
trackMouse: true,
autoShow: true
});
}
}
}

You can try it this way:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.QuickTips.init();
var verylongText="This is very long text. somewhat around too long. and still going on. Oh its still there.";
for(var i=0;i<4;i++) {
verylongText = verylongText + verylongText;
}
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Textfield with tooltip',
items: [{
xtype: 'textfield',
padding: 10,
id: 'uniqueId',
value: verylongText,
readonly:true,
listeners: {
afterrender: function (me) {
console.log(arguments);
var a=Ext.create('Ext.tip.ToolTip', {
dismissDelay: 5000000,
target: 'uniqueId',
html: '<div style="display:flex;word-break:break-all;">' + me.getValue() + '</div>',
width: 'auto',
});
}
}
}]
})
}
});
Link to working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2khp

You can get this working as follows:-
listeners: {
afterrender: function (me) {
// your POST request goes here
Ext.Ajax.request({
url: "data.json",
method: "POST",
success: function (response) {
// set the value got from request
me.setValue(Ext.decode(response.responseText).data.value);
// create tooltip
var a = Ext.create('Ext.tip.ToolTip', {
dismissDelay: 5000000,
target: 'uniqueId',
html: '<div style="display:flex;word-break:break-all;">' + me.getValue() + '</div>',
width: 'auto',
});
}
});
}
}
Working Fiddle
Hope this will help/guide you.

ExtJS 6.2 Can't add plugin to inner grid - TypeError: view is undefined

I have a grid with drag'n'drop and row editing plugins. It worked fined when it was an outer class. However, since I striped the grid from having a class and put as an inner component, it started giving me errors. If I comment out code concerning plugins, it works fine.
Ext.define('Dashboards.view.widgets.barChartAndLine.BarChartAndLineWidgetForm', {
extend: 'Dashboards.view.widgets.WidgetBaseForm',
xtype: 'barChartAndLineWidgetForm',
items : [{
xtype: 'grid',
rowEditing: null,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop'
}
},
listeners: {
drop: function() {
this.updateData();
}
},
initComponent: function() {
var me = this;
this.rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
edit: function() {
me.updateData();
}
}
});
this.plugins = [this.rowEditing];
this.callParent(arguments);
},
store: {
fields : ['label', 'linevalue', 'barvalue'],
bind : {
data : '{widget.data.data.items}'
}
},
columns: [{
header: 'Pavadinimas',
dataIndex: 'label',
flex: 3,
editor: {
allowBlank: false
}
}, {
xtype: 'numbercolumn',
header: 'Stulpelio reikšmė',
dataIndex: 'barvalue',
flex: 1,
editor: {
xtype: 'numberfield',
allowBlank: false
}
}, {
xtype: 'numbercolumn',
header: 'Linijos reikšmė',
dataIndex: 'linevalue',
flex: 1,
editor: {
xtype: 'numberfield',
allowBlank: false
}
}, {
xtype: 'actioncolumn',
width: 30,
items: [{
iconCls: 'x-fa fa-trash',
tooltip: 'Pašalinti',
handler: function(g, ri, ci) {
var grid = this.up().up();
grid.getStore().removeAt(ri);
grid.getStore().sync();
}
}]
}],
tbar: [{
xtype: 'button',
text: 'Pridėti',
handler: function() {
var grid = this.up().up();
var r = {
label: 'label',
linevalue: '0',
barvalue: '0'
};
var modelResult = grid.getStore().insert(0, r);
}
}]
}]
});

Instead of adding the rowediting plugin inside the initComponent function, you can set the plugin with grid's configs.
Based on your code have remote data, I created a fiddle to test the view, you can apply the view structure with your data.
If you have any question, let me know.

Trying to pop-up window that contains a form, but form not shown - extjs 5

I am trying to display a pop-up window that contains a form in extjs 5, using django-rest as backend. I manage to get the pop-up window shown, but the form inside it is not shown. If I put just an html tag instead of the form, the tag contents are shown. I am very confused as I can't make it work to show the form. Any help would be so much appreciated. The codes are:
Controller:
Ext.define('MyApp.controller.Manage', {
extend: 'Ext.app.Controller',
views: ['Manage'],
// controller initialisation
init: function() {
// save scope
var manageController = this;
console.log('manage controller started');
// instanciate view class but hide initially
this.view = this.getView('Manage').create().hide();
// Request manage variables (lastDayUpd)
Ext.Ajax.request({
url: '/api/manage/',
method: 'GET',
success: function(response, options){
console.log('got last day upd');
// Decode response
var res = Ext.util.JSON.decode(response.responseText).results[0].lastDayUpd;
console.log(res);
// Get manage panel from container
var cp = (Ext.ComponentQuery.query('container#manageContentPanel')[0]).getComponent('lastDayUpd');
// Set data to display last day updated
cp.setConfig('html', ('Last day updated: '+res));
},
failure: function(response, options) {
console.log('not got last day upd');
}
});
this.control({
// register for the logout-click
'#logoutButton': {
click: function() {
// mask the complete viewport
this.view.mask('Logout…')
// ask the login-controller to perform the logout in the backend
MyApp.getApplication().getController('Login').performLogout(function(success) {
if(!success) {
// return WITHOUT unmasking the main app, keeping the app unusable
return Ext.Msg.alert('Logout failed', 'Close and restart the Application')
}
// unmask and hide main viewport and all content
this.view.unmask();
this.view.hide();
// relaunch application
MyApp.getApplication().launch();
});
}
},
// register for click in the navigation tree
'#navTree': {
itemclick: function(tree, node) {
// ignore clicks on group nodes
// TODO: pass click on to first sub-item
// ignore clicks on non-leave nodes (groups)
if(!node.data.leaf)
return;
// pass the id of the clicked node to the content-panel
// enable the corresponding content view
this.getContentPanel().setActiveItem(node.data.itemId);
}
},
// Show update form to perform update
'#updButton': {
click: function(){
//alert('Clicked');
//navigationController.getController('Manage').view.show()
this.showUpdateForm();
}
}
});
},
showUpdateForm: function(){
// Get manage panel from container
var form = (Ext.ComponentQuery.query('container#manageContentPanel')[0]).getComponent('updateDaskalosBox').show();
console.log('form is:');
console.log(form);
console.log('show update form');;
},
});
View:
Ext.define('MyApp.view.Manage', {
layout: 'border',
extend: 'Ext.container.Container',
renderTo: Ext.getBody(),
id: "manageContainer",
// todo: not resizing correctly
width: '100%',
height: '100%',
items: [{
region: 'west',
xtype: 'treepanel',
itemId: 'navTree',
width: 150,
split: true,
rootVisible: false,
title: 'Navigation',
tbar: [
{ text: 'Logout', itemId: 'logoutButton' }
]
},
{
region: 'center',
xtype: 'container',
itemId: 'manageContentPanel',
layout: {
type: 'border',
//columns: 3,
//deferredRender: true
},
items: [
{
itemId: 'lastDayUpd',
title: 'Manage Daskalos',
xtype: 'panel',
buttons: [
{
text: 'Update',
itemId: 'updButton'
},
{
text: 'Back',
itemId: 'backButton',
}
],
html: 'Last Day Updated: '
},
{
xtype: 'messagebox',
itemId: 'updateDaskalosBox',
layout: 'fit',
title: 'Update daskalos',
//html: 'A pop up',
//floating: true,
//closable : true,
items: [
{
xtype: 'panel',
itemId: 'updateDaskalosPanel',
//layout: 'fit',
items: [
{
xtype: 'form',
itemId: 'updateDaskalosForm',
//url: '', // to fill
layout: 'fit',
//renderTo: 'updateForm',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 100
},
buttons: [
{
text: 'Update',
itemId: 'updButton',
formBind: true,
},
{
text: 'Cancel',
itemId: 'cancelButton',
}
],
items: [
//Just one field for now to see if it works
//{
//xtype: 'datefield',
////anchor: '100%',
//fieldLabel: 'From',
////name: 'from_date',
////maxValue: new Date() // limited to the current date or prior
//},
{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}
],
},
],
},
],
},
]
}
],
});
After controller initialization, I want when the user clicks the update button to pop up a window that contains a form to post data to the server. The pop-up is thrown, but the form inside the panel that the window contains as child item seems that has the problem. Does anyone see what I miss here?
Thanks for the help! Babis.

Why you dont just create a window containing a form? Your "pop-up window" is a messagebox, that you abuse. There is also no need to put a form in a panel. A form extends from panel.
// you have some trailing commas in your code

Ext.define('MyApp.view.Manage', {
extend: 'Ext.window.Window',
alias : 'widget.manage',
requires: ['Ext.form.Panel'],
height: 300,
width: 600,
layout: 'fit',
resizable: false,
autoShow: true,
animCollapse:false,
iconCls: 'icon-grid',
initComponent: function() {
this.items = [{
xtype: 'form',
/*
*
* Start you code for form
*/
}];
this.callParent(arguments);
}
});
You want a form in a window, but can you tell why are you extending container ??

Referencing an element drawn in the main App

I am writing a Rally App in which I have a rallychart and a button.
I need to access the chart and modify its setting on a button click. The button is also in the same app container as the rallychart.
I tried Ext. this. etc.
These access specifiers do not work. Could you please help me with this?
Sample code:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
id: 'appid',
launch: function () {
var datepickerfrom = Ext.create('Ext.Container', {
items: [{
xtype: 'rallytextfield',
fieldLabel: 'Enter Start Date for chart (mm/dd/yyyy): ',
labelWidth: 150
}],
renderTo: Ext.getBody().dom,
id: 'd1'
});
this.add(datepickerfrom);
this.add(
{
xtype: 'rallychart',
height: 400,
width: 800,
id: 'chart1',
itemId: 'chart1',
chartConfig: chartConfig,
renderTo: Ext.getBody().dom
}
);
button2 = {
xtype: 'rallybutton',
text: 'Plot Graph',
handler: function () {
console.clear();
console.log("Clicking button");
// I NEED to ACCESS the CHART HERE or EVEN the TEXTFIELD DATA HERE
},
callback: function(){
}
};
this.add(button2);

You may reference them via itemID. After the itemID on the element is set:
this.add(
{
xtype: 'rallychart',
height: 400,
itemId: 'myChart',
chartConfig: {//...}
//...
}
it can be used to reference the element:
this.down('#myChart')

In addition to what Nick said (referencing by id) you can create a variable for each one as you define them like so:
var pickerForm = this.add(datepickerfrom);
var chart = this.add({
xtype: 'rallychart',
height: 400,
width: 800,
id: 'chart1',
itemId: 'chart1',
chartConfig: chartConfig,
renderTo: Ext.getBody().dom
});
And then reference them like this:
chart.method1();
...
Here is an example application. The toggle button shows and hides the cardboard:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [{
xtype: 'button',
text : 'Toggle Cardboard',
handler: function() {
if (App.cardBoard.isHidden()) {
App.cardBoard.show();
} else {
App.cardBoard.hide();
}
}
}],
launch: function() {
App = this;
var addNewConfig = {
xtype: 'rallyaddnew',
recordTypes: ['PortfolioItem/Feature', 'PortfolioItem/Initiative', 'PortfolioItem/Theme'],
ignoredRequiredFields: ['Name', 'Project'],
showAddWithDetails: false
};
App.addNew = this.add(addNewConfig);
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['PortfolioItem/Feature', 'PortfolioItem/Rollup'],
attribute: 'InvestmentCategory'
};
App.cardBoard = this.add(cardBoardConfig);
}
});

Extjs getting the `formpanel` that is created dynamically from button click

I have ExtJS View-Port panel, that contain center panel, that contain tablpanel, in which I have added gridpanel in one tab, on this I have put Add Person button in tbar of , that will add a new tab of a formpanel, in its Reset button, I am not able to access Form to reset it.
Do any body have faced same issue?
Please help how to get it working.
Ext.onReady(function() {
// Ext.get(document.body, true).toggleClass('xtheme-gray');
var myBorderPanel = new Ext.Viewport({
title: 'Software Releases',
// renderTo: document.body,
renderTo: Ext.getBody(),
layout: 'border',
id: 'main',
items: [{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
tbar: [{
text: 'Add person', // only when user have write priovilege.
handler: function() {
var tabpanel = Ext.getCmp('main').findById('tabs');
var wtab = tabpanel.add({
// // var addrelease_win = new Ext.Window({
url: 'reledit-submit.json',
id: 'addform0',
// height: 300, width: 400,
layout: 'form',
frame: true,
title: 'Add New Release',
closable: true,
items: [{
xtype: 'textfield',
fieldLabel: 'Name'
}],
buttons: [{
text: 'Save',
scope: wtab,
handler: function() {
wtab.getForm().submit({
success: function(f, a) {
Ext.Msg.alert('Success', 'It worked');
},
failure: function(f, a) {
Ext.msg.alert('Warnning', 'Error');
}
});
}
}, {
text: 'Reset',
scope: wtab,
handler: function() {
// Ext.getCmp('addform0').getForm().reset();
// tabpanel.getActiveTab.reset();
// Ext.getCmp('main').findById('addform').getForm().reset();
// this.getForm().reset();
// this.getForm().reset();
// Ext.Msg.alert('sdfsd', 'asdfsd ' + Ext.getCmp('addform0').getValue() + ' sdfsd');
this.findById('addform0').getForm().reset();
// Ext.Msg.alert('sdfsd', 'asdfsd ');
}
}]
});
// addrelease_win.show();
tabpanel.activate(tabpanel.items.length - 1);
}
}],
xtype: 'tabpanel',
id: 'tabs',
activeTab: 0,
items: [{
title: 'Data',
xtype: 'editorgrid',
store: store,
stripeRows: true,
// autoExpandColumn: 'title',
columns: [{
header: "Name",
dataIndex: "name",
width: 50,
sortable: true
}, {
header: "DOB",
dataIndex: "dob",
sortable: true
}]
}],
margins: '5 5 0 0',
})
})
});

Doesn't wtab.getForm().reset(); work?
If not, use this.ownerCt to get to the buttons container and then just walk up the chain until you get to a point where you can access the form.
UPDATE
The real problem is that its a Panel with a form layout that is created and not a FormsPanel.
Change layout:'form' into xtype:'form' and .getForm() should work.