PDA

View Full Version : GridPanel vanishing after reconfigure.



treblereel
4 Mar 2010, 9:32 AM
Hi all, i am a noobie :) and i have a problem, plz help.

When the page loading everything ok, and i can see the grid, and data in the grid, but after load i do fake reconfigure of a grid from store to store. And grid is disappear





var groups = new Ext.data.JsonStore({
url: '<?php echo base_url();?>users/get_groups',
root: 'active',
totalProperty: 'count',
fields: [{ name: 'group_id' }, { name: 'group_name' }]});

groups.load();

var first = { title: 'First Panel',
id: 'form'}


var usersStore = new Ext.data.JsonStore({
// autoLoad: true,
url: '<?php echo base_url();?>users/json_userdata',
root: 'users',
totalProperty: 'count',
fields: [{ name: 'id' }, { name: 'username' }, { name: 'login' },{ name: 'ldap' },{ name: 'email' },{ name: 'group' }, { name: 'group_id' }, { name: 'status'}]});
usersStore.load();







var UsersGridModel = [{ header: "ID", width: 100, dataIndex: 'id', sortable: true, hidden: true },
{ id: 'title-col', header: "Title", width: 300, dataIndex: 'username', sortable: true },
{ header: "login", dataIndex: 'login', width: 100, sortable: true },
{ header: "department", dataIndex: 'group', width: 200, sortable: true, align: 'right'},
{ header: "email", dataIndex: 'email', sortable: true, width: 100, align: 'right'},
{ header: "email", dataIndex: 'email', sortable: true, width: 100, align: 'right'}];





var inactiveusersStore = new Ext.data.JsonStore({
autoLoad: true,
url: '<?php echo base_url();?>users/json_inactive_userdata',
root: 'users',
totalProperty: 'count',
fields: [{ name: 'id' }, { name: 'username' }, { name: 'login' },{ name: 'ldap' },{ name: 'email' },{ name: 'group' }, { name: 'group_id' }, { name: 'status'}]
});


inactiveusersStore.load();


colModelU = new Ext.grid.ColumnModel({
defaults: {
width: 820,
height: 600,
loadMask: true,
columnLines: true
}});



var usersGrid = new Ext.grid.GridPanel({
id: 'usersGrid',
store: usersStore,
columns: UsersGridModel,
colModel: colModelU,
width: 820,
height: 600,
loadMask: true,
columnLines: true,
});




var update_user = {
xtype: 'fieldset',
border: false,
// layout: 'fit',
width: "20%",
// width: 300,
// defaults: { width: 230 },
defaultType: 'textfield',
autoHeight: true,
bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
items: [{ id: 'username', fieldLabel: 'username', name: 'username', width: 200},
{ fieldLabel: "Login", dataIndex: 'login', width: 200, name: 'login' },
{ dataIndex: 'id', width: 200, name: 'id',hidden: true },
{ xtype:'combo',dataIndex: 'group_id',lazyRender: true, store: groups, editable: false, mode: 'remote', valueField:'group_id',
displayField:'group_name', hiddenName:'group_id', fieldLabel: "department", width: 200, name: 'group'},
{ xtype: 'checkbox', fieldLabel: "Status", dataIndex: 'status', width: 200, name: 'status'},
{ xtype: 'checkbox', fieldLabel: "Ldap?", dataIndex: 'ldap', width: 200, name: 'ldap' },
{ fieldLabel: "email", dataIndex: 'email', width: 200, name: 'email' }],

buttons: [{
text: 'Save',
handler: function () {
usersForm.getForm().submit({
waitMsg: 'Saving...', // Wait Message
success: function () { // When saving data success
Ext.MessageBox.alert ('Message','Data has been saved');
// clear the form
usersStore.reload();
//inactiveusersGrid
inactiveusersStore.reload();
usersForm.getForm().reset();
// usersStore.reload();
},
failure: function () { // when saving data failed
Ext.MessageBox.alert ('Message','Saving data failed');
}
});
}
},{
text: 'Cancel',
handler: function () {
usersForm.getForm().reset(); // when this button clicked, reset this form
}
}]
}










