Ext Js - Problem Loading Two Grids - javascript

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();
});

Related

Data is not loading in ExtJS 3.4

My new in extjs and working on ExtJS 3.2.
In that my data is not loading but if comment data column is displaying can anyone please help me.
My code is
{
xtype: 'panel',
title: "Search Result",
items: [{
xtype: 'grid',
store: new Ext.data.Store({
autoDestroy: true,
fields: ['Name', 'Roll', 'Class'],
root: 'records',
// proxy: proxy,
data: [{
Name: false,
Roll: 'a',
Class: 20
}, {
Name: true,
Roll: 'b',
Class: 25
}]
}),
columns: [{
text: 'Name',
id: 'company',
header: 'Name',
width: 130,
sortable: false,
hideable: false,
dataIndex: 'Name'
}, {
text: 'Roll',
width: 130,
header: 'Name',
dataIndex: 'Roll',
hidden: false
}, {
text: 'Class',
width: 130,
header: 'Class',
dataIndex: 'Class',
hidden: false
}]
}]
}
Inside panel I am taking grid.
Can anybody please help me.?
I am writing data outside the scope and now its working fine.
My complete code is.
var myData = [
['FFPE Slide',2,'eSample'],
['Plasma',2,'eSample'],
['Whole Blood',2,'eSample'] ];
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'stype'},
{name: 'scnt'},
{name: 'src'}
]
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Sample Type", width: 75, sortable: true, dataIndex: 'stype'},
{header: "Subjects Count", width: 75, sortable: true, dataIndex: 'scnt'},
{header: "Source", width: 75, sortable: true, dataIndex: 'src'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:150,
width:150,
title:'Detailed Counts'
});
This is working fine.
Remove the root config (root:'records') in the store.. or try to add records property to the data object. Remove the reader as well

How to show grid in window with ExtJs?

Thare is problem in my ExtJs app.
I want to show grid in window. I says:
Column Model:
var markCm = new Ext.grid.ColumnModel({
columns:[{
header: 'Аннотация',
dataIndex: 'annotation',
width: 230,
},{
header: 'Дата',
dataIndex: 'mark_date',
width: 30
},{
header: 'Статус',
dataIndex: 'status',
width: 30
}],
defaults: {
flex: 1
}
});
console.log("1");
Grid:
var markGrid = new Ext.grid.GridPanel({
//store: markStore,
cm: markCm,
selModel: new Ext.grid.RowSelectionModel(),
stripeRows : true,
//height: 400,
//loadMask: true,
id: 'markGrid',
autoScroll: true,
});
Window:
console.log("2");
var markWin = new Ext.Window({
id: 'markWindow',
layout: 'fit',
title:'Спискок маркеров',
autoScroll:false,
//width:600,
items:[markGrid],
listeners:{
}
});
console.log("3");
markWin.show();
console.log("4");
And in firebug i see:
1
2
3
TypeError: this.ds is undefined
...ng(this.enableUrlEncode)?this.enableUrlEncode:"data"]=Ext.encode(h);k.params=l}e...
Whats can be wrong?
UPDATE
I try add store like in this example
var markGrid = new Ext.grid.GridPanel({
store: Ext.create('Ext.data.ArrayStore', {}),
cm: markCm,
selModel: new Ext.grid.RowSelectionModel(),
stripeRows : true,
//height: 400,
//loadMask: true,
id: 'markGrid',
autoScroll: true,
});
and get error:
1
TypeError: d[a] is not a constructor
...ng(this.enableUrlEncode)?this.enableUrlEncode:"data"]=Ext.encode(h);k.params=l}e...
You are missing a store. Every grid needs a store. (this.ds is undefined => ds is probably dataStore)
I don't know what version you are working with. (check that by typing Ext.versions.extjs.version in the console)
In case you are working with latest ExtJS version (4.x) it is preferred to use Ext.define and Ext.create instead of using the 'new' keyword :)
Here is a working fiddle
Ext.onReady(function () {
Ext.define('MyApp.model.Mark', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'annotation',
type: 'string'
}, {
name: 'mark_date',
type: 'date'
}, {
name: 'status',
type: 'string'
}]
});
Ext.define('MyApp.store.Marks', {
extend: 'Ext.data.Store',
//best to require the model if you put it in separate files
requires: ['MyApp.model.Mark'],
model: 'MyApp.model.Mark',
storeId: 'markStore',
data: {
items: [{
id: 1,
annotation: "Test",
mark_date: "2013-04-24 9:28:00",
status: "Done"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
itemId: 'markGrid',
store: Ext.create('MyApp.store.Marks'),
loadMask: true,
width: 400,
columns: [{
header: 'Аннотация',
dataIndex: 'annotation',
width: 230,
flex: 1
}, {
header: 'Дата',
dataIndex: 'mark_date',
width: 30,
flex: 1
}, {
header: 'Статус',
dataIndex: 'status',
width: 30,
flex: 1
}]
});
var window = Ext.create('Ext.window.Window', {
renderTo: Ext.getBody(),
items: [grid]
});
window.show();
});
UPDATE
You are using an example from Ext 4.x => Ext.data.ArrayStore
can't be created via Ext.create but use the new keyword in Ext versions < 4.x :)
http://jsfiddle.net/Vandeplas/BZUxa/
Ext.onReady(function () {
var markCm = new Ext.grid.ColumnModel({
columns: [{
header: 'Аннотация',
dataIndex: 'annotation',
width: 230,
}, {
header: 'Дата',
dataIndex: 'mark_date',
width: 30
}, {
header: 'Статус',
dataIndex: 'status',
width: 30
}],
defaults: {
flex: 1
}
});
var markGrid = new Ext.grid.GridPanel({
store: new Ext.data.ArrayStore({}),
cm: markCm,
selModel: new Ext.grid.RowSelectionModel(),
stripeRows: true,
//height: 400,
//loadMask: true,
id: 'markGrid',
autoScroll: true,
});
var markWin = new Ext.Window({
id: 'markWindow',
layout: 'fit',
title: 'Спискок маркеров',
autoScroll: false,
//width:600,
items: [markGrid],
listeners: {}
});
markWin.show();
});

How to fit gridPanels columns?

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).

