ExtJS GridPanel width - javascript

I'm using Ext JS 2.3.0 and have created the search dialog shown below.
The search results are shown in a GridPanel with a single Name column, but notice that this column does not stretch to fill all the available horizontal space. However, after I perform a search, the column resizes properly (even if no results are returned):
How can I make the column display correctly when it's shown initially? The relevant code is shown below:
FV.FindEntityDialog = Ext.extend(Ext.util.Observable, {
constructor: function() {
var queryTextField = new Ext.form.TextField({
hideLabel: true,
width: 275,
colspan: 2,
});
var self = this;
// the search query panel
var entitySearchForm = new Ext.form.FormPanel({
width: '100%',
frame: true,
layout:'table',
layoutConfig: {columns: 3},
items: [
queryTextField,
{
xtype: 'button',
text: locale["dialogSearch.button.search"],
handler: function() {
var queryString = queryTextField.getValue();
self._doSearch(queryString);
}
}
]
});
// the search results model and view
this._searchResultsStore = new Ext.data.SimpleStore({
data: [],
fields: ['name']
});
var colModel = new Ext.grid.ColumnModel([
{
id: 'name',
header: locale['dialogSearch.column.name'],
sortable: true,
dataIndex: 'name'
}
]);
var selectionModel = new Ext.grid.RowSelectionModel({singleSelect: false});
this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
stripeRows: true,
autoWidth: true,
autoExpandColumn: 'name',
store: this._searchResultsStore,
colModel: colModel,
selModel: selectionModel,
hidden: false,
buttonAlign: 'center',
buttons: [
{
text: locale["dialogSearch.button.add"],
handler: function () {
entitySearchWindow.close();
}
},
{
text: locale["dialogSearch.button.cancel"],
handler: function () {
entitySearchWindow.close();
}
}
]
});
// a modal window that contains both the search query and results panels
var entitySearchWindow = new Ext.Window({
closable: true,
resizable: false,
draggable: true,
modal: true,
viewConfig: {
forceFit: true
},
title: locale['dialogSearch.title'],
items: [entitySearchForm, this._searchResultsPanel]
});
entitySearchWindow.show();
},
/**
* Search for an entity that matches the query and update the results panel with a list of matches
* #param queryString
*/
_doSearch: function(queryString) {
def dummyResults = [['foo'], ['bar'], ['baz']];
self._searchResultsStore.loadData(dummyResults, false);
}
});

It's the same issue you had in an earlier question, the viewConfig is an config item for the grid panel check the docs , so it should be
this._searchResultsPanel = new Ext.grid.GridPanel({
viewConfig: {
forceFit: true
},
....other configs you need,
To be more precise the viewConfig accepts the Ext.grid.GridView configs, feel free to read the docs on that one too.
Otherwise this seems to be the only problem, and i refer the column width, not the gridpanel width. On the gridpanel you have a title and two buttons who doesn't seem to be affected. So i repeat the gridPanel's width is ok, it's the columns width issue.

Try to remove autoWidth from GridPanel configuration, because setting autoWidth:true means that the browser will manage width based on the element's contents, and that Ext will not manage it at all.
In addition you can try to call .doLayout(false, true) on your grid after it was rendered.

Try to add flex: 1 to your GridPanel

Related

extjs3.4: How to access items in a panel that do not have id/itemId

I just started using ExtJS 3.4 version. And I was not sure how to access the items within the panel when there is no id or itemId assigned to it. I have used Ext JS 4.2 before but I need to use 3.4 version for now.
In my case, I am using border layout here. I have a tree panel on the east region and a tabpanel in the center region. And I want to update the center region dynamically with grids or forms based on the tree node clicked.
here is my code for the tabpanel
{
xtype : 'tabpanel',
title : 'Center Panel',
width : 200,
region : 'center',
items:[gridpnl]
}
And here is the complete code that I tried
First ExtJs Page
Ext.onReady(function () {
Ext.namespace('Class');
Class.create = function() {
return this.init(config);
}
};
Ext.namespace('FirstOOPS');
FirstOOPS = Class.create();
FirstOOPS.prototype = {
init: function (config) {
var store= new Ext.data.ArrayStore({
fields: [{name: 'C1'},{ name: 'C3'}, {name: 'C5'}]
});
var myData= [['abcdC11','C3','C5'],['asdf','C3_asdf','C5_asdf']]
store.loadData(myData);
var gridpnl= new Ext.grid.GridPanel({
layout: 'fit',
height: 500,
width: 500,
store: store,
columns:[
{header: "C1", dataIndex: 'C1'},
{header: "C3", dataIndex: 'C3'},
{header: "C5", dataIndex: 'C5' }
]
});
var mainPanel = new Ext.Panel({
layout : 'border',
items : [
{
region: 'east',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Grid',
leaf: true
}, {
text: 'Form',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
if(n.text=='Grid'){
Ext.Msg.alert(n.text);
}
}
}
},{
xtype : 'tabpanel',
title : 'Center Panel',
width : 200,
region : 'center',
items:[gridpnl]
}
]
});
new Ext.Viewport({
layout : 'fit',
items : [mainPanel]
});
}
};
var firstObj = new FirstOOPS();
});
</script>
</body>
</html>
Can someone tell me how to access this without id, so that I can update the tabpanel dynamically or create new tabs based on the tree node click.
Thanks in advance
you can use the following code to access tabpanel without using id or items id
this.up().items.items[1]
to test the above code I am alerting the title of the tab panel by following code
alert(this.up().items.items[1].title);
it will alerts the title of the tab panel

