PDA

View Full Version : Grid in an Ext.Window



scblue
2 Dec 2009, 12:03 AM
Hi all,

I have a page with an Editor Grid and it works well in the browser.
Now, I am trying to display the grid in an Ext.Window on win.show() but the grid is not displaying. The window, however, did popped up.
Anyone have any clues as to why?
I appreciate the help.
Thanks.





Ext.onReady(function(){

var win = new Ext.Window({
width:400
,layout: 'fit'
,id:'autoload-win'
,height:300
,autoScroll:true
//,items: grid

});


win.show();


var fm = Ext.form;

var cm = new Ext.grid.ColumnModel({
// specify any defaults for each column
defaults: {
sortable: true // columns are not sortable by default
},
columns: [
{
id: 'id',
header: 'ID',
dataIndex: 'id',
width: 50,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
})
},{
id: 'userid',
header: 'User ID',
dataIndex: 'userid',
width: 150,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
})
},{
id: 'name',
header: 'User Name',
dataIndex: 'name',
width: 150,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
})
},{
id: 'email',
header: 'Email',
dataIndex: 'email',
width: 200,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
})
},{

header: 'Active',
id: 'active',
dataIndex: 'active',
width: 50,
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
// transform the data already specified in html
transform: 'active',
lazyRender: true,
listClass: 'x-combo-list-small'
})
}, {
header: 'Role',
id: 'role',
dataIndex: 'role',
width: 50,
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
// transform the data already specified in html
transform: 'role',
lazyRender: true,
listClass: 'x-combo-list-small'
})
}, {
id: 'password',
header: 'Password',
dataIndex: 'password',
width: 150,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
})
},

]
});

// create the Data Store
var store = new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,

// load remote data using HTTP
url: 'UserData.php',

// specify a XmlReader (coincides with the XML format of the returned data)
reader: new Ext.data.JsonReader({
root: 'Root',
}, [
{name: 'id', mapping: 'id', sortDir: 'ASC', sortType: 'asInt', type: 'int'},
{name: 'userid', mapping: 'userid'},
{name: 'name', mapping: 'name'},
{name: 'email', mapping: 'email'},
{name: 'active', mapping: 'active'},
{name: 'role', mapping: 'role'},
{name: 'password', mapping: 'password'}
])

//sortInfo: {field:'id', direction:'ASC', sortType: 'asInt'}
});

var ds_model = Ext.data.Record.create([
'id',
'userid',
'name',
'email',
'active',
'role',
'password'
]);

// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
//renderTo: 'editor-grid',
//width: 816,
//height: 500,
//autoExpandColumn: 'common', // column with this id will be expanded
title: 'User Management',
frame: true,
clickstoEdit: 2,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
listeners: {
afteredit: function(e){
var conn = new Ext.data.Connection();
conn.request({
url: 'UserDataUpdate.php',
params: {
action: 'update',
id: e.record.id,
field: e.field,
value: e.value
}, //eo params
success: function(resp,opt) {
e.record.commit();
}, //eo success
failure: function(resp,opt) {
e.record.reject();
} //eo failure
}) //eo conn.request
} //eo afteredit
},
tbar: [{
text: 'Add User',
//icon: 'images/table_add.png',
cls: 'x-btn-text-icon',
handler: function() {
var conn = new Ext.data.Connection();
conn.request({
url: 'UserDataUpdate.php',
params: {
action: 'insert',
userid:'New User'
},
success: function(resp,opt) {
var insert_id = Ext.util.JSON.decode(resp.responseText).insert_id;
grid.getStore().insert(0, new ds_model({id:insert_id,userid:'New User',name:'',email:'',active:1,role:0,password:''}));
//grid.startEditing(0,1);
grid.startEditing(0,0);
//Ext.Msg.alert('Record Inserted');
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to add movie');
}
})
}
},{
text: 'Remove User',
//icon: 'images/table_delete.png',
cls: 'x-btn-text-icon',
handler: function() {
var sm = grid.getSelectionModel();
var sel = sm.getSelected();
if (sm.hasSelection()){
Ext.Msg.show({
title: 'Remove User',
buttons: Ext.MessageBox.YESNOCANCEL,
msg: 'Remove '+sel.data.userid+'?',
fn: function(btn){
if (btn == 'yes'){
var conn = new Ext.data.Connection();
conn.request({
url: 'UserDataUpdate.php',
params: {
action: 'delete',
id: sel.data.id
},
success: function(resp,opt) {
grid.getStore().remove(sel);
},
failure: function(resp,opt) {
Ext.Msg.alert('Error','Unable to delete movie');
}
});
}
}
});
}
}
}] // eo listeners
});

// manually trigger the data store load
store.load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: function(){
Ext.Msg.show({
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
}
});
});

Animal
2 Dec 2009, 12:20 AM
See the items config

husniadil
2 Dec 2009, 1:27 PM
Try to move your window definition to bottom...

