PDA

View Full Version : Grid doesn't show bottom bar



HammerSpb
2 Jul 2008, 3:11 AM
Who knows in what there can be a problem?

I create viewport, in the right part two grids which are displayed on pressing in a tree at the left. The problem that one grid is displayed correctly, and the second, precisely same, does not display bbar. The truth when you change the sizes of a browser or panels all is normal.


Application.core.js


Ext.onReady(function () {
Ext.QuickTips.init();

// shorthand
var Tree = Ext.tree;

var treePanel = new Tree.TreePanel({
id: 'tree-panel',
fitToFrame: true,
autoScroll: true,
// tree-specific configs:
rootVisible: false,
border: false,
lines: true,
singleExpand: false,
useArrows: true,
loader: new Tree.TreeLoader({
dataUrl:'some.php'
})
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Main',
draggable:false,
id:'source'
});
treePanel.setRootNode(root);
root.expand();

// Assign the changeLayout function to be called on tree node click.
treePanel.on('click', function(n)
{

var sn = this.selModel.selNode || {}; // selNode is null on initial selection
if(n.id == 'metrics')
{
Ext.getCmp('content-panel').layout.setActiveItem('products-panel');
}
else if(n.id == 'products')
{
Ext.getCmp('content-panel').layout.setActiveItem('products-panel2');
}

});

var contentPanel = {
id: 'content-panel',
region: 'center',
layout: 'card',
margins: '1 1 1 1',
fitToFrame: true,
border: true,
autoScroll: false,
items: [
ProductsGrid, ProductsGrid2
]
};

var viewport = new Ext.Viewport(
{
layout:'border',
items:[
new Ext.BoxComponent({ //Title page
region:'north',
el: 'north',
height:30
}),
{ // !!!
region:'center',
border: false,
fitToFrame: true,
margins:'0 0 0 0',
autoScroll: false,
layout:'border',

items: [
{ //Menu
width:250,
region:'west',
title:'Menu',
collapsible: true,
margins:'1 1 1 1',
border: true,
items: [treePanel]
},
{ //
region:'center',
border: false,
layout:'border',
items: [contentPanel,
{
height:150,
region:'south',
contentEl: 'center_footer',
title:'Status',
collapsible: true,
margins:'1 1 1 1',
border: true
}]
}]
}]
});
});


Application.Product.js


Ext.ns('Application');

Application.ProductsGrid = Ext.extend(Ext.grid.EditorGridPanel,
{
border:false
,initComponent:function()
{
//Define DATA-Store

var media_store = new Ext.data.JsonStore({
url: '...',
baseParams: {
method: 'get'
},
id: 'id',
fields: [
{name: 'id'},
{name: 'name'},
{name: 'id_sector'},
{name: 'tech_leader_accept'},
{name: 'id_kvartal_active'}
],
remoteSort: false
});
media_store.setDefaultSort('name', 'asc');

//==

// shorthand alias
var fm = Ext.form;

//== Define Column model
var mediaGrid_cm = new Ext.grid.ColumnModel([
{id:'id', header: 'id', dataIndex: 'id', hidden: true },
{
id:'name',
header: 'Title',
dataIndex: 'name',
width: 200,
sortable: true,
editor: new fm.TextField({ allowBlank: false })
},
{
id:'id_sector',
header: 'Sector',
dataIndex: 'id_sector',
width: 100,
sortable: true
},
{
id:'id_kvartal_active',
header: 'Times',
dataIndex: 'id_kvartal_active',
width: 120,
sortable: true
},
{
id:'tech_leader_accept',
header: 'Data',
dataIndex: 'tech_leader_accept',
width: 120,
sortable: true
}
]);
mediaGrid_cm.defaultSortable = true;



Ext.apply(this,
{
id: 'products-panel'
,title: 'Products'
,store: media_store
,cm: mediaGrid_cm
,viewConfig:{forceFit:true}
,sm: new Ext.grid.RowSelectionModel({singleSelect:true})
,stripeRows: true
,autoExpandColumn: 'name'
,border: false
,iconCls: 'icon-grid'
,clicksToEdit: 1
,bbar:[
{
text:'Add product',
tooltip:'Add product',
iconCls:'add',
handler : function(){ doAdd(media_store); }
}, '-',
{
text:'Delete product',
tooltip:'Delete product',
iconCls:'remove',
handler : function(){ doDelete(); }
}
]
});

Application.ProductsGrid.superclass.initComponent.call(this);
} // eo function initComponent
,onRender:function(ct, position)
{
var store = this.store;
store.load({params:{command: "list"}});

Application.ProductsGrid.superclass.onRender.apply(this, arguments);
} // eo function onRender
});