How to add links to modal window in ExtJs

I am trying to create a list of links from a data store, and then use an XTemplate to loop through and display all the links in the data store. I am trying to display the links in a modal window. This is my code:
var win;
var tpl = new Ext.XTemplate("<p>Field1: {f1}, Field2: {f2} </p>").compile();
var data = {
f1: 'a',
f2: null
};
if(!win){
win = new Ext.Window({
el:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,
items: [
{
xtype: 'component',
autoEl: {
html: '<input type="text">'
},
listeners: {
render: function(_component) {
_component.getEl().on('keyup', function(e) {
//console.log(this);
console.log(this.dom.childNodes[0].value);
});
}
}
},
{
xtype: 'panel',
title: 'test',
height: 100,
bodyPadding: 10,
tpl: tpl,
data: data,
renderTo: Ext.get('hello-win')
}
]
});
}
win.show(this);
There are no errors in console, but the links never load. It just shows my modal window and my textbox, but no links. I would put in in a jsfiddle, but I don't know how (I'm new to ExtJs).
How can I display a list of links in this modal window?
You should not define renderTo in you panel config. Component defined in items array will be rendered to parent component automatically.
Your window have two items so you can not use fit layout. This layout can be used only if component have only one child component. You can remove layout definition and Ext JS framework will use auto layout or you can use some layout which support more child items, like hbox, vbox, etc.
Your code should look like this:
var win = new Ext.Window({
width:500,
height:300,
closeAction:'hide',
plain: true,
items: [
{
xtype: 'textfield',
enableKeyEvents: true,
listeners: {
keyup: function(c) {
console.log(c.getValue());
}
}
},
{
xtype: 'panel',
title: 'test',
height: 100,
bodyPadding: 10,
tpl: tpl,
data: data
}
]
});
Also you should consider using textfield component instead of creating textfield by using component with autoEl config.

EXT JS 2.3; Internet Explorer 8; GridPanel Records Wrap, but Shouldn't

