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();
});
Related
I am new to extJS. I want to bind a Ext.grid.Panel to Ext.Panel (yes, I really want that!). This is what I've tried -
Var Panel = new Ext.Panel({
title: 'Test',
id: 'Panel',
items: [Grid]
});
Var Grid =
{
xtype: 'grid',
columns: [
{ header: 'Resort', dataIndex: 'resort' },
{ header: 'Arrival', dataIndex: 'arrival' },
{ header: 'Accompanying Guest(s)', dataIndex: 'guest', flex: 1 }
]
};
Now I want to open Panel in a Ext.Window
var win2 = new Ext.Window({
layout: 'fit',
width: 900,
height: 600,
closeAction: 'hide',
plain: true,
items: [Panel]
});
b.getEl().on('click', function () {
win2.show();
});
This ends in an error - Uncaught TypeError: Cannot read property 'events' of undefined
But when I change the Panel as below, its working fine-
var Panel = new Ext.Panel({
title: 'Test',
id: 'Panel',
items:
[
{
xtype: 'grid',
columns: [
{ header: 'Resort', dataIndex: 'resort' },
{ header: 'Arrival', dataIndex: 'arrival' },
{ header: 'Accompanying Guest(s)', dataIndex: 'guest', flex: 1 }
]
}
]
});
What went wrong in my previous code?
Of course it doesn't work. You're essentially doing this:
var y = x + 1;
console.log(y); // Why isn't y 2?
var x = 1;
Either you have to define your grid before you use it in items as below :
var Grid = {
xtype: 'grid',
columns: [{
header: 'Resort',
dataIndex: 'resort'
}, {
header: 'Arrival',
dataIndex: 'arrival'
}, {
header: 'Accompanying Guest(s)',
dataIndex: 'guest',
flex: 1
}]
};
var Panel = new Ext.Panel({
// title: 'Test',
id: 'Panel',
items: [Grid]
});
Or else one more option is (When you have grid in different js file you can go with listeners as done below ) :
var Panel = new Ext.Panel({
// title: 'Test',
id: 'Panel',
items: [],
listeners: {
render: function(pnl) {
pnl.add(Grid);
}
}
});
var Grid = {
xtype: 'grid',
columns: [{
header: 'Resort',
dataIndex: 'resort'
}, {
header: 'Arrival',
dataIndex: 'arrival'
}, {
header: 'Accompanying Guest(s)',
dataIndex: 'guest',
flex: 1
}]
};
var win2 = new Ext.Window({
layout: 'fit',
width: 500,
height: 400,
closeAction: 'hide',
plain: true,
items: [Panel]
});
b.getEl().on('click', function() {
win2.show();
Below is the fiddle to represnt same
Demo
I've a grid example that i want to make it look like this url below
http://docs.sencha.com/extjs/4.2.2/#!/example/grid/binding.html
The grid code is :
var grid_modal = Ext.create('Ext.grid.Panel',
{
width: '100%',
height: 450,
frame: true,
loadMask: true,
collapsible: false,
title: 'Detail data',
store: list_data,
columns: [
{
header: 'Number',
width: 130,
sortable: true,
dataIndex: 'doc_no',
xtype: 'templatecolumn',
tpl: '{doc_no}<br/>{pp_id}'
}, {
header: 'Date.',
width: 100,
sortable: true,
dataIndex: 'pp_date',
xtype: 'datecolumn',
format:'d-m-Y'
}, {
header: 'Vendor',
width: 160,
sortable: true,
dataIndex: 'org_order',
xtype: 'templatecolumn',
tpl: '{org_order}'
}],
dockedItems:
[{
xtype: 'pagingtoolbar',
store: list_data,
dock: 'bottom',
displayInfo: true
},{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
cls: 'contactBtn',
scale: 'small',
text: 'Add',
handler: function(){
window.location = './pp/detail/'
}
},'->','Periode :',
set_startdate('sdatepp',start),
's.d',
set_enddate('edatepp',end),
'-',
{
xtype : 'textfield',
name : 'find_pp',
id : 'find_pp',
emptyText: 'Keywords' ,
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
onFindPP('find_pp','sdatepp','edatepp')
}
}
}
}]
}],
});
I don't understand how to add data binding to below grid that i make. so it makes look like same as the example on extjs doc. please help me find out how to make the data grid binding. thank you for your attention and help.
public ActionResult ExPage()
{
return View();
}
public JsonResult GetData()
{
return Json(db.Products.ToList().Select(x => new Products { ProductID = x.ProductID, ProductName = x.ProductName, UnitPrice = x.UnitPrice, UnitsInStock = x.UnitsInStock }), JsonRequestBehavior.AllowGet);
}
<script type="text/javascript">
Ext.onReady(function () {
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['ProductID', 'ProductName', 'UnitPrice', 'UnitsInStock'],
proxy: {
type: 'ajax',
url: '/Home/GetData'
}
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
title: 'Products',
columns:
[
{ text: 'Id', dataIndex: 'ProductID', width: 50 },
{ text: 'Name', dataIndex: 'ProductName', width: 200 },
{ text: 'Price', dataIndex: 'UnitPrice', width: 80 },
{ text: 'Stock', dataIndex: 'UnitsInStock', width: 60 }
],
width: 450,
renderTo: Ext.getBody()
});
});
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>
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();
});
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.