Ext.reg('productsgrid', Application.ProductsGrid);
var ProductsGrid = new Application.ProductsGrid();



Application.Product2.js


Ext.ns('Application');

Application.ProductsGrid2 = Ext.extend(Ext.grid.EditorGridPanel,
{
border:false
,initComponent:function()
{
//Define DATA-Store

var media_store = new Ext.data.JsonStore({
url: '...',
baseParams: {
method: 'get'
},
id: 'id',
fields: [
{name: 'id'},
{name: 'name'},
{name: 'id_sector'},
{name: 'tech_leader_accept'},
{name: 'id_kvartal_active'}
],
remoteSort: false
});
media_store.setDefaultSort('name', 'asc');

//==

// shorthand alias
var fm = Ext.form;

//== Define Column model
var mediaGrid_cm = new Ext.grid.ColumnModel([
{id:'id', header: 'id', dataIndex: 'id', hidden: true },
{
id:'name',
header: 'Title',
dataIndex: 'name',
width: 200,
sortable: true,
editor: new fm.TextField({ allowBlank: false })
},
{
id:'id_sector',
header: 'Sector',
dataIndex: 'id_sector',
width: 100,
sortable: true
},
{
id:'id_kvartal_active',
header: 'Times',
dataIndex: 'id_kvartal_active',
width: 120,
sortable: true
},
{
id:'tech_leader_accept',
header: 'Data',
dataIndex: 'tech_leader_accept',
width: 120,
sortable: true
}
]);
mediaGrid_cm.defaultSortable = true;



Ext.apply(this,
{
id: 'products-panel2'
,title: 'Products'
,store: media_store
,cm: mediaGrid_cm
,viewConfig:{forceFit:true}
,sm: new Ext.grid.RowSelectionModel({singleSelect:true})
,stripeRows: true
,autoExpandColumn: 'name'
,border: false
,iconCls: 'icon-grid'
,clicksToEdit: 1
,bbar:[
{
text:'Add product',
tooltip:'Add product',
iconCls:'add',
handler : function(){ doAdd(media_store); }
}, '-',
{
text:'Delete product',
tooltip:'Delete product',
iconCls:'remove',
handler : function(){ doDelete(); }
}
]
});

Application.ProductsGrid2.superclass.initComponent.call(this);
} // eo function initComponent
,onRender:function(ct, position)
{
var store = this.store;
store.load({params:{command: "list"}});

Application.ProductsGrid2.superclass.onRender.apply(this, arguments);
} // eo function onRender
});

Ext.reg('productsgrid2', Application.ProductsGrid2);
var ProductsGrid2 = new Application.ProductsGrid2();


first grid doesn't show correctly
http://www.save-img.com/thumbs/1be3ca7c9ba77cf38be896fb048cabc8.jpg (http://www.save-img.com/pic.php?id=1be3ca7c9ba77cf38be896fb048cabc8)

second grid - show correctly
http://www.save-img.com/thumbs/ef6583534e4d41d7b81eb064b02bc294.jpg (http://www.save-img.com/pic.php?id=ef6583534e4d41d7b81eb064b02bc294)

first grid show correctly after resize browser window or collapse bottom panel
http://www.save-img.com/thumbs/87bde83b8d7bdab73511836c3fd41afb.jpg (http://www.save-img.com/pic.php?id=87bde83b8d7bdab73511836c3fd41afb)


:-/

Animal
2 Jul 2008, 4:55 AM
var contentPanel = {
id: 'content-panel',
region: 'center',
layout: 'card',
margins: '1 1 1 1',
fitToFrame: true,
border: true,
autoScroll: false,
items: [ ProductsGrid, ProductsGrid2 ]
};

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ //Title page
region:'north',
el: 'north',
height:30
}),
treePanel,
contentPanel,
{
height:150,
region:'south',
contentEl: 'center_footer',
title:'Status',
collapsible: true,
margins:'1 1 1 1',
border: true
}]
});

