How to fit gridPanels columns? - javascript

I have application using ExtJs 3.4.
I have this construction:
westPanel-TabPanel:
var westPanel = new Ext.TabPanel({
id: "west",
//xtype: "tabpanel",
//layout:'fit',
activeTab: 0,
region: "west",
border: false,
width: 278,
split: true,
collapseMode: "mini",
items: [mapList,structure,cadastr,search]
});
Search - FormPanel:
var search = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'Поиск',
bodyStyle:'padding:5px 5px 0',
//width: 600,
//layout:'fit',
items: [{
xtype:'textfield',
fieldLabel: 'Диспечерское наименование',
name: 'name_dispather',
anchor:'100%',
enableKeyEvents: true,
listeners: {
'keyup': function(e) {
if(e.getValue().length==4){
searchStore.load({params:{'name':e.getValue()}});
}
}
}
},searchTab]
});
SearchTab - GridPanel:
var searchTab = new Ext.ux.grid.livegrid.GridPanel({
store: searchStore,
region: 'center',
cm: searchCm,
layout: 'fit',
selModel: new Ext.ux.grid.livegrid.RowSelectionModel(),
stripeRows : true,
view: myView,
height: 390,
loadMask: true,
id: 'searchTab',
title:'Найденные объекты',
autoScroll: true,
});
And i have a problem:
Have to make last column's width to whole panel's width?
UPDATE
I try autoExpandColumn. its works but its not idial:
How to fix it?

You can achieve this with the flex config.
You can do it on one column only:
columns: [{text: "Column A", dataIndex: "field_A", flex: 1}]
Or you can do it as default on all the columns:
columns: {
items: [
{
text: "Column A"
dataIndex: "field_A"
},{
text: "Column B",
dataIndex: "field_B"
},
...
],
defaults: {
flex: 1
}
}

Try with:
autoExpandColumn : String
The id of a column in this grid that should expand to fill unused space.
This config option you have to provide for your searchTab (I mean the grid panel).
EDITED:
viewConfig:{
scrollOffset: 0,
forceFit: true
},
This will remove that gap left for scrollbar. This you need to mention for your searchTab (I mean the grid panel).

Related

ExtJS 5.0.1 Show grid based on combobox selection

Looking for some assistance on showing/hiding a form container element based on a combobox selection.
I only want the grid (id: NspList) to show if and only if "NSP Provider" is selected in the combobox (id: carrierConnectivity). Does anyone have any ideas how this can be accomplished? Code snippet below:
{
xtype: 'container',
layout: 'vbox',
style: { paddingRight: '10px', paddingBottom: '10px' },
items: [{
xtype: 'combobox',
labelAlign: 'top',
fieldLabel: 'Connectivity Type',
id: 'carrierConnectivity',
name: 'connectivity_type',
store:['GRE', 'GRE - with internet peering', 'MPLS', 'Direct Leased Line', 'NSP Partner'],
width: 250,
},
{
id: 'NspList',
flex: 1,
xtype: 'grid',
minHeight: 200,
maxHeight: 300,
width: 250,
selType: 'rowmodel',
title: 'NSP Providers',
forceFit: true,
bind: { store: '{nspnames}' },
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})
],
columns: {
defaults: {
editor: 'textfield'
},
items: [
{ text: 'Name', dataIndex: 'name'}
]
},
tools: [
{type: 'plus', handler: 'addNsp'},
{type: 'minus', handler: 'removeNsp'}
]
}
]
}
The combobox has a change listener which you want to use:
listeners:{
change:function(cb,newValue) {
cb.nextSibling().setVisible(newValue=="NSP Partner");
}
}
Because you haven't selected NSP Partner as default value on the checkbox, you should configure the grid as hidden by default:
hidden:true

ExtJS 3.4: Render buttons in hidden tabpanel

