PDA

View Full Version : Grid in a tabpanel disappears



lpastor
13 Aug 2009, 3:13 AM
Hello,

I have mixed the restful example with the layout example to put an edited grid inside ŕ tabpanel.

When I click the button to open a first window that work fine.

When I click the button to open a second window without closing the previous one, a new window appears with the grid but the tab of the first window containing the grid disappears.

The code :



/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
// Application instance for showing user-feedback messages.
var App = new Ext.App({});

// Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({
url: 'app.php/users'
});

// Typical JsonReader. Notice additional meta-data params for defining the core attributes of your json-response
var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'id',
root: 'data'
}, [
{name: 'id'},
{name: 'email', allowBlank: false},
{name: 'first', allowBlank: false},
{name: 'last', allowBlank: false}
]);

// The new DataWriter component.
var writer = new Ext.data.JsonWriter();

// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.Store({
id: 'user',
restful: true, // <-- This Store is RESTful
proxy: proxy,
reader: reader,
writer: writer, // <-- plug a DataWriter into the store just as you would a Reader
listeners: {
write : function(store, action, result, response, rs) {
App.setAlert(response.success, response.message);
store.load(); // Ajouté pour forcer le rafraichissement - Add to force the refresh of the data - LP
}
}
});

// Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
var userColumns = [
{header: "ID", width: 40, sortable: true, dataIndex: 'id'},
{header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: new Ext.form.TextField({})},
{header: "First", width: 50, sortable: true, dataIndex: 'first', editor: new Ext.form.TextField({})},
{header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField({})}
];

// load the store immeditately
store.load();

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

// use RowEditor for editing
var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update',
listeners:{
beforeedit: function () {
Ext.TaskMgr.stop(task);
},
beforehide: function () {
//afteredit: function () {
Ext.TaskMgr.start(task);
}
}
});

// Create a typical GridPanel with RowEditor plugin
var userGrid = new Ext.grid.GridPanel({
//renderTo: 'user-grid',
iconCls: 'icon-grid',
frame: true,
title: 'Users',
autoScroll: true,
height: 300,
store: store,
plugins: [editor],
columns : userColumns,
tbar: [{
text: 'Add',
iconCls: 'silk-add',
handler: onAdd
}, '-', {
text: 'Delete',
iconCls: 'silk-delete',
handler: onDelete
}, '-'],
viewConfig: {
forceFit: true
}
});

function onAdd(btn, ev) {
//Ext.TaskMgr.stop(task);
var u = new userGrid.store.recordType({
first : '',
last: '',
email : ''
});
editor.stopEditing();
userGrid.store.insert(0, u);
editor.startEditing(0);
}
/**
* onDelete
*/
function onDelete() {
var rec = userGrid.getSelectionModel().getSelected();
if (!rec) {
return false;
}
userGrid.store.remove(rec);
}

var task = {
run: store.reload,
scope: store,
interval:5000
};

Ext.TaskMgr.start(task);
//Ext.TaskMgr.stop(task);


//#######################################################################################################"

Ext.state.Manager.setProvider(new Ext.state.SessionProvider({state: Ext.appState}));

var button = Ext.get('show-btn');

button.on('click', function(){

// tabs for the center
var tabs = new Ext.TabPanel({
region: 'center',
margins:'3 3 3 0',
activeTab: 0,
defaults:{autoScroll:true},

items:[userGrid,{
title: 'Another Tab',
html: Ext.example.bogusMarkup
}]
});

// Panel for the west
var nav = new Ext.Panel({
title: 'Navigation',
region: 'west',
split: true,
width: 200,
collapsible: true,
margins:'3 0 3 3',
cmargins:'3 3 3 3'
});

var win = new Ext.Window({
title: 'Layout Window',
closable:true,
width:600,
height:350,
//border:false,
plain:true,
layout: 'border',

items: [nav, tabs]
});

win.show(this);
});

});I don't know why the grid in the first window disappears ?

Laurent