Related
I'm using ExtJS5 and trying to put the object items to card panel for a function that user can change the panel when click treepanel. But I don't know is it a right way to do that.
var p = Ext.create('Ext.panel.Panel', {
layout: 'card',
items: [
grid, bottompanel
]
});
I like to do that like Example
And here is the panel on right hand side.
var grid = Ext.create('Ext.grid.Panel', {
//title: 'Simpsons',
title: 'Customers',
height: 300,
width:'100%',
id: 'cus_grid',
columns: [
{text: "Customer ID", dataIndex: "id", flex: 1},
{text: "Customer Name", dataIndex: "name", flex: 1},
{text: "Services Name", dataIndex: "s_name", flex: 1},
{text: "Services Type", dataIndex: "s_type", flex: 1}
],
store: user,
listeners : {
itemclick: function(dv, record, item, index, e) {
//alert(record.get('name'));
Ext.getCmp('infoForm').getForm().findField('id').setReadOnly(true);
Ext.getCmp('infoForm').getForm().findField('s_type').setReadOnly(true);
Ext.getCmp('infoForm').loadRecord(record);
}
}
});
var bottompanel = Ext.create('Ext.form.Panel', {
//region: 'center',
title: 'Information',
bodyPadding: 10,
flex:1,
width:'100%',
id: 'infoForm',
items: [{
xtype: 'textfield',
name: 'id',
fieldLabel: 'Customer ID',
allowBlank: false // requires a non-empty value
},{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}, {
xtype: 'textfield',
name: 's_name',
fieldLabel: 'Services Name',
allowBlank: false // requires a non-empty value
}, cmbBox],
// Reset and Submit buttons
buttons: [],
tbar: toolBar
});
Thank you.
I fixed the problem....
I forgot to add width in card panel so have an error occurred.
Thank you.
I've been trying to find an answer to this problem for the last 24 hours and couldn't find a way to resolve this. Here it is:
I'm using MVC architecture with ExtJS 4. I have a tabpanel that has some grid as items. When these grids load, they do not have a vertical scrollbar, even though I set autoScroll to 'true' and their content is bigger than the screen can show. Every post I read about this problem was resolved setting the grid's parent layout to 'fit', but, as you can see below, I already done it and still not have a scrollbar... If I define a height to the grid, the scrollbar works perfectly, but I need it to work with different heights...
I belive I might have a overnesting problem, but I just started developing with ExtJS some days ago and it stills a little confusing to me...
The question is: how can I make this structure work with autoScroll?
SO won't let me post an image here as my reputation is lower than 10, so you can find my app's structure here
Please note that I wrote "layout: 'fix'" in the image, but I meant "layout: 'fit'" :)
This is my Main view, which has 2 panels. The 'center' one is where I load the tabpanel that has the grid.
Ext.define('MyApp.view.Main', {
extend: 'Ext.container.Container',
requires:[
// 'Ext.tab.Panel',
// 'Ext.layout.container.Border',
'MyApp.view.Menus'
],
xtype: 'app-main',
layout: {
type: 'border'
},
items: [
{
region: 'north',
xtype: 'panel',
padding: '5 5 0 5',
title: 'MyApp',
items: {
xtype: 'menus'
}
},
{
region: 'center',
itemId: 'centerPanel',
xtype: 'panel',
padding: 5,
layout: 'fit'
}
]
});
This is the view that have the fieldset and the tabpanel as items:
Ext.define('MyApp.view.licencas.List', {
extend: 'Ext.form.Panel',
xtype: 'licencaslist',
title: 'Licenças de software',
border: false,
items: [
{
xtype: 'fieldset',
title: 'Dados do Veículo',
margin: 5,
items: [
{
xtype: 'combobox',
anchor: '100%',
valueField: 'id',
displayField: 'descricao',
store: 'ComboEmpresas',
typeAhead: true,
queryMode: 'local',
name: 'empresa',
fieldLabel: 'Empresa'
},
{
xtype: 'combobox',
editable: false,
valueField: 'id',
displayField: 'descricao',
store: 'ComboSoftwares',
queryMode: 'local',
name: 'software',
fieldLabel: 'Software'
},
{
name: 'valor',
fieldLabel: 'Valor empresa:',
xtype: 'numberfield',
minValue: 0,
maxValue: 100000,
allowDecimals: true,
disabled: true,
},
{
name: 'contrato',
fieldLabel: 'Contrato:',
xtype: 'textfield',
disabled: true,
},
{
name: 'demonstracao',
xtype: 'checkbox',
fieldLabel: 'Demonstração',
disabled: true,
}
]
},
{
xtype: 'licencastabpanel',
border: false,
margin: 5
}
],
initComponent: function() {
this.callParent(arguments)
}
});
And finally this is the grid where I need the autoScroll property...
Ext.define('MyApp.view.licencas.placas.List', {
extend: 'Ext.grid.Panel',
xtype: 'licencasplacaslist',
store: 'EmpresaVeiculos',
border: false,
forceFit: true,
autoScroll: true,
plugins: [new Ext.grid.plugin.CellEditing({
clicksToEdit: 1,
})],
dockedItems: [
{
dock: 'top',
xtype: 'toolbar',
items: [
{
text: 'Alterar todos',
iconCls: 'money-16',
action: 'alterartodos',
xtype: 'button'
},
'->',
{
xtype: 'trigger',
name: 'searchfieldLicencasPlacas',
itemId: 'searchfieldLicencasPlacas',
emptyText: 'Filtrar por placa...',
width: '500px',
hideLabel: true,
selectOnFocus: true,
triggerCls: 'x-form-search-trigger'
}
]
}
],
columns: [
Ext.create('Ext.grid.RowNumberer'),
{
text: "Placa",
dataIndex: 'placa',
width: 70
},
{
text: "Serial",
dataIndex: 'serial',
width: 70
},
{
text: "Condutor",
dataIndex: 'condutor'
},
{
text: "Ativo",
dataIndex: 'ativo',
width: 50
},
{
text: "Data Início",
dataIndex: 'data_inicio',
format: 'd.m.Y',
width: 60
},
{
text: "Data Fim",
dataIndex: 'dt_fim',
format: 'd.m.Y',
width: 60,
editor: {
xtype: 'datefield',
format: 'd.m.Y'
}
},
{
text: "Contrato",
dataIndex: 'contrato',
width: 70,
editor: {
xtype: 'textfield'
}
},
{
text: "Software",
dataIndex: 'valor_software',
renderer: 'usMoney',
width: 70,
editor: {
xtype: 'numberfield',
minValue: 0,
maxValue: 1000,
allowDecimals : true
}
},
{
text: "Comunicação",
dataIndex: 'valor_comunicacao',
renderer: 'usMoney',
width: 70,
editor: {
xtype: 'numberfield',
minValue: 0,
maxValue: 1000,
allowDecimals : true
}
},
{
text: "Comodato",
dataIndex: 'valor_comodato',
renderer: 'usMoney',
width: 70,
editor: {
xtype: 'numberfield',
minValue: 0,
maxValue: 1000,
allowDecimals : true
}
},
{
text: 'Empresa para faturar',
dataIndex: 'fatura',
width: 200,
editor:
{
xtype: 'combobox',
displayField: 'descricao',
valueField: 'descricao',
store: 'ComboFaturas',
name: 'software',
queryMode: 'local'
}
}
],
initComponent: function() {
this.callParent(arguments)
}
});
Please, note that I removed all "layout: 'fit'" (except from the Main view, which has influence over other views) from the code as it wasn't working anyway... :)
Please, let me know if I need to provide you any extra information. I tried to make it easier to understand with the image below.
Thank you guys!
It works as follows:
grid ignores autoScroll config option
grid needs a height, either explicit or controlled by a layout of its parent container
if grid does not have a height, it tries to expand itself vertically according to the number of records loaded in the store so that it does not show the scrollbar
fit layout can only have one item - if it is a grid then its height (and width) is controlled by the size of the parent container
To summarize: If you want a grid to scroll it must have a height.
I have an EXT JS 4.2 Grid that has 2 columns that use the renderer to place checkboxes in 1 column and radio buttons in another. How can I auto increment the ID's on these HTML inputs so that I can specifically target them via EXT JS (see columns 'Full' and 'Primary')
// Render library grid
var grid4 = Ext.create('Ext.grid.Panel', {
xtype: 'gridpanel',
id:'button-grid',
store: data,
columns: [
{text: "Library", width: 170, sortable: true, dataIndex: 'name'},
{text: "Market", width: 125, sortable: true, dataIndex: 'market'},
{text: "Expertise", width: 125, sortable: true, dataIndex: 'expertise'},
{text: 'Full', dataIndex:'isFull', renderer: function() {
var rec = grid4.getStore().getAt(this.rowIndex);
return "<input type='checkbox' id='"+rec+"' />";
}},
{text: 'Primary', dataIndex:'isPrimary', renderer: function() {
return "<input type='radio' />";
}},
],
columnLines: false,
selModel: selModel,
// inline buttons
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
layout: {
pack: 'center'
},
items: []
}, {
xtype: 'toolbar',
items: []
}],
width: 600,
height: 300,
frame: true,
title: 'Available Libraries',
iconCls: 'icon-grid',
renderTo: Ext.get('library-grid')
});
UPDATE:
The ID's are now incrementing, thank you!
Now, I have one other question:
I am not seeing the checked:checked flag being set when I check an item in the EXT grid, how would I do something like the code below. I want to check to see if the element is checked
if(document.getElementById("#isFull-"+record['index']+"").checked == true){
var myVar = true;
}
The renderer takes a bunch of arguments automatically, one of which is the rowIndex. You should be able to do this to give the unique ID you want:
{
text: 'Full',
dataIndex:'isFull',
renderer: function(value, meta, record, rowIndex, colIndex)
{
return '<input type="checkbox" id="isFull-' + rowIndex + '" />';
}
}
See more here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Column-cfg-renderer
I am creating a page that only contains a gridpanel, I want my gridpanel to have scrollbars based on the browser size. To do this I am wrapping it in a viewport as discussed here and making sure I specify a layout as discussed here. The grid renders fine but I am not getting any scroll bars. I've tried 'fit', 'border' and 'anchor' layouts but still no luck. The code looks like this:
Ext.create('Ext.Viewport', {
items: [{
region: 'center',
layout: 'fit',
xtype: 'gridpanel',
store: myStore,
loadMask: true,
columns: [{
header: 'Account ID',
dataIndex: 'acct_id',
width: 70
}, {
header: 'First Name',
dataIndex: 'first_name',
width: 120
}, {
header: 'Last Name',
dataIndex: 'last_name',
width: 120
}, {
xtype: 'numbercolumn',
header: 'Account Balance',
dataIndex: 'acct_bal',
width: 70,
renderer: Ext.util.Format.usMoney
}, {
xtype: 'numbercolumn',
header: 'Credit',
dataIndex: 'credit',
width: 70,
renderer: Ext.util.Format.usMoney
}, {
xtype: 'numbercolumn',
header: 'Debt',
dataIndex: 'debt_bal',
width: 70,
renderer: Ext.util.Format.usMoney
}],
}]
});
You should set fit layout to Viewport:
Ext.create('Ext.Viewport', {
layout: 'fit',
items: [...]
});
Setting layout in GridPanel have no effect.
I'm trying to put a Grid (Ext.grid.GridPanel) object inside a Tab .
This is the code:
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
autoDestroy: true,
reader: reader,
data: xg.dummyData
}),
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
{header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: 'Change', dataIndex: 'change'},
{header: '% Change', dataIndex: 'pctChange'},
// instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
{
header: 'Last Updated', width: 135, dataIndex: 'lastChange',
xtype: 'datecolumn', format: 'M d, Y'
}
]
}),
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: 'Framed with Row Selection and Horizontal Scrolling',
iconCls: 'icon-grid'
});
this.tabs = new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
dockedItems: [
{
xtype:'toolbar',
title:'Hello World'
}],
tabBar: {
ui: 'light',
layout: {
pack: 'left'
}
},
items: [
{
cls:'hello',
id:'tab1',
html : '<a>hello</a>',
title:'Monitor'
}, {
cls:'world',
id:'tab2',
xtype: 'map',
html : '<a>hello world</a>',
title:'Map'
}, {
cls:'world',
id:'tab3',
html : '<a>hello world</a>',
dockedItems:grid
}]
});
When I load the page there's no error, but the grid is not shown.
The grid is not a docked item (that's for toolbars and other things that should stick to one side of a container). If you want the grid to take up the entire tab, just add it directly as an item to the TabPanel and it will become the full tab:
items: [
{
cls:'hello',
id:'tab1',
html : '<a>hello</a>',
title:'Monitor'
}, {
cls:'world',
id:'tab2',
xtype: 'map',
html : '<a>hello world</a>',
title:'Map'
},
grid ]