working on my first extjs project where I have a displayfield, which I populate like so.
var displayfield = this.view.down('#displayfieldAccountPL');
var selectedAccountRecord = accountSummaryDataStore.findRecord('AcctNum', selectedAccountNumber);
var acctPL = selectedAccountRecord.get('CalcPLSett');
displayfield.setValue(acctPL);
here is my setup for displayfield
xtype: 'displayfield',
fieldLabel: 'Account P&L',
//id: 'displayfieldAccountPL',
itemId: 'displayfieldAccountPL',
renderer: function (value) {
var newVal = Ext.util.Format.currency(value, '$ ', 0);
if (value > 0) {
newVal = '<span style="color:green">' + newVal + '</span>';
} else if (value < 0) {
newVal = '<span style="color:red">' + newVal + '</span>';
} else {
newVal = newVal;
}
return newVal;
}
Upon selected a button in my project I want to clear out the displayfield.
The problem is, when I set the value to BLANK, I think it is overwriting the store. I think this because I have the store linked to a grid, and the grid row columns are blanked out after I hit the button.
I think what is occurring is two way binding but all I am trying to do is blank out the displayfield.
var displayfieldPL = this.view.down('#displayfieldAccountPL');
displayfieldPL.setValue('');
any ideas on what I am doing wrong?
Is there an easy way to remove text from a displayfield?
Related
I'm currently working on a project that uses ExtJS.
For this part of the project I had to implement a checkbox column on an existing grid, each row of the grid can have a state determined by record.data.codiceStato.
Here is part of the code:
selectionModel = Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
listeners: {
select: function (sm, idx, rec) {
alert("Look ma!")
}
},
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
if (record.data.codiceStato == 'RS' || record.data.codiceStato == 'AN' || record.data.codiceStato == 'NP')
return '<div style="margin-left: -1px;" class="' + Ext.baseCSSPrefix + 'grid-row-checker"> </div>';
else
return '';
}
});
Now, as you can see, I only render the checkbox on certain rows that have a precise state(RS, AN, NP). My problem is that when I click on the header checkbox ALL the rows in the grid get selected, also those ones that are not in the state that should be able to be selected(state different than NP RS AN). Is there any way to fix this? Thank you in advance.
Header Checkbox can be detected using rowIndex.
if (rowIndex != 0) {
if (record.data.codiceStato == 'RS' || record.data.codiceStato == 'AN' || record.data.codiceStato == 'NP') {
return '<div style="margin-left: -1px;" class="' + Ext.baseCSSPrefix + 'grid-row-checker"> </div>';
}
else {
return '';
}
}
else {
return '';
}
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'));
}
}
});
I'm just trying to create a custom ComboBox to reduce some boilerplate:
Ext.define('App.AutoComboBox', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.autocombobox',
states: null,
initComponent: function() {
this.callParent(arguments);
if (!this.states) {
this.queryMode = 'remote';
} else {
this.queryMode = 'local';
this.bindStore(Ext.create('Ext.data.Store', {
type: 'array',
fields: ['_placeholder_'],
data: _.map(this.states, function(state) {
return {_placeholder_ : state}; })
}));
this.displayField = this.valueField = '_placeholder_'
}
this.validator = function(v) {
var field = this.displayField,
index = this.getStore().findExact(field, v);
return (index!==-1) ? true : 'Invalid selection';
};
},
listeners: {
select: function(combo, records) {
console.log(combo.getStore().indexOf(records[0])); // !== -1
}
}
});
So that I can use it like:
requires: ['App.AutoComboBox'],
...
items: [{
xtype: 'autocombobox',
name: 'test_local',
fieldLabel: 'test_local',
states: [ 'cat', 'dog' ] // local
}, {
xtype: 'autocombobox',
name: 'test_remote',
fieldLabel: 'test_remote',
store: 'Chipmunks', // a remote store
displayField: 'chipmunk_name'
}]
...
But something is amiss. The AutoComboBox renders OK, shows dropdown of records fine, but when I select an item from the dropdown, the combobox's display field is not set. The store seems to find the selected record (as seen by the select listener), but the value is still not set...
Help? thanks.
Edit: FIXED by moving this.callParent(arguments) after the new store is bound. Now accepting answers that explain why this fixes it... (I don't know why it works.. but it does)
In the parent initComponent method, the displayField is used to create the displayTpl:
if (!me.displayTpl) {
me.displayTpl = new Ext.XTemplate(
'<tpl for=".">' +
'{[typeof values === "string" ? values : values["' + me.displayField + '"]]}' +
'<tpl if="xindex < xcount">' + me.delimiter + '</tpl>' +
'</tpl>'
);
} else if (Ext.isString(me.displayTpl)) {
me.displayTpl = new Ext.XTemplate(me.displayTpl);
}
The bindStore call has probably nothing to do with it, I believe that this is this line that must be put before the call to the parent method:
this.displayField = this.valueField = '_placeholder_';
I want to put a checkbox in the label of a Dojo TabContainer. I found an example here:
http://telliott.net/dojoExamples/dojo-checkboxTabExample.html
However, the example only shows html. I would like to do this programmatically. This is what I have so far:
function(response){
var json_response = JSON.parse(response);
var fields_dict = json_response['fields_dict'];
var names_dict = json_response['names_dict'];
var tc = new TabContainer({
style: "height: 495px; width: 100%;",
tabPosition: "left",
tabStrip: true
}, "report_tab_container");
for(var key in fields_dict) {
var content_string = '';
var fields = fields_dict[key];
for(var field in fields) content_string += '<div>' + fields[field][0] + fields[field][1] + '</div>';
var checkBox = new CheckBox({
name: "checkBox",
value: "agreed",
checked: false,
onChange: function(b){ alert('onChange called with parameter = ' + b + ', and widget value = ' + this.get('value') ); }
}).startup();
var tcp = new ContentPane({
//title: names_dict[key],
title: checkBox,
content: content_string
});
tc.addChild(tcp);
}
tc.startup();
tc.resize();
},
However, this doesn't work. When I load my page, the TabContainer doesn't show up. If I set the title of my ContentPane to something other than my check box, it works fine.
What am I doing wrong and how do I get the checkbox to appear in the TabContainer title?
This is what worked:
cb.placeAt('report_tab_container_tablist_dijit_layout_ContentPane_'+ i.toString(), "first");
I'm doing this blindly here, but comparing the example on your link to your code, I would say, add this before tc.addChild(tcp) :
checkBox.placeAt(tcp.domNode, "first");
There are quite few solutions on Ext forums, but I wasn’t able to get any of them work. It seems I am missing something minor.
I need to resize combobox to fit its content when it’s first created. I do not need to worry about resizing it when content is changing.
Is there any working examples using Extjs 3.2?
Current Code:
var store = new Ext.data.ArrayStore({
fields: ['view', 'value', 'defaultselect'],
data: Ext.configdata.dataCP
});
comboCPU = new Ext.form.ComboBox({
tpl: '<tpl for="."><div class="x-combo-list-item"><b>{view}</b><br /></div></tpl>',
store: store,
displayField: 'view',
width: 600,
typeAhead: true,
forceSelection: true,
mode: 'local',
triggerAction: 'all',
editable: false,
emptyText: 'empty text',
selectOnFocus: true,
listeners: { select: AdjustPrice, change: AdjustPrice, beforeselect: function (combo, record, index) { return ('false' == record.data.disabled); } },
applyTo: 'confelement'
});
I've also tried removing width: 600 and replacing it with minListWidth: 600 but that result following and didnt fix the issue.
alt text http://img28.imageshack.us/img28/7665/4272010105134am.png
Try the following:
Determine the list-box option with the most chars
Create a div and set the option with the most chars
Append this div to the body
Get the div's clientWidth
Below codes works in ExtJs 3.2!
myStore = new Ext.data.Store({
...
listeners : {
load: function() {
var maxValue = "";
var charLen = 0, maxCharLen = 0;
var maxListWidth = 300;
/**
* This is a work-around since the 'listWidth' property
* does not accept any values that would simulate auto-resize
* in reference to the category with the most characters.
*/
this.data.each(function(item, index, totalItems ) {
var nameValue = item.data['name']; // 'name' is the field name
if(nameValue == null || nameValue == ''){
// do nothing
}else {
charLen = nameValue.length;
if(charLen > maxCharLen){
maxCharLen = charLen;
maxValue = nameValue;
}
}
});
if(maxValue != ""){
var divEl = document.createElement('div');
divEl.id = 'tempEl';
divEl.style.display = "inline";
divEl.className = "x-combo-list";
divEl.innerHTML = maxValue;
document.body.appendChild(divEl);
// check if appended
divEl = document.getElementById('tempEl');
if(divEl) {
var divWidth = divEl.clientWidth;
if(divWidth == 0 ) {
divEl.style.display = "inline-block";
divWidth = divEl.clientWidth;
}
// the allocated width for the scrollbar at side of the list box
var scrollbarWidth = 30;
// make sure that column width is not greater than
if((divWidth + scrollbarWidth) > maxListWidth) {
maxListWidth = divWidth + scrollbarWidth;
myCombo.listWidth = maxListWidth;
}
document.body.removeChild(divEl);
}
}
}
});
var myCombo = new fm.ComboBox({
...
});
try
autoWidth: true
and remove the width parameter
width: 600 is correct, so you must have some other issue going on that's not obvious from what you posted. You might try removing the applyTo config and instead put renderTo: Ext.getBody() just to see if it has something to do with how it's applied to your element. Are you sure there is not some other code that could be affecting the width?
Found here:
// throw this stuff in a closure to prevent
// polluting the global namespace
(function(){
var originalOnLoad = Ext.form.ComboBox.prototype.onLoad;
Ext.form.ComboBox.prototype.onLoad = function(){
var padding = 8;
var ret = originalOnLoad.apply(this,arguments);
var max = Math.max(this.minListWidth || 0, this.el.getWidth());
var fw = false;
Ext.each(this.view.getNodes(), function(node){
if(!fw){ fw = Ext.fly(node).getFrameWidth('lr'); }
if(node.scrollWidth){ max = Math.max(max,node.scrollWidth+padding); }
});
if( max > 0 && max-fw != this.list.getWidth(true) ){
this.list.setWidth(max);
this.innerList.setWidth(max - this.list.getFrameWidth('lr'));
}
return ret;
};
})();