HammerSpb
2 Jul 2008, 5:12 AM
doesn't work.

Tree panel show in the title. :(

Animal
2 Jul 2008, 6:37 AM
What does "Tree panel show in the title" mean?

Animal
2 Jul 2008, 6:38 AM
Obviously, you want your TreePanel to be the west region, you must give it region: 'west'

You want it to have a header with a title, so give it a title

HammerSpb
2 Jul 2008, 11:43 PM
I had in view of, that TreePanel is displayed in region:'north ' and if I add record region:'west ' in TreePanel it is not displayed at all.

Animal
2 Jul 2008, 11:51 PM
add something to a TreePanel?

How can that work? A TreePanel contains a load of complex HTML to display a tree! You can't add stuff to it.

If you want a west region which contains multiple items, then create a west Panel. GIve that a layout of whatever type you require (You'll need to think about this, and use a layout which handles multiple child items in the way you want), and add the multiple items to that.

HammerSpb
3 Jul 2008, 1:02 AM
I simply add


var treePanel = new Tree.TreePanel({
id: 'tree-panel',
fitToFrame: true,
autoScroll: true,
region: 'west',
// tree-specific configs:
rootVisible: false,
border: false,
lines: true,
singleExpand: false,
useArrows: true,
loader: new Tree.TreeLoader({
dataUrl:'some.php'
})

Animal
3 Jul 2008, 1:04 AM
OK, add the config option region: 'west', that's fine. So what does your code look like now?

HammerSpb
3 Jul 2008, 1:10 AM
var contentPanel = {
id: 'content-panel',
region: 'center',
layout: 'card',
margins: '1 1 1 1',
fitToFrame: true,
border: true,
autoScroll: false,
items: [ ProductsGrid, ProductsGrid2 ]
};

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ //Title page
region:'north',
el: 'north',
height:30
}),
treePanel,
contentPanel,
{
height:150,
region:'south',
contentEl: 'center_footer',
title:'Status',
collapsible: true,
margins:'1 1 1 1',
border: true
}]
});


and



var Tree = Ext.tree;

var treePanel = new Tree.TreePanel({
id: 'tree-panel',
fitToFrame: true,
autoScroll: true,
region: 'west',
// tree-specific configs:
rootVisible: false,
border: false,
lines: true,
singleExpand: false,
useArrows: true,
loader: new Tree.TreeLoader({
dataUrl:'http://url'
})
});

var root = new Tree.AsyncTreeNode({
text: 'Main',
draggable:false,
id:'source'
});
treePanel.setRootNode(root);
root.expand();

Animal
3 Jul 2008, 1:14 AM
That looks good, it should work.