var adduserForm = new Ext.FormPanel ({
labelWidth: 75, // label settings here cascade unless overridden
url:'<?php echo base_url();?>users/add_user',
frame:true,
bodyStyle:'padding:5px 5px 0',
defaults: {width: 230},
defaultType: 'textfield',
items: [{ fieldLabel: 'username', name: 'username', width: 200},
{ fieldLabel: "Login", name: 'login', width: 200},
{ fieldLabel: "Password", name: 'password', width: 200},
{ xtype:'combo',lazyRender: true, store: groups, editable: false, mode: 'local', valueField:'group_id',
displayField:'group_name', hiddenName:'group_id', fieldLabel: "department", width: 200, name: 'group'},
{ xtype: 'checkbox', fieldLabel: "Status", checked:true, width: 200, name: 'status' },
{ xtype: 'checkbox', fieldLabel: "Ldap?", width: 200, name: 'ldap'},
{ fieldLabel: "email", dataIndex: 'email', width: 200, name: 'email'}],


buttons: [{
text: 'Save',
handler: function () {
adduserForm.getForm().submit({
waitMsg: 'Saving...', // Wait Message
success: function () { // When saving data success
Ext.MessageBox.alert ('Message','Data has been saved');
usersStore.reload();
inactiveusersStore.reload(); // Lets check this !
adduserForm.getForm().reset();
win_add_user.hide();
},
failure: function () { // when saving data failed
Ext.MessageBox.alert ('Message','Saving data failed');
}
});
}
},{
text: 'Cancel',
handler: function () {
adduserForm.getForm().reset();
win_add_user.hide();
}
}]

});








var usersForm = new Ext.FormPanel({
id: 'form',
frame: true,
labelAlign: 'left',
bodyStyle: 'padding:0px',
url:'<?php echo base_url();?>users/update_user',
width: "100%",
layout: 'column',
items: [{
items: [usersGrid]
}, update_user]
});

var inactiveusersForm = new Ext.FormPanel({
id: 'inactive_users_form',
title: 'Inactive',
frame: true,
labelAlign: 'left',
bodyStyle: 'padding:0px',
url:'<?php echo base_url();?>users/update_user',
width: "100%",
layout: 'column',

});





var usersTab = new Ext.TabPanel({
activeTab: 0,
width: "100%",

title: 'Users',
items: [ { title: 'Active',
items:[usersForm]},

{ contentEl: 'ldap', title: 'Ldap' }]
});







var tabPanelcenter = new Ext.TabPanel({
activeTab: 0,
items: [ usersTab,
{ contentEl: 'tab2', title: 'Departments' },
{ contentEl: 'tab2', title: 'Settings' }
]

});



new Ext.Viewport(
{
layout: 'border',
items:
[ { region: "north",
xtype: 'panel',
tbar: [{ },'->',{ text: 'Logout', width: 55, icon: '<?php echo base_url();?>images/icons/bomb.png',handler: function(){ }
}],

},

{
region: 'center',
layout: 'fit',
id: 'center',
items:[tabPanelcenter]

},




]});

//Data to Grid
usersGrid.getSelectionModel().on('rowselect', function(sm, rowIndex, record) {
usersForm.getForm().loadRecord(record);
});

usersStore.on('load', function(store, records, options) {
if (records && records.length > 0) {
usersGrid.getSelectionModel().selectFirstRow();
}
});

var win_add_user = new Ext.Window({
width:350,
height:260,
title: 'Add User',
resizable: false,
closeAction:'hide',
items: [adduserForm],
bodyStyle:{'background-color': '#FFFFFF'}
});



var holder = Ext.getCmp('usersGrid');


Ext.onReady(function() {

inactiveusersStore.load();
usersGrid.reconfigure(inactiveusersStore,colModelU);

usersForm.doLayout();
inactiveusersStore.load();
});

treblereel
4 Mar 2010, 12:57 PM
plz help, cant find out whats wrong or where my mistake