I try your code, but some errors occured since I don't have your combobox "transform" id and any php that generate json.

Try to move your window definition to bottom...



Ext.onReady(function () {

var cm = new Ext.grid.ColumnModel({
// specify any defaults for each column
/* defaults: {
sortable: true // columns are not sortable by default
}, */
columns: [{
id: 'id',
header: 'ID',
dataIndex: 'id',
width: 50,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
},
{
id: 'userid',
header: 'User ID',
dataIndex: 'userid',
width: 150,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
},
{
id: 'name',
header: 'User Name',
dataIndex: 'name',
width: 150,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
},
{
id: 'email',
header: 'Email',
dataIndex: 'email',
width: 200,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
},
{

header: 'Active',
id: 'active',
dataIndex: 'active',
width: 50,
/* editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
// transform the data already specified in html
transform: 'active',
lazyRender: true,
listClass: 'x-combo-list-small'
}) */
},
{
header: 'Role',
id: 'role',
dataIndex: 'role',
width: 50,
/* editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
// transform the data already specified in html
transform: 'role',
lazyRender: true,
listClass: 'x-combo-list-small'
}) */
},
{
id: 'password',
header: 'Password',
dataIndex: 'password',
width: 150,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
}

]
});

// create the Data Store
var store = new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,

// load remote data using HTTP
url: 'UserData.php',

// specify a XmlReader (coincides with the XML format of the returned data)
reader: new Ext.data.JsonReader({
root: 'Root'
},
[{
name: 'id',
mapping: 'id',
sortDir: 'ASC',
sortType: 'asInt',
type: 'int'
},
{
name: 'userid',
mapping: 'userid'
},
{
name: 'name',
mapping: 'name'
},
{
name: 'email',
mapping: 'email'
},
{
name: 'active',
mapping: 'active'
},
{
name: 'role',
mapping: 'role'
},
{
name: 'password',
mapping: 'password'
}])

//sortInfo: {field:'id', direction:'ASC', sortType: 'asInt'}
});

var ds_model = Ext.data.Record.create(['id', 'userid', 'name', 'email', 'active', 'role', 'password']);

// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
//renderTo: 'editor-grid',
//width: 816,
//height: 500,
//autoExpandColumn: 'common', // column with this id will be expanded
title: 'User Management',
frame: true,
clickstoEdit: 2,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
listeners: {
afteredit: function (e) {
var conn = new Ext.data.Connection();
conn.request({
url: 'UserDataUpdate.php',
params: {
action: 'update',
id: e.record.id,
field: e.field,
value: e.value
},
//eo params
success: function (resp, opt) {
e.record.commit();
},
//eo success
failure: function (resp, opt) {
e.record.reject();
} //eo failure
}); //eo conn.request
} //eo afteredit
},
tbar: [{
text: 'Add User',
//icon: 'images/table_add.png',
cls: 'x-btn-text-icon',
handler: function () {
var conn = new Ext.data.Connection();
conn.request({
url: 'UserDataUpdate.php',
params: {
action: 'insert',
userid: 'New User'
},
success: function (resp, opt) {
var insert_id = Ext.util.JSON.decode(resp.responseText).insert_id;
grid.getStore().insert(0, new ds_model({
id: insert_id,
userid: 'New User',
name: '',
email: '',
active: 1,
role: 0,
password: ''
}));
//grid.startEditing(0,1);
grid.startEditing(0, 0);
//Ext.Msg.alert('Record Inserted');
},
failure: function (resp, opt) {
Ext.Msg.alert('Error', 'Unable to add movie');
}
});
}
},
{
text: 'Remove User',
//icon: 'images/table_delete.png',
cls: 'x-btn-text-icon',
handler: function () {
var sm = grid.getSelectionModel();
var sel = sm.getSelected();
if (sm.hasSelection()) {
Ext.Msg.show({
title: 'Remove User',
buttons: Ext.MessageBox.YESNOCANCEL,
msg: 'Remove ' + sel.data.userid + '?',
fn: function (btn) {
if (btn == 'yes') {
var conn = new Ext.data.Connection();
conn.request({
url: 'UserDataUpdate.php',
params: {
action: 'delete',
id: sel.data.id
},
success: function (resp, opt) {
grid.getStore().remove(sel);
},
failure: function (resp, opt) {
Ext.Msg.alert('Error', 'Unable to delete movie');
}
});
}
}
});
}
}
}] // eo listeners
});

var win = new Ext.Window({
width: 400,
layout: 'fit',
id: 'autoload-win',
height: 300,
autoScroll: true,
items: grid
});

win.show();

// manually trigger the data store load
/* store.load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: function(){
Ext.Msg.show({
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
}
}); */
});

husniadil
2 Dec 2009, 1:28 PM
Try to move your window definition to bottom...

like this:


