i have done toolpip for compobox list items
listConfig: {
itemTpl: [
'<div data-qtip="{description}">{mydisplayField}</div>'
]
now I'm trying to show tooltip for selected item,current value
i have search many times but I cant can't do to this .
If you have done task like this pleas tell me.
it was so easy
on afterrender
var fieldStore = field.getStore();
Ext.create('Ext.tip.ToolTip', {
target: field,
listeners: {
beforeshow: function updateTipBody(tip) {
var value = field.getValue();
if (!value && value !== 0) {
return false; //not show
}
var record = fieldStore.getById(value);
tip.update(record.get('description'));
}
}
});
Related
it seems very straight forward, but after a lot of tries and online searching, still no luck with it.
environment:
ExtJS 3.4
here is a jsfiddle I am working on: http://jsfiddle.net/v4ZzT/8/
new Ext.TabPanel({
renderTo: 'tab-with-chkbox',
activeTab: 0,
items:[
{
title: '<input type="checkbox"> Disabled?</input>',
html: 'Sample panel'
}
]
});
but that checkbox doesn't respond to click.
also found this link on sencha forum:
http://www.sencha.com/forum/showthread.php?114794-Checkbox-in-tab-header
it recommends changing iconCls. but I couldn't find a way to detect if this icon is clicked or not.
The input box gets checked, however the tab panel event handler redraws the title after handling the click event. You will need to modify the click event handler for the TabPanel in order to change the title being drawn, although a little messy you can do something like this:
findTargets: function (e) {
var item = null,
itemEl = e.getTarget('li:not(.x-tab-edge)', this.strip),
input = e.getTarget('input');
if (itemEl) {
item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
if (input) {
var inputEl = Ext.get(input),
isChecked = inputEl.getAttribute('checked');
if (isChecked) {
item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
item.setTitle(item.title);
} else {
inputEl.dom.setAttribute('checked', 'checked');
}
}
if (item.disabled) {
return {
close: null,
item: null,
el: null
};
}
}
return {
close: e.getTarget('.x-tab-strip-close', this.strip),
item: item,
el: itemEl
};
}
Here's a working sample based on your code, hope it helps to solve your problem.
var tabContainer = tabPanel.getAt(0);
var customTitle = "hello";
tabContainer.tab.on('click', function(el,event) {
var target = event.target;
if( target.type == "checkbox" ) {
// If checkbox has just been checked
if( event.target.checked ) {
tabContainer.setTitle( '<input type="checkbox" checked />' + customTitle );
tabContainer.checked = true;
// If checkbox has just been unchecked
} else {
tabContainer.setTitle( '<input type="checkbox" />' + customTitle );
tabContainer.checked = false;
}
}
});
I have a grid and associated checkbox with it. By default when the grid loads it dispalys all the records but i want to filter it when the checkbox is selected and load back all the records when the checkbox is unchecked. Basically i want to display only the grid data with resolved date that equals "0001-01-01".I have given the checkbox code and grid screenshot below.
{
xtype: 'checkboxfield',
boxLabel: 'Filter by UN-Resolved',
id:'chkBox',
handler: function() {
var store = Ext.getCmp('defGrid').getStore();
if(Ext.getCmp('chkBox').getValue()){
store.filterBy([
{filterFn: function(item) {return item.get('ID') == 'Sales';{console.log(item);}}
]);
if(filter.data.items[0].data.ResolvedDate === '0001-01-01')
{console.log("I'm inside");}
});
}
I was finally able to resolve this... code as below ...
{
xtype: 'checkboxfield',
boxLabel: 'Filter by UN-Resolved',
id:'chkBox',
handler: function() {
var grid = Ext.getCmp('defGrid');
var checked = Ext.getCmp('chkBox').getValue();
if(checked){
if (grid.store!=undefined) {
grid.store.filterBy(function(record) {
//console.log(record.data.ResolvedDate);
return record.data.ResolvedDate === '0001-01-01' ;
});
grid.getView().refresh();
}
}
else{
var grid = Ext.getCmp('defGrid');
grid.store.clearFilter(true);
grid.getView().refresh();
}
}
}
i am using checkboxmodel to select rows but i want to make some rows to be selection disabled based on some logic...
here is my what i am trying but 'beforeselect' function doesn't even fires
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
mode:'multi',
listeners: {
beforeselect:function(grid){
var grid=Ext.getCmp('mylist');
var selectionModel=grid.getSelectionModel();
var selectedRecords=selectionModel.getSelection();
var myValue=selectedRecords[0].get('nowreceive');
var myvalue1=selectedRecords[0].get('received');
if(myValue>myvalue1)
{return false;}
else
return true;
}} }
),
beforecellmousedown event in the view config works for me.This is done in the viewconfig of the grid...
viewConfig: {
listeners: {
beforecellmousedown: function(view, cell, cellIdx, record, row, rowIdx, eOpts){
var myvalue=record.get('quantity_ordered');
var myvalue1=record.get('quantity_received')
if(myvalue==myvalue1)
{
return false;
}
else {
return true;
}
}
}
},
How do you know the event is not firing? It should be, but my guess is that selectedRecords[0] is not defined and that crashes your execution, because getSelection() probably returns an empty array, before any selection has occurred.
What you should do is to use the second argument of beforeselect, which is the record that's going to be added to the selection.
So you can implement your listener in a much simpler way:
beforeselect: function (selModel, record) {
if (record.get('nowreceive') > record.get('received')) {
return false;
}
}
I have a problem. I use extjs grid. This grid will be refreshed every seconds.
I refresh with this function:
ND.refresh = function() {
ND.commList.load();
}
var refreshSeconds = refreshRate * 1000;
var t = setInterval('ND.refresh()', refreshSeconds);
But when someone selected a row to highlight it it reset this selection.
How can I remember the selected row and highlight it again after refresh?
This is my grid:
var grid = Ext.create('Ext.grid.Panel', {
autoscroll: true,
region: 'center',
store: ND.dashBoardDataStore,
stateful: true,
forceFit: true,
loadMask: false,
stateId: 'stateGrid',
viewConfig: {
stripeRows: true
},
columns: [{
text: 'Vehicle',
sortable: true,
flexible: 1,
width: 60,
dataIndex: 'vehicle'
}, {
text: 'CCU',
sortable: true,
flexible: 0,
width: 50,
renderer: status,
dataIndex: 'ccuStatus'
}]
});
Thanks guys
I wrote simple Ext.grid.Panel extension that automatically selects back rows that were selected before store reload. You can try it in this jsFiddle
Ext.define('PersistantSelectionGridPanel', {
extend: 'Ext.grid.Panel',
selectedRecords: [],
initComponent: function() {
this.callParent(arguments);
this.getStore().on('beforeload', this.rememberSelection, this);
this.getView().on('refresh', this.refreshSelection, this);
},
rememberSelection: function(selModel, selectedRecords) {
if (!this.rendered || Ext.isEmpty(this.el)) {
return;
}
this.selectedRecords = this.getSelectionModel().getSelection();
this.getView().saveScrollState();
},
refreshSelection: function() {
if (0 >= this.selectedRecords.length) {
return;
}
var newRecordsToSelect = [];
for (var i = 0; i < this.selectedRecords.length; i++) {
record = this.getStore().getById(this.selectedRecords[i].getId());
if (!Ext.isEmpty(record)) {
newRecordsToSelect.push(record);
}
}
this.getSelectionModel().select(newRecordsToSelect);
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
}
});
The straightforward solution is just save somewhere in js index of selected row. Then after reload you could easily select this row by index using grid's selection model.
Get selection model: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-getSelectionModel
var selectionModel = grid.getSelectionModel()
Get selected rows: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getSelection
var selection = selectionModel.getSelection()
Set selected row back: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-select
selectionModel.select(selection)
Here is another way to select the previously selected record:
var selectionModel = grid.getSelectionModel()
// get the selected record
var selectedRecord = selectionModel.getSelection()[0]
// get the index of the selected record
var selectedIdx = grid.store.indexOfId(selectedRecord.data.id);
// select by index
grid.getSelectionModel().select(selectedIdx);
For some reason the grid.getSelectionModel().select(record) method wasn't working for me, but selecting by index seems to work.
Edit: found out why grid.getSelectionModel().select(record) method wasn't working. Apparently the store is reloaded, the record instances aren't the same (they have different automatically generated Ext IDs). You have to use selectAt() in this case.
for extjs 4.1.7 users
need a workarround about the statement in
refreshSelection() {
...
Ext.defer(this.setScrollTop, 30, this,
[this.getView().scrollState.top])
}
thus setScrollTop no longer exists
so a working soluction is add
me.getView().preserveScrollOnRefresh = true;
in initComponent
Ext.define('PersistantSelectionGridPanel', {
extend: 'Ext.grid.Panel',
selectedRecords: [],
initComponent: function() {
this.callParent(arguments);
this.getStore().on('beforeload', this.rememberSelection, this);
this.getView().on('refresh', this.refreshSelection, this);
//-------------------------------------------
me.getView().preserveScrollOnRefresh = true;
//-------------------------------------------
},
rememberSelection: function(selModel, selectedRecords) {
if (!this.rendered || Ext.isEmpty(this.el)) {
return;
}
this.selectedRecords = this.getSelectionModel().getSelection();
this.getView().saveScrollState();
},
refreshSelection: function() {
if (0 >= this.selectedRecords.length) {
return;
}
var newRecordsToSelect = [];
for (var i = 0; i < this.selectedRecords.length; i++) {
record = this.getStore().getById(this.selectedRecords[i].getId());
if (!Ext.isEmpty(record)) {
newRecordsToSelect.push(record);
}
}
this.getSelectionModel().select(newRecordsToSelect);
}
});
i have make modification on this code.
If you make selection, and aplys a filter on the store and reload it, the selection model have a first empty array in this selected collection ( at index 0 ).
This modification is in the last line of the "refreshSelection" function.
if (newRecordsToSelect.length >= 1){
this.getSelectionModel().select(newRecordsToSelect);
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
}
I have a problem. I use extjs grid. This grid will be refreshed every seconds.
I refresh with this function:
ND.refresh = function() {
ND.commList.load();
}
var refreshSeconds = refreshRate * 1000;
var t = setInterval('ND.refresh()', refreshSeconds);
But when someone selected a row to highlight it it reset this selection.
How can I remember the selected row and highlight it again after refresh?
This is my grid:
var grid = Ext.create('Ext.grid.Panel', {
autoscroll: true,
region: 'center',
store: ND.dashBoardDataStore,
stateful: true,
forceFit: true,
loadMask: false,
stateId: 'stateGrid',
viewConfig: {
stripeRows: true
},
columns: [{
text: 'Vehicle',
sortable: true,
flexible: 1,
width: 60,
dataIndex: 'vehicle'
}, {
text: 'CCU',
sortable: true,
flexible: 0,
width: 50,
renderer: status,
dataIndex: 'ccuStatus'
}]
});
Thanks guys
I wrote simple Ext.grid.Panel extension that automatically selects back rows that were selected before store reload. You can try it in this jsFiddle
Ext.define('PersistantSelectionGridPanel', {
extend: 'Ext.grid.Panel',
selectedRecords: [],
initComponent: function() {
this.callParent(arguments);
this.getStore().on('beforeload', this.rememberSelection, this);
this.getView().on('refresh', this.refreshSelection, this);
},
rememberSelection: function(selModel, selectedRecords) {
if (!this.rendered || Ext.isEmpty(this.el)) {
return;
}
this.selectedRecords = this.getSelectionModel().getSelection();
this.getView().saveScrollState();
},
refreshSelection: function() {
if (0 >= this.selectedRecords.length) {
return;
}
var newRecordsToSelect = [];
for (var i = 0; i < this.selectedRecords.length; i++) {
record = this.getStore().getById(this.selectedRecords[i].getId());
if (!Ext.isEmpty(record)) {
newRecordsToSelect.push(record);
}
}
this.getSelectionModel().select(newRecordsToSelect);
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
}
});
The straightforward solution is just save somewhere in js index of selected row. Then after reload you could easily select this row by index using grid's selection model.
Get selection model: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-getSelectionModel
var selectionModel = grid.getSelectionModel()
Get selected rows: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getSelection
var selection = selectionModel.getSelection()
Set selected row back: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-select
selectionModel.select(selection)
Here is another way to select the previously selected record:
var selectionModel = grid.getSelectionModel()
// get the selected record
var selectedRecord = selectionModel.getSelection()[0]
// get the index of the selected record
var selectedIdx = grid.store.indexOfId(selectedRecord.data.id);
// select by index
grid.getSelectionModel().select(selectedIdx);
For some reason the grid.getSelectionModel().select(record) method wasn't working for me, but selecting by index seems to work.
Edit: found out why grid.getSelectionModel().select(record) method wasn't working. Apparently the store is reloaded, the record instances aren't the same (they have different automatically generated Ext IDs). You have to use selectAt() in this case.
for extjs 4.1.7 users
need a workarround about the statement in
refreshSelection() {
...
Ext.defer(this.setScrollTop, 30, this,
[this.getView().scrollState.top])
}
thus setScrollTop no longer exists
so a working soluction is add
me.getView().preserveScrollOnRefresh = true;
in initComponent
Ext.define('PersistantSelectionGridPanel', {
extend: 'Ext.grid.Panel',
selectedRecords: [],
initComponent: function() {
this.callParent(arguments);
this.getStore().on('beforeload', this.rememberSelection, this);
this.getView().on('refresh', this.refreshSelection, this);
//-------------------------------------------
me.getView().preserveScrollOnRefresh = true;
//-------------------------------------------
},
rememberSelection: function(selModel, selectedRecords) {
if (!this.rendered || Ext.isEmpty(this.el)) {
return;
}
this.selectedRecords = this.getSelectionModel().getSelection();
this.getView().saveScrollState();
},
refreshSelection: function() {
if (0 >= this.selectedRecords.length) {
return;
}
var newRecordsToSelect = [];
for (var i = 0; i < this.selectedRecords.length; i++) {
record = this.getStore().getById(this.selectedRecords[i].getId());
if (!Ext.isEmpty(record)) {
newRecordsToSelect.push(record);
}
}
this.getSelectionModel().select(newRecordsToSelect);
}
});
i have make modification on this code.
If you make selection, and aplys a filter on the store and reload it, the selection model have a first empty array in this selected collection ( at index 0 ).
This modification is in the last line of the "refreshSelection" function.
if (newRecordsToSelect.length >= 1){
this.getSelectionModel().select(newRecordsToSelect);
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
}