I have a problem with checkboxes. So these checkboxes are in columns, and the longer labels wrap under their checkboxes. Is there any sollution to setting the column width to the longest label? It must be dynamic width. Can you help me?
Here's something you can use to measure all the labels and apply the width of the widest one to all of them http://jsfiddle.net/Wr7Wr/1/
Ext.define('DynamicLabelFormPanel', {
extend: 'Ext.form.Panel',
initComponent: function() {
// Need to create a hidden field to measure the text
var field = new Ext.form.field.Text({fieldLabel: 'Testing', value: 'whateves', renderTo: Ext.getBody(), hidden: true});
var metrics = new Ext.util.TextMetrics(field.labelEl);
var widths = Ext.Array.map(this.items, function(item) {
// Need to acount for the :
return metrics.getWidth(item.fieldLabel + ":");
});
var maxWidth = Math.max.apply(Math, widths);
for (var i = 0; i < this.items.length; i++) {
this.items[i].labelWidth = maxWidth;
}
this.callParent();
}
}
This would probably be better as a plugin, but it shows you what needs to be done
Related
I have the following SlickGrid:
var eligibleProductsGrid = new recline.View.SlickGrid({
model:dataset,
el:'#selectorModal #selectorModalContainer #selectorModalGrid',
state:{
fitColumns:true,
hiddenColumns: ['id', 'mrid', 'distributedQuantity' ,'qMeasureUnit'],
gridOptions:{
enableColumnReorder:false,
gridIdCSS: arguments[0].gridIdCSS ? arguments[0].gridIdCSS: "eligpprodGs9999",
}
}
});
and i want to rezise the width of the third column.
I've tried doing this:
var cols = this.eligibleProductsGrid.getColumns();
cols[2].width = 520;
this.eligibleProductsGrid.setColumns(cols);
but i have an error saying that getColumns() is not a function.
Any ideas? Thanks!
Is there any way to change the text of "Update" button in ExtJS-4 Row Editor Grid ?
Good question, I had a look through the source code and whilst there is nothing inside the RowEditing plugin, in the class it extends 'RowEditor.js' there is the following:
Ext.define('Ext.grid.RowEditor', {
extend: 'Ext.form.Panel',
requires: [
'Ext.tip.ToolTip',
'Ext.util.HashMap',
'Ext.util.KeyNav'
],
saveBtnText : 'Update',
cancelBtnText: 'Cancel',
...
});
So I'd assume you'd just need to override the 'saveBtnText' in your instance of 'Ext.grid.plugin.RowEditing' as it calls the parent constructor with callParent(arguments) in the RowEditing class
Not that easy and not without hacking in undocumented areas. The problem is, that the Ext.grid.plugin.RowEditing directly instantiates the Ext.grid.RowEditor without allowing you to pass in configuration options. So in general you have to override the initEditor() method in the plugin and instantiate your own row editor:
// ...
plugins: [{
ptype: 'rowediting',
clicksToEdit: 2,
initEditor: function() {
var me = this,
grid = me.grid,
view = me.view,
headerCt = grid.headerCt;
return Ext.create('Ext.grid.RowEditor', {
autoCancel: me.autoCancel,
errorSummary: me.errorSummary,
fields: headerCt.getGridColumns(),
hidden: true,
// keep a reference..
editingPlugin: me,
renderTo: view.el,
saveBtnText: 'This is my save button text', // <<---
cancelBtnText: 'This is my cancel button text' // <<---
});
},
}],
// ...
For ExtJS 4
Ext.grid.RowEditor.prototype.cancelBtnText = "This is cancel";
Ext.grid.RowEditor.prototype.saveBtnText = "This is update";
This solution is to define the prototype of rowEditors. that means that this config is than general.
If you want to change it just for one editor, or if you want to get different configs , the prototype is definitely not the solution.
look at source code :
initEditorConfig: function(){
var me = this,
grid = me.grid,
view = me.view,
headerCt = grid.headerCt,
btns = ['saveBtnText', 'cancelBtnText', 'errorsText', 'dirtyText'],
b,
bLen = btns.length,
cfg = {
autoCancel: me.autoCancel,
errorSummary: me.errorSummary,
fields: headerCt.getGridColumns(),
hidden: true,
view: view,
// keep a reference..
editingPlugin: me
},
item;
for (b = 0; b < bLen; b++) {
item = btns[b];
if (Ext.isDefined(me[item])) {
cfg[item] = me[item];
}
}
return cfg;
}`
this method inits the rowEditor, and there's a loop on btns Array:
btns Array :
btns = ['saveBtnText', 'cancelBtnText', 'errorsText', 'dirtyText']
for (b = 0; b < bLen; b++) {
item = btns[b];
if (Ext.isDefined(me[item])) {
cfg[item] = me[item];
}
}
In this loop foreach string in btnArray it's searched if exists in cfg the same string property, if it's found it's added to config. You just have to manage that this loop finds what you want to modify:
Example: we want to change the text of save button:
the property saveBtnText which is the first item of btns Array must exists in cfg:
if (Ext.isDefined(me[item])) {
cfg[item] = me[item];
}
this search if property exists : if (Ext.isDefined(me[item]))
if saveBtnText already exists in rowEditor properties then:
cfg[item] = me[item];
and the additional config property will be set!!
I'm using Ext.ux.grid.RowExpander
var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<p>{history}</p>'
)
});
it's used in my grid:
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
expander,
...
Now i want all expander rows to be expanded by deafult.
I'm trying to use expander.expandRow(grid.view.getRow(0)); (i think if i make it, i'll be able to use a for loop :) but i get an error
this.mainBody is undefined # ***/ext/ext-all.js:11
Please, help me to expand all rows of my grid! Thanks!
You can do this with a loop, it's quite simple...
for(i = 0; i <= pageSize; i++) {
expander.expandRow(i);
}
Where pageSize is the number of records per page in your grid. Alternatively you could use the store's count (probably a more scalable solution)...
for(i = 0; i <= grid.getStore().getCount(); i++) {
expander.expandRow(i);
}
In 4.1.3 i use this method
function expand() {
var expander = grid.plugins[0];
var store = grid.getStore();
for ( i=0; i < store.getCount(); i++ ) {
if (expander.isCollapsed(i)) {
expander.toggleRow(i, store.getAt(i));
}
}
}
If your Grid uses a DirectStore or some other RPC mechanism, you may want to listen for the store's load event:
grid.store.addListener('load', function() {
var expander = grid.plugins;
for(i = 0; i < grid.getStore().getCount(); i++) {
expander.expandRow(i);
}
}
Btw: It should be "i < ..." instead of "i <= ...".
You can declare a grouping object and then call it from within your GridPanel:
// grouping
var grouping = Ext.create('Ext.grid.feature.Grouping',{
startCollapsed: true, // sets the default init collapse/expand all
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
expander,
...
Then add this code in the body of you GridPanel:
// collapse/expand all botton
tbar: [{
text: 'collapse all',
handler: function (btn) {
grouping.collapseAll();
}
},{
text: 'expand all',
handler: function (btn) {
grouping.expandAll();
}
}],
It will add two buttons that expand/collapse all the groups.
If you want everything to be expanded/collapsed by default notice the 'startCollapsed' variable above.
I have followed the tutorial over at http://www.sencha.com/learn/Tutorial:Custom_Drag_and_Drop_Part_1
It is great, however now I need pointers on how to add functionally of being to be able reorder a single list. At the moment when I drop a item on the list it is appended at the end. However I wish to be able to drag a item between two others or to the front then drop it there.
Any advice appreciated, thanks.
I found Ext.GridPanel row sorting by drag and drop working example in blog http://hamisageek.blogspot.com/2009/02/extjs-tip-sortable-grid-rows-via-drag.html
It worked fine for me. Here my js code:
app.grid = new Ext.grid.GridPanel({
store: app.store,
sm: new Ext.grid.RowSelectionModel({singleSelect:false}),
cm: new Ext.grid.ColumnModel({
columns: app.colmodel
}),
ddGroup: 'dd',
enableDragDrop: true,
listeners: {
"render": {
scope: this,
fn: function(grid) {
// Enable sorting Rows via Drag & Drop
// this drop target listens for a row drop
// and handles rearranging the rows
var ddrow = new Ext.dd.DropTarget(grid.container, {
ddGroup : 'dd',
copy:false,
notifyDrop : function(dd, e, data){
var ds = grid.store;
// NOTE:
// you may need to make an ajax call
// here
// to send the new order
// and then reload the store
// alternatively, you can handle the
// changes
// in the order of the row as
// demonstrated below
// ***************************************
var sm = grid.getSelectionModel();
var rows = sm.getSelections();
if(dd.getDragData(e)) {
var cindex=dd.getDragData(e).rowIndex;
if(typeof(cindex) != "undefined") {
for(i = 0; i < rows.length; i++) {
ds.remove(ds.getById(rows[i].id));
}
ds.insert(cindex,data.selections);
sm.clearSelections();
}
}
// ************************************
}
})
// load the grid store
// after the grid has been rendered
this.store.load();
}
}
}
});
If you had hbox layout with 3 Grid side by side
new Ext.Panel(
{
layout: "hbox",
anchor: '100% 100%',
layoutConfig:
{
align: 'stretch',
pack: 'start'
},
items: [GridPanel1, GridPanel2, GridPanel3
})
then you must juse grid El instead of container
var ddrow = new Ext.dd.DropTarget(grid.getEl(), { ....
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;
};
})();