In ExtJs 3.4 I have a TabPanel with two tabs, the second tab contains a FormPanel, what contains a ButtonGroup. If the second tab is active, when I load the page, then everything is good, but when the first tab is active and I switch to the second, then there is no button in the button group, just the label. Here is the code:
var tabs = new Ext.TabPanel({
renderTo: 'tabs',
width:500,
forceLayout: true,
activeTab: 0,
deferredRender: false,
defaults:{autoHeight: true},
items:[
{contentEl:'tab1', title: 'Tab1'},
{contentEl:'tab2', title: 'Tab2'}
]
});
var form = new Ext.form.FormPanel({
width : 400,
autoHeight: true,
renderTo: 'form',
bodyStyle: 'padding: 5px',
items: [
{
xtype: 'buttongroup',
fieldLabel: 'Label',
items:
[
{
xtype: 'button',
text: 'Find By User',
width: 100,
scope: this,
handler: this.handleFind
},
{
xtype: 'button',
text: 'Find All',
width: 100,
scope: this,
handler: this.handleFindAll
}
]
}
]
});
I set the deferredRender: false and forceLayout: true, also tried the hideMode: 'offsets', but these didn't help.
Well, I add the hideMode: 'offsets' to the defaults of the TabPanel and it works fine. I did the same a few years ago without significant result.
Remove renderTo: 'form' and look at the working code here:
var form = new Ext.form.FormPanel({
width: 400,
autoHeight: true,
//renderTo: 'form',
bodyStyle: 'padding: 5px',
items: [{
xtype: 'buttongroup',
fieldLabel: 'Label',
items: [{
xtype: 'button',
text: 'Find By User',
width: 100,
scope: this,
handler: this.handleFind
}, {
xtype: 'button',
text: 'Find All',
width: 100,
scope: this,
handler: this.handleFindAll
}]
}]
});
var tabs = new Ext.TabPanel({
renderTo: 'tabs',
width: 500,
forceLayout: true,
activeTab: 0,
//deferredRender: false,
height: 300,
defaults: {
autoHeight: true
},
items: [{
contentEl: 'tab1',
title: 'Tab1'
}, {
//contentEl: 'tab2',
title: 'Tab2',
items: [form]
}]
});

ExtJS viewport one item accessing another item

I have create a viewport in ExtJS with several layouts (west, center, north). One of these is a grid to which I've added a click handler. This click is supposed to open an HTML or PHP file in one of the layout, but I am not sure how to access the item in the center from the click handler in the west.
Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
region: 'north',
border:false,
collapsible: false,
resizable:false,
title: 'North',
split: true,
height: 30,
html: 'north'
},{
region: 'west',
collapsible: true,
title: 'Navigation',
split: true,
width: '10%',
xtype: 'gridpanel',
itemid:'projectgrid',
hideHeaders: true,
columns: [{header: 'NID', dataIndex: 'NavName', flex: 1}],
store: navStore,
listeners: {
itemclick: function(dv, record, item, index, e) {
alert(record.get('NavPage'));
}
}
},{
region: 'center',
layout: 'border',
border: false,
id: 'renderArea',
items: [{
region: 'center',
html: 'center center',
title: 'Center',
items: [cw = Ext.create('Ext.Window', {
xtype: 'window',
closable: false,
minimizable: true,
title: 'Constrained Window',
height: 200,
width: 400,
constrain: true,
html: 'I am in a Container',
itemId: 'center-window',
minimize: function() {
this.floatParent.down('button#toggleCw').toggle();
}
})]
}]
}]
});
If you give the component you want to access an itemId of foo, you can do something like this, navigate up to the viewport, then down to find the appropriate viewport child.
dv.up('viewport').down('#foo')

ExtJS 3.4 vbox layout is not rendering correctly