I'm using EXT JS 2.3 and looking at an issue that occurs with Internet Explorer 8. If you take a look at the company column in an example on this page, It is cutting off the lines that are too long such as E.I. du Pont de Nemours and Co... (just an example, not using a simple array grid; just a normal GridPanel)
That is the correct behavior I would like, which is what happens in Firefox, and later versions of Internet Explorer.
However, in Internet Explorer 8 the row is actually wrapping to take up two rows, with the last bit in the second row.
I looked in documentation for 2.3, but not finding any config options that seem to help. I tried setting autoHeight to false, but no effect. Most other questions I find are the reverse, where they want it to wrap but it doesn't.
How can I keep Internet Explorer 8 from wrapping?
Here is the javascript...
Column Model
var columnModel = new Ext.grid.ColumnModel([
{
dataIndex: 'Name',
id: 'fieldLabel',
width: parseInt(width)/4
},
{
dataIndex: 'Description',
id: 'fieldDataGrey',
width: parseInt(width)/4
}
]);
Grid Panel 1
var Grid1 = new Ext.grid.GridPanel({
id: 'Grid1',
name: 'Grid1',
store: DataStore1,
cm: columnModel,
width: parseInt(width)/2,
autoHeight: false,
collapsible: false,
frame: false,
stripeRows: false,
columnLines: true,
hideHeaders: true,
enableColumnHide: false,
disableSelection: true,
overCls: '',
loadMask: true
});
Grid Panel 2
var Grid2 = new Ext.grid.GridPanel({
id: 'Grid2',
name: 'Grid2',
store: DataStore2,
cm: columnModel,
width: parseInt(width)/2,
autoHeight: false,
collapsible: false,
frame: false,
stripeRows: false,
columnLines: true,
hideHeaders: true,
enableColumnHide: false,
disableSelection: true,
overCls: '',
loadMask: true
});
Field Set
var FieldSet = new Ext.form.FieldSet({
id: 'FieldSet',
name: 'FieldSet',
title: 'Title',
border: true,
width: width,
autoHeight: false,
labelWidth: 125,
bodyStyle: 'padding:2px; margin:0px',
style: 'padding:2px; margin:0px',
layout: 'tableform',
layoutConfig: {
columns: 2,
columnWidths:[.5, .5]
},
items: [
Grid1,
Grid2,
{
labelWidth: 125,
layout: 'form',
bodyStyle:'padding:2px 0px 0',
items: Label,//Didn't include label with posted code
colspan: 2
}
]
});
Try to use 2.2.1 ExtJs version, or 3.x. The problem I think lays in the Ext.js module in the Ext distribution, where browser versions are detected.
Ext.grid.ColumnModel has a config option called "renderer." I have used this function often for styling or DOM manipulation that Ext did not provide in the config options. You might try using the renderer function and returning an HTML string with custom styling that forces no wrapping on the data.
For instance,
renderer: function(value, metadata, record, rowIndex, colIndex, store) {
var style = 'overflow:hidden; white-space: nowrap; width: 100px;',
html = '<span style="' + style + '">' + value + '</span>';
return html;
}
Where "width" (100px in this case) is the width you defined in your column.
After further testing I did not find the solution I hoped for, but I did partially fix it by using a renderer rather than the fieldDataGrey id and using a column layout rather than the tableform layout.

Rows hidden in a grid JS EXT

I need to simply add a function in my grid that hide the rows when the user makes the first access. After that, by the icon of minimize/expand that already appears in my grid, the user can expand the group and see the rows. My code is that:
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
hideHeaders: true,
features: [groupingFeature],
columns: [
{text: "Questions",groupable: false, flex: 1, dataIndex: 'species', sortable: true}
],
width: 250,
height:260,
split: true,
region: 'west'
});
// define a template to use for the detail view
var bookTplMarkup = [
'{resposta}<br/>'
];
var bookTp1 = Ext.create('Ext.Template', bookTplMarkup);
Ext.create('Ext.Panel', {
renderTo: 'binding-example',
frame: true,
width: 720,
height: 570,
layout: 'border',
items: [
grid, {
id: 'detailPanel',
autoScroll: true,
region: 'center',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
html: 'Select one option'
}]
});
Where I add the nedded functions?
I guess the startCollapsed property of grouping feature is what your looking for:
{ ftype:'grouping', startCollapsed: true }

Ext.ux.grid.CheckColumn -- fire event remotely

I have a Ext.grid.GridPanel which uses Ext.ux.grid.CheckColumn and Ext.ux.grid.RowExpander.
I have added a listener to RowExpander and I am trying to "check" the checkboxes created by Ext.ux.grid.CheckColumn after the row is expanded (with RowExpander). Any ideas on how I could do that?
My code below:
var expander = new Ext.ux.grid.RowExpander({
width: 15,
selectRowOnExpand: true,
align: 'left',
tpl : new Ext.Template(
........
),
listeners: {
expand: function (row,record,body,rowIndex) {
------>>>>>> what do I put here to fire an event into checkcolumn ?
}
}
}
var checkbox = new Ext.ux.grid.CheckColumn({
header: 'Read',
dataIndex: 'read',
id: 'read',
width: 30
});
var mygrid = new Ext.grid.GridPanel({
renderTo: document.getElementById('inbox'),
plugins: [new Ext.ux.IconMenu(), search, expander, checkbox],
..............
..............
columns:[
checkbox,
{ other column definition }
etc etc
Thanks!
The checked status is governed by the read field in the model, so you need to modify that:
expand: function(row, record) {
record.set('read', true);
}

Categories

Resources