HammerSpb
3 Jul 2008, 2:19 AM
No ((, show this

http://www.save-img.com/thumbs/20e69257abb0d62e7c948c8d7de236ed.jpg (http://www.save-img.com/pic.php?id=20e69257abb0d62e7c948c8d7de236ed)

Animal
3 Jul 2008, 2:45 AM
I think you need to create a cut down example in your examples/layout directory that shows the problem in isolation.

Then you could post that and we could run it.

HammerSpb
10 Jul 2008, 5:48 AM
It's ok.

I simply add one panel and active it:



var descPanel = new Ext.Panel({
id: 'desc-panel',
collapsible:false,
width:400,
border: false,
html: '<p>Hello, this is a test Application</p>'
});




var contentPanel = {
id: 'content-panel',
region: 'center',
layout: 'card',
margins: '1 1 1 1',
fitToFrame: true,
activeItem: 0,
border: true,
autoScroll: false,
items: [
descPanel, ProductsGrid, ProductsGrid2
]
};


Thanks Animal. :)

HammerSpb
10 Jul 2008, 5:51 AM
Just one moment please.....

My grid panel show content only under FF2/FF3, but not show in IE6/IE7.

In what there can be a reason?
A content I receive dynamically from php-script.
Can JSON special at IE6/IE7?

JSON is:


[{"id":"44","name":"i-Cell","id_sector":"2","tech_leader_accept":"0","id_kvartal_active":"2"},{"id":"45","name":"SPACE","id_sector":"2","tech_leader_accept":"0","id_kvartal_active":"2"},
{"id":"46","name":"X-tones","id_sector":"2","tech_leader_accept":"0","id_kvartal_active":"2"},{"id":"47","name":"CareM","id_sector":"2","tech_leader_accept":"0","id_kvartal_active":"2"},{"id":"48","name":"Promoter+","id_sector":"3","tech_leader_accept":"0","id_kvartal_active":"2"},{"id":"49","name":"Voice SMS","id_sector":"2","tech_leader_accept":"0","id_kvartal_active":"2"},{"id":"50","name":"\u0415\u0421\u041f\u041f","id_sector":"2","tech_leader_accept":"0","id_kvartal_active":"2"},{"id":"43","name":"[email protected]","id_sector":"2","tech_leader_accept":"0","id_kvartal_active":"2"},{"id":"51","name":"Test","id_sector":"2","tech_leader_accept":"0","id_kvartal_active":"0"},
{"id":"52","name":"testtt","id_sector":"3","tech_leader_accept":"0","id_kvartal_active":"0"},{"id":"53","name":"sdfsf","id_sector":"3","tech_leader_accept":"0","id_kvartal_active":"0"}]

Animal
10 Jul 2008, 6:00 AM
You nmust have a trailing comma somewhere. How do you debug on IE ?

HammerSpb
10 Jul 2008, 6:35 AM
I use Fiddler2 (for IE) and FireBug (for FF)

Animal
10 Jul 2008, 6:37 AM
I mean debug code. You have to have some method. IE 6-7 you can use the freebie MS Script Debugger.

IE8 has a Developer Tools option which is not as good as Firebug, but at least you get to step through code, examine the DOM and the call stack.

HammerSpb
10 Jul 2008, 7:02 AM
Has looked DOM. There where there should be a table - is empty (it in IE)
:-/

Animal
10 Jul 2008, 7:06 AM
extra comma?

HammerSpb
10 Jul 2008, 7:12 AM
I do not know, like extra comma was not present. Has tried to transfer only one line - the same result.


[{'id':'44','name':'i-Cell','id_sector':'2','tech_leader_accept':'0','id_kvartal_active':'2'}]

HammerSpb
10 Jul 2008, 7:40 AM
I have a little changed structure Grid. But result all the same the same.



Application.ProductsGrid = Ext.extend(Ext.grid.EditorGridPanel,
{
border:false
,initComponent:function()
{
//Define DATA-Store

var media_store = new Ext.data.JsonStore({
url: '/ita/product/list/',
baseParams: {
method: 'get'
},
id: 'id',
fields: [
{name: 'id'},
{name: 'name'}
],
remoteSort: false
});
media_store.setDefaultSort('name', 'asc');


//==

// shorthand alias
var fm = Ext.form;

//== Define Column model
var mediaGrid_cm = new Ext.grid.ColumnModel([
{id:'id', header: 'id', dataIndex: 'id', hidden: true },
{
id:'name',
header: 'Название продукта',
dataIndex: 'name',
width: 200,
sortable: true,
editor: new fm.TextField({
allowBlank: false
})
}
]);
mediaGrid_cm.defaultSortable = true;


Ext.apply(this,
{
id: 'products-panel'
,title: 'Продукты'
,store: media_store
,cm: mediaGrid_cm
,viewConfig:{forceFit:true}
,sm: new Ext.grid.RowSelectionModel({singleSelect:true})
,stripeRows: true
,autoExpandColumn: 'name'
,border: false
,iconCls: 'icon-grid'
,clicksToEdit: 1
,bbar:[
{
text:'Добавить продукт',
tooltip:'Добавить продукт',
iconCls:'add'
}, '-',
{
text:'Удалить продукт',
tooltip:'Удалить продукт',
iconCls:'remove'
}
]
});

Application.ProductsGrid.superclass.initComponent.call(this);
} // eo function initComponent
,onRender:function(ct, position)
{
var store = this.store;
store.load({params:{command: "list"}});


Application.ProductsGrid.superclass.onRender.apply(this, arguments);
} // eo function onRender
});

Ext.reg('productsgrid', Application.ProductsGrid);

var ProductsGrid = new Application.ProductsGrid();



and send json:

[{id:'44',name:'iCell'}]