EXTJS 3, how to display a grid to popup?

In the EXTJS 3, how to display a grid to a popup ?
I have this coding, why it doesn't work ?
var myData = [['ddd', '1111'], ['eee', '2222']];
var store = new Ext.data.ArrayStore({
fields: [
{ name: 'FLD' },
{ name: 'VAL' }
]
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: store,
loadMask: true,
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{ header: 'FLD', dataIndex: 'FLD' },
{ header: 'VAL', dataIndex: 'VAL' }
]
}),
viewConfig: {
forceFit: true
}
});
var myWin = Ext.create("Ext.Window", {
layout: 'fit',
title: 'Exception Detail',
width: 400,
height: 300,
closable: false,
buttonAlign: 'center',
items: [grid],
modal: true
});
myWin.show();
This code has no problem at all but if you tried on JSFiddle, it is not working and I dont know why. I tried with my local Ext 3.4 and it is working fine. Here is my code.
<html>
<head>
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type='text/javascript' src='ext-3.4.0/ext-all.js'></script>
</head>
<body>
</body>
<script>
Ext.onReady(function() {
var myData = [['ddd', '1111'], ['eee', '2222']];
var store = new Ext.data.ArrayStore({
fields: [
{ name: 'FLD', type: 'string' },
{ name: 'VAL', type: 'string' }
]
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: store,
loadMask: true,
columns: [
{ header: 'FLD', dataIndex: 'FLD' },
{ header: 'VAL', dataIndex: 'VAL' }
],
viewConfig: {
forceFit: true
}
});
var myWin = new Ext.Window({
layout: 'fit',
title: 'Exception Detail',
width: 400,
height: 300,
closable: false,
buttonAlign: 'center',
items: [grid],
modal: true
});
myWin.show();});
</script>

GridPanel in Extjs is not loaded

I have this code in my application, but this not load any data. Data is accessible but wont display in my gridpanel, anyone have idea, why?
Ext.onReady(function () {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var btnAdd = new Ext.Button({
id: 'btnAdd',
text: 'Adicionar',
iconCls: 'application_add',
handler: function (s) {
}
});
var btnEdit = new Ext.Button({
id: 'btnEdit',
text: 'Editar',
iconCls: 'application_edit',
handler: function (s) {
}
});
var btnRemove = new Ext.Button({
id: 'btnRemove',
text: 'Apagar',
iconCls: 'application_delete',
handler: function (s) {
}
});
var tbar = new Ext.Toolbar({
items: [btnAdd, btnEdit, btnRemove]
});
var formFind = new Ext.FormPanel({
height: 100
});
var store = new Ext.data.JsonStore({
remoteSort: true,
idProperty: 'ContentId',
root: 'rows',
totalProperty: 'results',
fields: [
{ name: 'ContentId', type: 'int' },
{ name: 'Name' },
{ name: 'Version' },
{ name: 'State' },
{ name: 'CreatedDateTime' },
{ name: 'PublishedDateTime'},
{ name: 'CreatedByUser' },
{ name: 'PublishedByUser' }
],
proxy: new Ext.data.ScriptTagProxy({
url: '/Admin/ArticleList'
})
});
store.setDefaultSort('ContentId', 'desc');
var paging = new Ext.PagingToolbar({
store: store,
pageSize: 25,
displayInfo: true,
displayMsg: 'Foram encontrados {2} registos. Mostrando {0} de {1}',
emptyMsg: "Nenhum registo encontrado."
});
var grid = new Ext.grid.GridPanel({
id: 'grid',
height: 700,
store: store,
loadMask: true,
loadingText: 'Carregando...',
autoHeight: true,
cm: new Ext.grid.ColumnModel ([
{ id: 'ContentId', dataIndex: 'ContentId', header: 'Identif.', width: 60, sortable: true },
{ id: 'Name', dataIndex: 'Name', header: 'Titulo', width: 75, sortable: true },
{ id: 'Version', dataIndex: 'Version', header: 'Versão', width: 75, sortable: true },
{ id: 'State', dataIndex: 'State', header: 'Estado', width: 75, sortable: true },
{ id: 'CreatedDateTime', dataIndex: 'CreatedDateTime', header: 'Data de Criação', width: 85, sortable: true },
{ id: 'PublishedDateTime', dataIndex: 'PublishedDateTime', header: 'Data de Publicação', width: 75, sortable: true },
{ id: 'CreatedByUser', dataIndex: 'CreatedByUser', header: 'Criado por', width: 75, sortable: true },
{ id: 'PublishedByUser', dataIndex: 'PublishedByUser', header: 'Publicado por', width: 85, sortable: true }
]),
stripeRows: true,
viewConfig: { forceFit: true },
bbar: paging
});
var panel = new Ext.Panel({
id: 'panel',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: tbar,
items: [grid]
});
store.load(); // trigger the data store load
});
You shouldn't be using a ScriptTagProxy. If you read the docs you'll see that it's used only in limited cases to retrieve context from remote server in a particular format.
You want a HttpProxy instead.

Categories