We Keep Coding

ExtJs 3.4 - how to ToolTip a content of a textField component that was pre-loaded

This is the component where I'm trying to put a Tooltip:
this.textFieldStreet = new Ext.form.TextField({
id : 'idTextFieldStreet',
fieldLabel : 'Street',
autoCreate : limitChar(30,30),
listeners : {
render : function(c){
Ext.QuickTips.register({
target : c.getEl(),
html : '' + Ext.getCmp('idTextFieldStreet').getValue()
}
});
}
}
});
In another .js I created the function that define every component like you see before and invoke the function as you see forward:
var componentFormCustomer = new ComponentFormCustomer();
Then I set value like:
componentFormCustomer.textFieldStreet.setValue('Some street info')
Now, here's the problem, I was looking for some ideas to do that and found nothing, I don't know if this is the right way to accomplish the tooltip. Help!

Solution:
Define show listener for created tooltip. In this listener get the value of textfield and update tooltip.
With this approach, the tooltip's content will change dynamically and will show the content of tooltip's target.
Ext.onReady(function(){
Ext.QuickTips.init();
var textFieldStreet = new Ext.form.TextField({
renderTo : Ext.getBody(),
id : 'idTextFieldStreet',
fieldLabel : 'Street',
value : 'Initial value',
bodyCfg : {
tag: 'center',
cls: 'x-panel-body',
html: 'Message'
},
listeners : {
render : function(c) {
new Ext.ToolTip({
target : c.getEl(),
listeners: {
'show': function (t) {
var value = t.target.getValue();
t.update(value);
}
}
});
}
}
});
var button = new Ext.Button({
renderTo : Ext.getBody(),
text : 'Change Tooltip',
handler : function () {
textFieldStreet.setValue('New value');
}
});
});
Notes:
Tested with ExtJS 3.4.1.

data is not showing properly in slickgrid: some columns are not showing the data at startup

Im working with slickgrid to show my data on UI. I'm using dataview to set the data in the grid. The problem I'm getting is when I set the data in the data view , at start it just shows only first 3-4 columns filled with data and all other columns empty. While when I navigate to last page (rihgt now I have 3 pages in slickgrid pagination) it shows complete data, then it works fine for all the page (i.e. after going to last page , it shows data for all pages for all columns). I tried rendering grid and refreshing the dataview but its not working.
here is my code for rendering the slickgrid on page.
var data = [];
var column = [ {
id : 'fillid',
name : 'Fill ID',
field : 'fillid'
}, {
id : 'oid',
name : 'Order ID',
field : 'oid'
}, {
id : 'price',
name : 'Price',
field : 'price'
}, {
id : 'fillQTY',
name : 'Fill QTY',
field : 'fillQTY'
}, {
id : 'symbol',
name : 'symbol',
field : 'symbol'
}, {
id : 'cumQTY',
name : 'cumQTY',
field : 'cumQTY'
}, {
id : 'fillPX',
name : 'Fill PX.',
field : 'fillPX'
}, {
id : 'transactiontime',
name : 'Transaction Time',
field : 'transactiontime'
}, {
id : 'ccy',
name : 'Currency',
field : 'ccy'
}, {
id : 'venue',
name : 'Venue',
field : 'venue'
}, {
id : 'fixingdate',
name : 'Fixing Date',
field : 'fixingdate'
}, {
id : 'sendtime',
name : 'Send Time',
field : 'sendtime',
width : 110
}, {
id : 'side',
name : 'Side',
field : 'side'
}, {
id : 'orderQTY',
name : 'Order QTY',
field : 'orderQTY'
} ];
var resData;
resData = fillsDATA.data;
for (j = 0; j < resData.length; j++) {
var obj = {
id : j ,
fillid : resData[j].fillid,
oid : resData[j].oid,
price : resData[j].price,
fillQTY : resData[j].fillQTY,
symbol : resData[j].symbol,
cumQTY : resData[j].cumQTY,
fillPX : resData[j].fillPX,
transactiontime : resData[j].transactiontime,
ccy : resData[j].ccy,
venue : resData[j].venue,
fixingdate : resData[j].fixingdate,
sendtime : resData[j].sendtime,
side : resData[j].side,
orderQTY : resData[j].orderQTY
};
data[data.length] = obj;
}
var options = {
editable : true,
enableAddRow : false,
autoEdit : false,
autoHeight : true
};
var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
var dataView = new Slick.Data.DataView({
groupItemMetadataProvider : groupItemMetadataProvider,
inlineFilters : true
});
var tradesGrid = new Slick.Grid(FillsGrid, dataView, column, options);
tradesGrid.registerPlugin(groupItemMetadataProvider);
var pager = new Slick.Controls.Pager(dataView, tradesGrid,
$("#tradesPager"));
dataView.onRowCountChanged.subscribe(function(e, args) {
tradesGrid.updateRowCount();
tradesGrid.render();
});
dataView.onRowsChanged.subscribe(function(e, args) {
tradesGrid.invalidateRows(args.rows);
tradesGrid.render();
});
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();
dataView.setPagingOptions({
pageSize : 20
});
tradesGrid.render();
tradesGrid.updateRowCount();
dataView.refresh();
I'm using the grid in many other different place in my app and its working fine I don't understand where I'm going wrong here.
Any help would be highly appreciated. Thanks

