PDA

View Full Version : Rendering Problem



AmitOlsys
11 Sep 2008, 4:17 AM
Dear All,
I have a Rendering Problem,


Ext.ns('Example');
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
// Ext.state.Manager.setProvider(new Ext.state.CookieProvider);
Example.version = 'Beta 2'

Example.Grid1 = Ext.extend(Ext.grid.EditorGridPanel, {
layout:'fit'
,border:false
,stateful:false
// ,renderTo: 'divGridCon'
,url:'Files/Condition.xml'
,objName:'Term'
,idName:'compID'
,stripeRows: true
,sortable:false
,clicksToEdit:1
,initComponent:function() {

// create row actions
this.rowActions = new Ext.ux.grid.RowActions({
header:'Update',
actions:[{
iconCls:'zzz'
,qtip:'Delete Record'
},{
iconCls:'xxx'
,qtip:'Edit Record'
}]
,widthIntercept:Ext.isSafari ? 4 : 2
,id:'actions'
});
this.rowActions.on('action', this.onRowAction, this);

Ext.apply(this, {
store:new Ext.data.Store({
// load using HTTP
url: 'Files/Condition.xml',

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have a "plant" tag
record: 'ConditionLogic'
}, Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'Term', type: 'string'},
{name: 'DataItem', type: 'string'},
{name: 'Compare', type: 'string'},
{name: 'Values', type: 'string'},
{name: 'Extend', type: 'string'},
{name:'action1', type:'string'},
{name:'qtip1', type:'string'}
]) )
})
,proxy:new Ext.data.HttpProxy({url:this.url})
//Creating Columns in Editor-grid
,columns:[{
header:'Term'
,id:'Term'
,dataIndex:'Term'
,width:160
,sortable:true
,editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'Term',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header:'DataItem'
,dataIndex:'DataItem'
,width:40
,sortable:true
,align:'right'
,editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'DataItem',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header:'Compare'
,dataIndex:'Compare'
,width:40
,sortable:true
,align:'right'
,editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'Compare',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header:'Values'
,dataIndex:'Values'
,width:50
,sortable:true
,align:'right'
,editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'Values',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header:'Extend'
,dataIndex:'Extend'
,width:70
,sortable:true
,align:'right'
,editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'Extend',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},
this.rowActions]

,plugins:this.rowActions
,viewConfig:{forceFit:true}
// ,buttons:[{
// text:'Save'
// ,iconCls:'icon-disk'
// ,scope:this
// ,handler:this.commitChanges
// },{
// text:'Reset'
// ,iconCls:'icon-undo'
// ,scope:this
// ,handler:function() {
// this.store.rejectChanges();
// }
// }]
,tbar:[{
text:'Add Record'
,tooltip:'Add Record to Grid'
,iconCls:'icon-plus'
,id:'btn-add'
,listeners:{
click:{scope:this, fn:this.addRecord,buffer:200}
}
},{
text:'Add Record'
,tooltip:'Add Record with Form'
,iconCls:'icon-form-add'
,listeners:{
click:{scope:this, buffer:200, fn:function(btn) {
alert('abc');
}}
}
}]
}); // eo apply

// this.bbar = new Ext.PagingToolbar({
// store:this.store
// ,displayInfo:true
// ,pageSize:10
// });
// call parent
Example.Grid1.superclass.initComponent.apply(this, arguments);
} // eo function initComponent

,onRender:function() {
// call parent
Example.Grid1.superclass.onRender.apply(this, arguments);
// load store
this.store.load();
} // eo function onRender
// }}}
// {{{
,addRecord:function() {
var store = this.store;
if(store.recordType) {
var rec = new store.recordType({newRecord:true});
rec.fields.each(function(f) {
rec.data[f.name] = f.defaultValue || null;
});
rec.commit();
store.add(rec);
return rec;
}
return false;
} // eo function addRecord
,onRowAction:function(grid, record, action, row, col) {
switch(action) {
case 'zzz':
this.deleteRecord(record);
break;
case 'xxx':
// this.recordForm.show(record, grid.getView().getCell(row, col));
alert('def');
break;
}
} // eo onRowAction
// }}}
// {{{
,commitChanges:function() {
var records = this.store.getModifiedRecords();
if(!records.length) {
return;
}
var data = [];
Ext.each(records, function(r, i) {
var o = r.getChanges();
if(r.data.newRecord) {
o.newRecord = true;
}
o[this.idName] = r.get(this.idName);
data.push(o);
}, this);
var o = {
url:this.url
,method:'post'
,callback:this.requestCallback
,scope:this
,params:{
cmd:'saveData'
,objName:this.objName
,data:Ext.encode(data)
}
};
Ext.Ajax.request(o);
} // eo function commitChanges
// }}}
// {{{
,requestCallback:function(options, success, response) {
if(true !== success) {
this.showError(response.responseText);
return;
}
try {
var o = Ext.decode(response.responseText);
}
catch(e) {
this.showError(response.responseText, 'Cannot decode JSON object');
return;
}
if(true !== o.success) {
this.showError(o.error || 'Unknown error');
return;
}

switch(options.params.cmd) {
case 'saveData':
var records = this.store.getModifiedRecords();
Ext.each(records, function(r, i) {
if(o.insertIds && o.insertIds[i]) {
r.set(this.idName, o.insertIds[i]);
delete(r.data.newRecord);
}
});
this.store.commitChanges();
break;

case 'deleteData':
break;
}
} // eo function requestCallback
,showError:function(msg, title) {
Ext.Msg.show({
title:title || 'Error'
,msg:Ext.util.Format.ellipsis(msg, 2000)
,icon:Ext.Msg.ERROR
,buttons:Ext.Msg.OK
,minWidth:1200 > String(msg).length ? 360 : 600
});
} // eo function showError
,deleteRecord:function(record) {
Ext.Msg.show({
title:'Delete record?'
,msg:'Do you really want to delete <b>' + record.get('company') + '</b><br/>There is no undo.'
,icon:Ext.Msg.QUESTION
,buttons:Ext.Msg.YESNO
,scope:this
,fn:function(response) {
if('yes' !== response) {
return;
}
// console.info('Deleting record');
}
});
} // eo function deleteRecord
// }}}

}); // eo extend