I'm trying to render a GridPanel, and two regular Panels in a vbox layout (will update the Panels based on user actions later).
http://jsfiddle.net/auVez/
I have the store working OK
var store = new Ext.data.ArrayStore({
autoDestroy: true,
storeId: 'myStore',
fields: [
{name: 'categoryId', type: 'int'},
{name: 'categoryName', type: 'string'}
]
});
And the GridPanel was working OK before I started working with the vbox...
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header:'Category ID', width: 40, sortable: true, dataIndex: 'categoryId', hidden: true},
{header:'Cat. Name', width: 80, sortable: true, dataIndex: 'categoryName'}
],
flex: 10,
loadMask: true,
stripeRows: true,
viewConfig: { autoFill: true }, //This makes the columns span the screen onLoad
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
})
});
I've added a height to the vbox, because I read that it must have one...
var mainPanel = new Ext.Panel({
renderTo: 'myDiv',
frame: true,
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
height: '200px',
items: [
grid,
{
flex: 5,
title: 'Take Action',
id: 'SelectedItemPanel',
bodyStyle: {
background: '#ffffff',
padding: '6px 15px 0px 15px'
},
html: 'Please select item above to take action upon.'
},
{
flex: 5,
title: 'Preview',
id: 'SelectedItemPanel2',
bodyStyle: {
background: '#ffffff',
padding: '6px 15px 0px 15px'
},
html: 'Magic!'
}
]
});
But it still renders as an, approx, 10px height grey border, and doesn't take up 300px as requested.
I'm guessing I'm missing some overflow declaration or something, but this is frustrating, as I've spent ~4 hours I don't have on trying to get something so simple to work :-(
Hi problem is in height config
give height:300 (remove single quotes s)
see here jsfiddle link

Ext Js - Problem Loading Two Grids

I'm trying to display two grids in a master/detail relationship. Being new to Ext JS, I've modified an example that will successfully display my data - either the master or the detail. But I can't get it to load them both. Each grid has it's own dataStore, columnModel and gridPanel.
Do I need to use different container to hold the gridPanels? Do I have a syntax error in the config for my Window? Thanks.
OrdersGrid = new Ext.grid.EditorGridPanel({
id: 'OrdersGrid',
store: OrdersDataStore,
cm: OrdersColumnModel,
enableColLock:false,
clicksToEdit:1,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
});
ItemsGrid = new Ext.grid.EditorGridPanel({
id: 'ItemsGrid',
store: ItemsDataStore,
cm: ItemsColumnModel,
enableColLock:false,
clicksToEdit:1,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
});
OrdersItemsWindow = new Ext.Window({
id: 'OrdersItemsWindow',
title: 'Orders and Items',
layout: 'vbox',
closable: true,
height: 700,
width: 800,
layoutConfig: {
align : 'stretch',
pack : 'start',
},
plain: false,
items: [ OrdersGrid, ItemsGrid ]
});
OrdersDataStore.load();
ItemsDataStore.load();
OrdersItemsWindow.show();
The height of the two GridPanels needs to be set, since the VBoxLayout of the window doesn't handle this. It can only set the horizontal width of the items it contains.
For example:
OrdersGrid = new Ext.grid.EditorGridPanel({
id: 'OrdersGrid',
store: OrdersDataStore,
cm: OrdersColumnModel,
enableColLock:false,
clicksToEdit:1,
flex: 1, // add this line
selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
});
The rest of the syntax you are using is correct.
Alternatively, it's possible to use something like height: 200 to fix the height, in place of the flex parameter.
Ext.onReady(function () {
var movieStore = Ext.create("Ext.data.Store", {
baseParams: { action: 'movie' },
fields: ["film_id","title", "rent", "buy"],
data: [{film_id:1,title: "film_A",rent: 20.0,buy: 30},
{film_id:2,title: "film_B",rent: 20.0,buy: 36},
{film_id:3,title: "film_C",rent :22.0,buy :27}]
});
var actorStore = Ext.create("Ext.data.Store", {
baseParams: { action: 'actors' },
fields: ["actor_id","name"],
data: [{actor_id: 1,name:"A"},
{actor_id: 2,name: "B"},
{actor_id: 3,name :"C"}]
});
var movieGrid = Ext.create("Ext.grid.Panel", {
store: movieStore,
//sm: Ext.create('Ext.grid.RowSelectionModel',{ singleSelect: true }),
singleSelect: true,
title: "Movies",
selType: 'rowmodel',
/* plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
})],*/
columnLines: true,
width: 600,
height: 200,
columns: [
{xtype : "rownumberer"},
{text: 'film_ID',dataIndex: 'film_id'},
{text: 'Movie',dataIndex: 'title', editor: 'textfield'},
{text: 'Rent', dataIndex: 'rent',xtype : "numbercolumn",format:"0.00"},
{text: 'Buy', dataIndex: 'buy',xtype:"numbercolumn",format:"0.00"}
],
iconCls: 'icon-grid',
margin: '0 0 20 0',
renderTo: Ext.getBody()
});
var actorGrid = Ext.create("Ext.grid.Panel", {
store: actorStore,
//sm: Ext.create('Ext.grid.RowSelectionModel',{ singleSelect: true }),
singleSelect: true,
title: "Actor",
selType: 'rowmodel',
/* plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
})],*/
columnLines: true,
width: 600,
height: 200,
columns: [
{xtype : "rownumberer"},
{text: 'actor_id',dataIndex: 'actor_id'},
{text: 'name',dataIndex: 'name', editor: 'textfield'},
],
iconCls: 'icon-grid',
margin: '0 0 20 0',
renderTo: Ext.getBody()
});
movieGrid.getSelectionModel().on('rowselect',
function(sm, rowIndex, record) {
/*moviesGrid.setTitle('Movies starring ' +
record.data.first_name + ' ' + record.data.last_name);*/
actorStore.load({ params: { 'movie':
record.data.actor_id} });
});
movieStore.load();
});

Categories