The listener and callback in Ext

I'm new in Ext, I see some codes in Ext.onReady(...)
tabItems.push({
id : 'schema-${form.schema.id}',
title : '${form.description}',
tabTip : '${form.description}',
tooltipType: 'title',
xtype : 'ttpanel',
executeScripts : true,
listeners : { load : initObjs, unload : unloadObjs, activate : ... },
autoLoad : { url : 'selection.do',
params : ...,
scripts : true,
callback : cb1
}
}
);
My question is, of:
"load:initObjs",
"callback:cb1",
page is rendered and user can operate it,
which of these three runs first? Why?
Thanks a million!

how to set programmatically field components in grid edit mode

I want to edit a grid with comboxbox and fields.
While editing the selected row, On select event of combobox i want to set some value from database to the field in grid.
I don't know how to set any value in a field control while row is in edit mode.
some one suggested "with an EditorGridPanel you're supposed to assign editing to controls and not directly database" me but i dont know how to.
here is my code
var triprate_idEditor = {
xtype : 'combobox'
, typeAhead : true
, triggerAction : 'all'
, displayField : 'name'
, valueField : 'id'
, store : 'TriprateAllStore'
, queryMode : 'local'
, emptyText : 'Select a name...'
, listeners:
{
select: function(combo, rec) {
console.log(' here');
// var triprateall = Ext.data.StoreManager.lookup('TriprateAllStore');
// triprateall.filter(id:combo.value);
var g = Ext.getCmp('Tripgrid-Id');
//return default value 0
console.log(g.getSelectionModel().selected.items[0].data.triprate);
//get triprate from database, excluded here
//set triprate to 400 but not in editor
g.getSelectionModel().selected.items[0].data.triprate = 400;
//return value 400
console.log(g.getSelectionModel().selected.items[0].data.triprate);
}
}
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
id: 'TripEditingGrid',
errorSummary: false
});
Ext.define('Fleet.view.grids.TripGrid',
{
extend : 'Ext.grid.Panel',
alias : 'widget.Tripgrid', //xtype
id : 'Tripgrid-Id', //Unique Id
store : 'TripStore',
selType : 'rowmodel',
plugins: [rowEditing],
columns :
[
{
header : 'id'
, dataIndex : 'id'
, width : 80
, field : { xtype : 'numberfield' }
},
{
header : 'triprate id'
, dataIndex : 'triprate_id'
, width : 100
, filter : true
, editor : triprate_idEditor
, renderer : function(value, metaData, record, rowIndex, colIndex, store, view){
return record.data.triprate_name7; //desc column for display in gird
}
},
{
header : 'triprate'
, dataIndex : 'triprate'
, width : 80
, field : { xtype : 'numberfield' }
},
{
header : 'status'
, dataIndex : 'status'
, width : 70
, renderer : formatBoolean
, editor : checkboxEditor
}
]
});

First of all you should use editor property when defining grid columns and put your code defining combobox editor there.

Scope issue in extjs 4

I have this treepanel and i want to call this.getId() method of mainpaneltree from inside "Expand all" button But all i get is method undefined.I tried to put scope:thisin config objects but no success.
Ext.define('MA.view.patient.Tree', {
extend : 'Ext.tree.Panel',
alias : 'widget.EditPatientTree',
title : 'Simple Tree',
width : 150,
store:'Tree',
dockedItems : [ {
xtype : 'toolbar',
items : [ {
text : 'Expand All',
scope: this,
handler : function() {
//this.expandAll gives "Uncaught TypeError: Object [object DOMWindow] has no method 'getId'"
this.expandAll();
//the same error for this.getId();
this.getId();
}
} ]
} ],
rootVisible : false,
initComponent : function() {
this.callParent(arguments);
}
});
So my question is how to get reference to the current component and call its methods while you are inside nested methods or config objects of current component

The handler has arguments that are passed in, 1 of them is normally the button. From the button you can get the container.
Ext.define('MA.view.patient.Tree', {
extend : 'Ext.tree.Panel',
alias : 'widget.EditPatientTree',
title : 'Simple Tree',
width : 150,
store:'Tree',
dockedItems : [ {
xtype : 'toolbar',
items : [ {
text : 'Expand All',
scope: this,
handler : function(button, event) {
var toolbar = button.up('toolbar'), treepanel = toolbar.up('treepanel');
treepanel.expandAll();
treepanel.getId();
}
} ]
} ],
rootVisible : false,
initComponent : function() {
this.callParent(arguments);
}
});

You can make use of the methods like up, down for get references of components that are parent or child. In your case, you could get the reference of the tree panel by:
myTree = this.up('treepanel');
Similarly, you could use the down method, to get hold of any child reference.