Ext.onReady(function () {

var cm = new Ext.grid.ColumnModel({
// specify any defaults for each column
defaults: {
sortable: true // columns are not sortable by default
},
columns: [{
id: 'id',
header: 'ID',
dataIndex: 'id',
width: 50,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
},
{
id: 'userid',
header: 'User ID',
dataIndex: 'userid',
width: 150,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
},
{
id: 'name',
header: 'User Name',
dataIndex: 'name',
width: 150,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
},
{
id: 'email',
header: 'Email',
dataIndex: 'email',
width: 200,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
},
{

header: 'Active',
id: 'active',
dataIndex: 'active',
width: 50/* ,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
// transform the data already specified in html
transform: 'active',
lazyRender: true,
listClass: 'x-combo-list-small'
}) */
},
{
header: 'Role',
id: 'role',
dataIndex: 'role',
width: 50/* ,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
// transform the data already specified in html
transform: 'role',
lazyRender: true,
listClass: 'x-combo-list-small'
}) */
},
{
id: 'password',
header: 'Password',
dataIndex: 'password',
width: 150,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
}

]
});

// create the Data Store
var store = new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,

// load remote data using HTTP
url: 'UserData.php',

// specify a XmlReader (coincides with the XML format of the returned data)
reader: new Ext.data.JsonReader({
root: 'Root'
},
[{
name: 'id',
mapping: 'id',
sortDir: 'ASC',
sortType: 'asInt',
type: 'int'
},
{
name: 'userid',
mapping: 'userid'
},
{
name: 'name',
mapping: 'name'
},
{
name: 'email',
mapping: 'email'
},
{
name: 'active',
mapping: 'active'
},
{
name: 'role',
mapping: 'role'
},
{
name: 'password',
mapping: 'password'
}])

//sortInfo: {field:'id', direction:'ASC', sortType: 'asInt'}
});

var ds_model = Ext.data.Record.create(['id', 'userid', 'name', 'email', 'active', 'role', 'password']);

// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
//renderTo: 'editor-grid',
//width: 816,
//height: 500,
//autoExpandColumn: 'common', // column with this id will be expanded
title: 'User Management',
frame: true,
clickstoEdit: 2,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
listeners: {
afteredit: function (e) {
var conn = new Ext.data.Connection();
conn.request({
url: 'UserDataUpdate.php',
params: {
action: 'update',
id: e.record.id,
field: e.field,
value: e.value
},
//eo params
success: function (resp, opt) {
e.record.commit();
},
//eo success
failure: function (resp, opt) {
e.record.reject();
} //eo failure
}); //eo conn.request
} //eo afteredit
},
tbar: [{
text: 'Add User',
//icon: 'images/table_add.png',
cls: 'x-btn-text-icon',
handler: function () {
var conn = new Ext.data.Connection();
conn.request({
url: 'UserDataUpdate.php',
params: {
action: 'insert',
userid: 'New User'
},
success: function (resp, opt) {
var insert_id = Ext.util.JSON.decode(resp.responseText).insert_id;
grid.getStore().insert(0, new ds_model({
id: insert_id,
userid: 'New User',
name: '',
email: '',
active: 1,
role: 0,
password: ''
}));
//grid.startEditing(0,1);
grid.startEditing(0, 0);
//Ext.Msg.alert('Record Inserted');
},
failure: function (resp, opt) {
Ext.Msg.alert('Error', 'Unable to add movie');
}
});
}
},
{
text: 'Remove User',
//icon: 'images/table_delete.png',
cls: 'x-btn-text-icon',
handler: function () {
var sm = grid.getSelectionModel();
var sel = sm.getSelected();
if (sm.hasSelection()) {
Ext.Msg.show({
title: 'Remove User',
buttons: Ext.MessageBox.YESNOCANCEL,
msg: 'Remove ' + sel.data.userid + '?',
fn: function (btn) {
if (btn == 'yes') {
var conn = new Ext.data.Connection();
conn.request({
url: 'UserDataUpdate.php',
params: {
action: 'delete',
id: sel.data.id
},
success: function (resp, opt) {
grid.getStore().remove(sel);
},
failure: function (resp, opt) {
Ext.Msg.alert('Error', 'Unable to delete movie');
}
});
}
}
});
}
}
}] // eo listeners
});

var win = new Ext.Window({
width: 400,
layout: 'fit',
id: 'autoload-win',
height: 300,
autoScroll: true,
items: grid
});

win.show();

// manually trigger the data store load
/* store.load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: function(){
Ext.Msg.show({
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
}
}); */
});

husniadil
3 Dec 2009, 9:33 AM
Move your window object and show method to bottom...

LutzAlbers
3 Dec 2009, 11:58 PM
Maybe I'm overseeing something obvious, but you're not placing your grid in your window (in fact there is nothing in your window). Add it to the items: collection of your window.

scblue
6 Dec 2009, 8:37 PM
Thanks all for the responses.
Yes, I've got it working.
Had to put the window codes to the bottom of the script.
Thanks again!

husniadil
8 Dec 2009, 11:22 AM
Sorry for multiple posts.
I didn't see that my post's in moderation..