// register xtype
Ext.reg("examplegrid1", Example.Grid1);
when I am using following onready function then it is properly rendered in a new window

Ext.onReady(function(){
var win = new Ext.Window({


id:'rfwin'
,title:'amit'
,iconCls:'icon-grid'
// ,renderTo:'divGridCon'
,width:700
,height:400
,stateful:false
,x:320
,y:82
,plain:true
,layout:'fit'
,closable:true
,border:false
,maximizable:true
,items:{xtype:'examplegrid1', id:'examplegrid1'}
});

win.show();
});But I wanted it to rendered in a div named "divGridCon". But it is not rendered with grid data. I am using below code to rendered it in divGridCon

Ext.onReady(function(){
new Ext.form.FormPanel({
id:'rfwin'
,renderTo: 'divGridCon'
,title:'amit'
,iconCls:'icon-grid'
// ,renderTo:''
,width:700
,height:400
,stateful:false
,x:20
,y:12
,plain:true
,layout:'fit'
,closable:true
,border:false
,maximizable:true
,items:{xtype:'examplegrid1', id:'examplegrid1'}
});
});Please help me to rendered it in divGridCon along with the grid data.

Thanks
AmitOlsys

Animal
11 Sep 2008, 4:37 AM
So what happens? The div 'divGridCon' exists? What ends up in it? Did you look with Firebug?

AmitOlsys
11 Sep 2008, 4:41 AM
Dear Animal,
When I tried to rendered it in a new window the grid was properly rendered alonwith grid data, but when i tried to rendered it in a Formthen grid layout is rendered only not with grid data.and Div "divGridCon" is also exist.

Please have a look over the code I provided

Thanks
AmitOlsys


So what happens? The div 'divGridCon' exists? What ends up in it? Did you look with Firebug?

Animal
11 Sep 2008, 6:12 AM
I saw your code. Then I asked you to investigate. Have you done what I suggested, or have you stopped working waiting for someone to provide a miracle cure?

AmitOlsys
11 Sep 2008, 8:46 PM
Dear Animal,
Sorry to bother you again and again, But you can't believe that I spent lot of time to find out the reason of not rendering data in grid. Please help me to know which logic I am lagging with.

Thanks
AmitOlsys


I saw your code. Then I asked you to investigate. Have you done what I suggested, or have you stopped working waiting for someone to provide a miracle cure?

AmitOlsys
11 Sep 2008, 9:48 PM
Dear Animal,
please help this newbie to go through ExtJs.
Believe me I went through the code multiple times but didn't get any solution. when it is rendered in Ext.window it rendered properly along with data in grid. but when I wanted to render it in an existing div, it rendered only grid without data.

Thanks and Regards
AmitOlsys

AmitOlsys
11 Sep 2008, 11:34 PM
Dear Animal,
I love your approach of problem solving and I feel you are as an "angry young man". I was doing a great mistake. By the way I learnt alot by that.
Thanks Animal for your great time to me

Regards
AmitOlsys

Animal
11 Sep 2008, 11:44 PM
Do not go through the code, that looks OK.

Go through the results of that code in the browser using Firebug.

AmitOlsys
12 Sep 2008, 12:31 AM
Dear Animal,
I was taken

Example.Grid1 = Ext.extend(Ext.grid.EditorGridPanel, {.......});
Ext.reg("examplegrid1", Example.Grid1);
and then I was rendered it in my div 'divGridCon' as

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

Ext.override(Ext.form.Field, {msgTarget:'side'});

var g1 = new Example.Grid1({
id: 'g1'
,layout:'fit'
,width:500
,height:130
});
g1.render('divGridCon');

}); // eo onReady

Now it is rendered properly.
while when I had taken new Ext.form.FormPanel it was not rendered with griddata.
so Now I concluded that what namespace I registered i.e."Example.Grid1" it ismandatory to create the instance of that particular namespace
new Example.Grid1({....});
am I right?

Animal
12 Sep 2008, 12:51 AM
You should be able to use a registered xtype.

AmitOlsys
12 Sep 2008, 1:04 AM
Thanks Animal,
Were u also be there in ExtJs Developement Team.


You should be able to use a registered xtype.

Animal
12 Sep 2008, 1:25 AM
I have no connection at all to the Ext Company.