Ext.ux.Plugin.RemoteComponent

[tidal]

New version 0.3.0 is there!
for now take a look here (http://extjs.com/forum/showthread.php?p=203370#post203370)


Hi Guys!

I created a RemoteComponent - Plugin for Ext 2.0.
The Plugin loads Component configurations from a remote / AJAX source,
creates the Components and populates them in the (plugin`s) container-body (items).

There are two versions of the Plugin:
- the lightweight Ext.ux.Plugin.LiteRemoteComponent class
- the more configurable Ext.ux.Plugin.RemoteComponent which extends Ext.util.Observable.

link to RemoteComponent-Demo. (http://demo.matikom.de/ext/remotecomponent/Ext.ux.Plugin.RemoteComponent.html)

Where to use:

You can use the plugin with any Component with
plugin ability - this is Ext.Container, Ext.Toolbar
and every Component derived from both of them.
For example: TabPanel, Tip, Window, FieldSet, FormPanel,
GridPanel, TreePanel, PagingToolbar, etc.


What to use for?

This is a very small but powerfull plugin. use it for:
- lazy loading of components
- provide different views of components per request
- remote Forms
- cascade component views based on server side authentification
- testing of component configuration. Don

[tidal]

I have made a bugfix-release.
See the attached zip-file for
Ext.ux.Plugin.RemoteComponent v .0.2.1

* v 0.2.1 / Nov. 13 2007
fixed bug: With config option "loadOn" the plugins AJAX request
has been called every time the specified container

[Bryan]

Ooo, this is pretty slick. I was experimenting with a mechanism to show/hide parts of my application based upon a user's login. I think this will fit in nicely.

[george.antoniadis]

owh this is soooo pretty *drool* :D

var vp = new Ext.Container({
plugins: new Ext.ux.Plugin.RemoteComponent({
url : "data/vp-test.json"
})
});

you can load from viewports...
{
xtype:"viewport",
layout:"border",
items:[{
region:"center",
title:"test",
plugins: new Ext.ux.Plugin.LiteRemoteComponent({ url : 'data/tp-test-json.json' })
},{
region:"west",
width:250,
split:true,
collapsible:true,
titleCollapse:true,
title:"test",
html:"Test"
}]
}

to modal windows with tabs...
{
xtype:'window',
id: 'test',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,
modal:true,
plugins: new Ext.ux.Plugin.LiteRemoteComponent({ url : 'data/tp-test-json.json' }),

buttons: [{
text:'click me',
listeners: {
click: function(){ alert('test'); }
}
}]
}

just by changing the config via json :D
I REALLY start to like this thingie! ^_^

Great work mate :D
Thanks for sharing this with the rest of us :)

[tidal]

well, i think 95% of the applause goes to the Ext2.0 developers
for creating such a mature framework(I just took a deep look in
the documentation).
I have been really surprised how less code you need to get this
functionality
=D>

[architect]

@tidal

Is it possible to add a loading indicator when loading remote component?

Thanks

[george.antoniadis]

The remote components are loaded via an Ajax call.
just create a load mask and destroy it on success/failure.

[architect]

I agree on the principle, but should be part (included) of the plugin or not?

[george.antoniadis]

I'd say part of the config?

[tidal]

@architect + george.antoniadis:

In this version (0.2.1) the config is passed directly to the underlying
Ext.Ajax.request(); The only option that is overridden is the success callback.
In the next version a callback config will be stored and called afterwards.
(There are a few more options to come. For example to override deeply nested
objects/attributes (http://extjs.com/forum/showthread.php?t=20468) of the remote config to provide user/custom views.
Plus error-handling will be improved [There is none yet 8-|])

I

[DragonFist]

does this component not support the {listeners:} config as in, listeners must be added via cmp.on(event: function)?

Reason I am asking is that I am using listeners via a json script and the events are not firing.

[george.antoniadis]

yep I'm pretty sure they are supported... it's the natural order of extjs ;)

[DragonFist]

I re-wrote my code to call a function that adds the listener with the .on() method and it worked where it wouldn't using the listeners: config option.

So it seems likely that it doesn't. I'll have to take a look, perhaps this config option isn't inherited from observable.

[george.antoniadis]

Works like a charm :/
http://noodles.gr/sandbox/extjs/2.0-remote.component-listeners.test/

Click the button1...

it's bound using:
{
text: 'Button1',
listeners: {
'click': function(){ alert('test'); }
},
xtype: 'button'
}
in RemoteComponent2.json on the original demo.

[DragonFist]

okay, but that is the button's event.

I'm talking about the event of the remote plug-in itself.

'beforecomponshow', 'beforeadd', etc.

As in new Ext.ux.plugin.remotecomponent({url:'someurl', listeners:{success: function(){doSomething;}}})

[buggzzy]

Hi,

first thanks for sharing. It's a really cool plugin.
Is it possible to build a toolbar and menu completely from json? I saw the samples in the first post but i didn't understand the toolbar example (Example 3).

Thanks for response

[end-user]

Is there a way to use this to load the items dynamically? I want to be able to retrieve the results of a lookup and populate the 'items' property onload.
piece of config:{ title:"my notes"//tab text
,items: [
{ title:"Case Notes" //inner panel
,tools:[
{ id:"plus" }
]
,defaults: {/*...*/}
,plugins:[new Ext.ux.Plugin.LiteRemoteComponent({url:/*...*/,params:{id:38567}})]
}]
}

Results of URL request:{items:[
{ "title":"panel 1",
"params":{"cnID":29}
},
{ "title":"panel 2",
"params":{"cnID":54}
}
]}

Am I making sense? This doesn't seem to work correctly. Is it not expecting an array in response?

[evilkate]

I found the same issue. You could attach a listener via .on but not in the config via 'listeners'.

I looked at the code and found that, while it was extending the Observer class, it was not calling the Observer Class's constructor. The listeners (in config) are attached by the Observer class, so if it is not being called, then they are not attached.

Anyway. The fixes!

In the the plugin file find where the events are added (search for addEvent)
(you can remove the Kate Added commenting - just markers.

add:

//Kate: Added
this.initialConfig = config;
Ext.apply(this, config);
// End Kate Added


before:


var purgeListeners = config.purgeListeners || true;
this.addEvents({


AND

add:


//Kate: Added
Ext.ux.Plugin.RemoteComponent.superclass.constructor.call(this, config);
// End Kate Added


before: (after just after AddEvents section)


// set breakpoint
if(config.breakOn){
this.on(config.breakOn, function(){return false;});
}



Then all fixed :)

I will attach the entire file if required.

Now. With those changes the use of the plugin also changes.

Instead of doing:

var getRemoteComponentPlugin = function(){
return new Ext.ux.Plugin.RemoteComponent({
url : remoteUrl
});
};

var getLiteRemoteComponentPlugin = function(){
return new Ext.ux.Plugin.LiteRemoteComponent({
url : remoteUrl
});
};

var getDeferedRemoteComponentPlugin = function(){
return new Ext.ux.Plugin.RemoteComponent({
url : remoteUrl,
loadOn: 'show'
});
};

var getStoppedRemoteComponentPlugin = function(){
return new Ext.ux.Plugin.RemoteComponent({
url : remoteUrl,
breakOn: 'show'
});
};



var getMainPanel = function(){
if(!mainPanel){
mainPanel = new Ext.TabPanel({
activeTab: 0,
resizeTabs:true, // turn on tab resizing
minTabWidth: 160,
tabWidth:160,
enableTabScroll:true,
width:'auto',
height:250,
title: 'RemoteComponent-Demo',
autoShow: true,
defaults: {autoScroll:true},
items: [{
title:'Instant Tab',
closable: true,
plugins: [getRemoteComponentPlugin()]


etc

you can do things

{ id: 'sb_quotes', plugins: [getDeferedRemoteComponentPlugin({url: '_remoteComponents/quotes_sb.json', listeners: { 'success': { fn: treebuilder }}})]},


tada!!

Just note!! - for defered loader, you can still just do:


new Ext.ux.Plugin.RemoteComponent({
url : 'someurl.php',
loadOn: 'show'
});



but you can also add listeners now:


new Ext.ux.Plugin.RemoteComponent({
url : 'someurl.php',
listeners: { 'success': { fn: function() { alert('succeeded'); }, single:true }},
loadOn: 'show'
});



Hope this was useful :D
Kate

[evilkate]

Oh and the examples that come with the plugin would benefit from changes.

eg:


var getDeferedRemoteComponentPlugin = function(rConfig){
rC = {
loadOn: 'show'
};

Ext.applyIf(rC,rConfig);
return new Ext.ux.Plugin.RemoteComponent(rC);
}




That way you could pass extra configs as shown in my last line (of last post)

alternatively, you could just access the plugin directly:

{ id: 'sb_quotes', plugins: [new Ext.ux.Plugin.RemoteComponent({ url: '_remoteComponents/quotes_sb.json', loadOn: 'show', listeners: { 'success': { fn: treebuilder }}}}]},

[dverkade]

/* EDIT: The problem has been fixed. The element triggering the remote component was triggering the error. */

Although everything works fine with remote loaded components, I keep on getting the following error:

Ext.fly(A) has no properties

on line 76 of ext-all.js. Anyone else has this problem?
The following JSON is loaded.
{
title:'Nested Plugin Tab',
border: false,
plain: true,
items:[
{
title:'Nested Plugin Tab',
//id: 'remotetab',
activeTab: 0,
xtype: 'tabpanel',
defaults:{autoHeight:true, autoWidth:true, bodyStyle:'padding:10px', autoScroll:true},
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
border: false,
tabWidth:135,
header: false,
enableTabScroll:true,
deferHeight : true,
items:[{
title:'Remote Tab 3',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
headerAsText : true,
deferHeight : true,
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
}]
},{
title:'Remote Tab 4',
defaults: {width: 230},
//defaultType: 'textfield',
deferHeight : true,
html: 'some content'
}]
}
]}

Loading occurs in this plugin part:

var remoteComponent = function(url) {
return new Ext.ux.Plugin.LiteRemoteComponent({"url":url});
}

[goofy]

Hi
i try to use this plugin, seems just what i need but when i put xtype:'form' i have javascript error :

this.items has no properties

A has no properties

My json result code :

{
xtype:'form',
title: 'test',
onSubmit: Ext.emptyFn,
submit: function() {
this.getForm().getEl().dom.submit();
}
}

can someone help me please ?

thanks

[goofy]

ok i forgot some parameters sorry

[goofy]

how do you add and fire an action.load to a form created with remote component please?

[dlethe]

I've got some relative newbie questions relating to the use of the plug-in, and have a code-related implementation question at the end of this, and a general question regarding whether or not the RemoteComponent extension has any inherent limitations that might prevent me from accomplishing my goal.

First, I am trying to come up with is a widget model where user selects from a list of allowed plugins based on info I post to the host, let them select one, and then use something like this to get it. [Visualize the advanced dataview example, but instead of clicking on Photographs, they'll see Icons and if they double-click, then the RemoteComponent will get launched within a portal layout, or better yet, the ManagedIframe.

I need to have multiple independent components running. Many of components will need to use the Updater class so I can have them autorefresh at various intervals. Some of the components I pull in will need to have handlers for button clicking, using JSON, grids, etc. (But I won't do any recursive calls where a component will invoke RemoteComponent .. I'm not a sadist)

I use an embedded server, so the directory structure of the component library has a few constraints. It isn't a simple matter of copying the remoteComponents to a _remoteComponents directory on the host side and reading them per one of the examples below:

new Ext.ux.Plugin.RemoteComponent({ url: '_remoteComponents/widget1.json', ...

I will have to something that utilizes form.submit to grab it, as the embedded server has to extract it from a library by looking at the parameters I post.

form.submit ({ url: 'process-post.html',
timeout: 30000,
method: 'post',
scope: this,
params: {
formname: '_remoteComponents',
widgetname: 'widget1.json',
widgetconstraints: 'Admin=Y,username='bob,anotherparameter=42'
},
success: function (form,action)
????

So can anybody suggest how I would finish out the success function using the example code based on the demo so I do some experimenting

And more importantly, am I going down an ill-advised path because I'm not considering any interoperability issues that would create problems with the Ext.Updater in a portal-type application.
Thanks

[Yoris]

Hi, i noticed that there are too many questions unanswered but, still.....
im using this plugin to load dynamically created objs, but, i need at some point to reload the parentContainer to somehow refresh its content.... the thing is, let me explain myself better

i haver a tab panel, one of the tabs has the plugins and brings a bunch of (dynamic) panels (each panel has info bout users ), everyone inside a container panel.... it IS working ... but i need to add one 'user' (it would add one panel) and reload the parent tab or the parent container for the "userTabs"..... adding the new like tab.add() is not an option because each panel is really complex... each panel holds inside a tab panel with lots of info extracted of a DB, so the simplest way would be to "execute" the same ajaxRequest (with the same params and url) the plugin made when it was shown (loadOn:'show') ... just like a reload, or refresh.... is there a way to do this? i have been looking for an answer in the updateMgr class... but with no success... may be i overlooked sth?? any advice on this matter?
thanks in advance...
Yoris

[josch1710]

IMO, the problem here is that this plugin works under assumption, that you would need to load the components only once.
To get around this, you would have to extend this plugins, so that it would'nt unregister the loadOn-Handler.
Moreover, you would need to clean up the loaded components, otherwise they would be appended to the existing components.


Bye Jochen

[rjmijares]

Im using winzip 7 and error occurs when opening both versions. Do i have to use higher verion of winzip instead? I tried renaming it to winrar and successfully extracted a file "RemoteComponent" without extension. When I opened it on notepad, all I can see are ASCII codes. Is this plugin encrypted.

Sorry guys I'm just a newbie so please bare with me.

[Spiff1]

Im using winzip 7 and error occurs when opening both versions. Do i have to use higher verion of winzip instead? I tried renaming it to winrar and successfully extracted a file "RemoteComponent" without extension. When I opened it on notepad, all I can see are ASCII codes. Is this plugin encrypted.

Sorry guys I'm just a newbie so please bare with me.

Hi,

use this tool for unzipping: http://www.7-zip.org/
For editing use this: http://www.pspad.com/en/ or http://www.aptana.com/studio/download/ (http://www.aptana.com/)

BR
Spiff1

[dka]

Hi,

I found this component quite useful - Thanks!

But I was stumbling about the problem if I wanted to add more than one item to the items of the container. Natively it only worked with an additional panel around them.

However I changed the Ext.ux.Plugin.RemoteComponent.js to also allow to submit an array natively:


var callback = function(res){
var JSON = Ext.decode(res.responseText);

if (JSON.constructor == Array) {
for (i = 0; i < JSON.length; i++) {
if(this.fireEvent('beforecreate', JSON[i], this)){
var component = Ext.ComponentMgr.create(JSON[i], defaultType);
if(this.fireEvent('beforeadd', component, this)){
this.container.add(component);
if(this.fireEvent('beforecomponshow', component, this)){
component.show();
if(this.fireEvent('beforecontainshow', component, this)){
this.container.doLayout();
this.fireEvent('success', component, this);
}
}
}
}
}
} else {
if(this.fireEvent('beforecreate', JSON, this)){
var component = Ext.ComponentMgr.create(JSON, defaultType);
if(this.fireEvent('beforeadd', component, this)){
this.container.add(component);
if(this.fireEvent('beforecomponshow', component, this)){
component.show();
if(this.fireEvent('beforecontainshow', component, this)){
this.container.doLayout();
this.fireEvent('success', component, this);
}
}
}
}
}
this.purgeListeners();

};
Attached is the complete file that I've changed. I leave it up to you if you want to include it into the "distribution".

6756

[brookd]

Thats sweet! The ability to load an array of items is freakin awesome!

[Lucian]

In my RemoteComponent1.json I have this configuration:

{
xtype:'panel'
,border: false
,title: 'Panel Test'
,defaults:{bodyStyle:'padding:10px', autoScroll:true}
,height: 300
,header: true
,deferHeight : true
,listeners: {
render: function(){
alert('Component is rendered...');
}
}
}

After the component is successfully loaded, the listeners aren't there anymore, so the alert will never occur.

The plugin configuration is:

return new Ext.ux.Plugin.RemoteComponent({
url : remoteUrl
,purgeListeners: false
});

UPDATE:

Modifying the line var JSON = Ext.decode(res.responseText);
with var JSON = res.responseObject; seems to solve the problem, keeping the listeners object intact.

[.andy]

Hi All!
I am having difficulties with setting the values of the fields of the form after loading them remotely. I have been trying with no luck. Help would be appreciated..
I have the following code:

var getPanel = function(){
return new Ext.ux.Plugin.RemoteComponent({
url : 'getPanel.php'
});
};

My panel:

userPanel = new Ext.FormPanel({
id:'user-form',
bodyBorder:false,
border:false,
items: [{plugins: [getPanel()]}]
});

The items return back OK, but when I want to save my form and populate the fields with the values from the server, nothing happens.. :(
My save function is:

saveForm: function(){
userPanel.form.submit({
method : 'POST',
url : 'users.php',
params : {task : 'saveUser'},
success : function(f,a){
if (true !== a.result.success)
{
Ext.MessageBox.alert('Error','Error text!');
}else{
var data = a.result.data;

<!-- This is what does NOT work -->
userPanel.getForm().setValues(data);
},
errors : function(form, action) {
Ext.MessageBox.alert('Error','Error with server comm. text');
}
});

My JSON is returned correctly, because if I setup the form inline, then it populates it. Please help!

[holala]

Let me check,I hope it's I am looking for

[holala]

hi,I got a problem!

var getFormPanel = function(){
if(!formPanel){
formPanel = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 75,
url:'index.php',
defaultType: 'textfield',
items: [{
plugins: [getRemoteComponentPlugin()]
}]
});
}
}

ff throw a error:

this.container.add is not a function
http://localhost/test/ext2/RemoteComponent/Ext.ux.Plugin.RemoteComponent.js
Line 142

anybody can help me?
I want load form fields by json dynamically
could you please give me js code and json content?
urgent!

Thanks a lot!

[holala]

hi,
I had used tidal (http://extjs.com/forum/member.php?u=3243)'s plugins,the plugins name is Ext.ux.Plugin.RemoteComponent,I can load form elements by json,but when I check thire vaild,the form.isValid() is not working,I don't know why,I hope someone can help me! thanks!

JS CODE: Demo.js

Ext.onReady(function(){

Ext.QuickTips.init();
//Ext.form.Field.prototype.msgTarget = 'side';

var remoteUrl = 'item.php';
var tabId = 'tabpanel';
var tabIndex = 0;
var liteTab = false;
var deferedTab = false;
var mainPanel = false;

var getRemoteComponentPlugin = function(){
return new Ext.ux.Plugin.RemoteComponent({
url : remoteUrl
});
};
var items = {plugins: [getRemoteComponentPlugin()]};
var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form with FieldSets',
//bodyStyle:'padding:5px 5px 0',
width: 350,
items: items,
buttons: [{
text: 'Save',
handler: function() {
if (fsf.form.isValid()) {

} else {
Ext.MessageBox.alert('Error Message', 'Please fill the fields.');
}
}
},{
text: 'Cancel'
}]
});

fsf.render(document.body);
});
PHP CODE:item.php

<?php
$items = array(
'xtype'=>'fieldset',
'title'=>'Contact Info',
'collapsible'=>true,
'autoHeight'=>true,
'defaults'=>array('width'=>210,'height'=>22),
'defaultType'=>'textfield',
'items' =>array(
array('fieldLabel'=>'Home','name'=>'home','value'=>'(888) 555-1212','allowBlank'=>false),
array('fieldLabel'=>'Business','name'=>'business','allowBlank'=>false),
array('fieldLabel'=>'Mobile','name'=>'mobile','allowBlank'=>false),
array('fieldLabel'=>'Fax','name'=>'fax','allowBlank'=>false)
)
);
echo json_encode($items);
?>
Ext.ux.Plugin.RemoteComponent
7097

[Animal]

Hi,

I found this component quite useful - Thanks!

But I was stumbling about the problem if I wanted to add more than one item to the items of the container. Natively it only worked with an additional panel around them.

However I changed the Ext.ux.Plugin.RemoteComponent.js to also allow to submit an array natively:


var callback = function(res){
var JSON = Ext.decode(res.responseText);

if (JSON.constructor == Array) {
for (i = 0; i < JSON.length; i++) {
if(this.fireEvent('beforecreate', JSON[i], this)){
var component = Ext.ComponentMgr.create(JSON[i], defaultType);
if(this.fireEvent('beforeadd', component, this)){
this.container.add(component);
if(this.fireEvent('beforecomponshow', component, this)){
component.show();
if(this.fireEvent('beforecontainshow', component, this)){
this.container.doLayout();
this.fireEvent('success', component, this);
}
}
}
}
}
} else {
if(this.fireEvent('beforecreate', JSON, this)){
var component = Ext.ComponentMgr.create(JSON, defaultType);
if(this.fireEvent('beforeadd', component, this)){
this.container.add(component);
if(this.fireEvent('beforecomponshow', component, this)){
component.show();
if(this.fireEvent('beforecontainshow', component, this)){
this.container.doLayout();
this.fireEvent('success', component, this);
}
}
}
}
}
this.purgeListeners();

};
Attached is the complete file that I've changed. I leave it up to you if you want to include it into the "distribution".

6756

I'd strongly advise to call this.container.doLayout(); only once, at the end of that routine.

It is a heavyweight call!

[holala]

I'd strongly advise to call this.container.doLayout(); only once, at the end of that routine.

It is a heavyweight call!

Very thank you for your reply!

forgive me bad English.

I still don't understand where call this.container.doLayout();
is in Ext.ux.Plugin.RemoteComponent.js or in my code(Demo.js),I don't know, I am sorry I am so stupid.

I used the Attachment file,but still has problem.

Can you teach me how to do?

Thans you very very much!

[holala]

hi,
I had used tidal (http://extjs.com/forum/member.php?u=3243)'s plugins,the plugins name is Ext.ux.Plugin.RemoteComponent,I can load form elements by json,everything is OK,but when I click the SAVE button,the form.isValid() is not working,I don't know why,I hope someone can help me! thanks!

see my code
PLEASE HELP!

JS CODE: Demo.js

Ext.onReady(function(){

Ext.QuickTips.init();
//Ext.form.Field.prototype.msgTarget = 'side';

var remoteUrl = 'item.php';
var tabId = 'tabpanel';
var tabIndex = 0;
var liteTab = false;
var deferedTab = false;
var mainPanel = false;

var getRemoteComponentPlugin = function(){
return new Ext.ux.Plugin.RemoteComponent({
url : remoteUrl
});
};
var items = {plugins: [getRemoteComponentPlugin()]};
var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form with FieldSets',
//bodyStyle:'padding:5px 5px 0',
width: 350,
items: items,
buttons: [{
text: 'Save',
handler: function() {
if (fsf.form.isValid()) {

} else {
Ext.MessageBox.alert('Error Message', 'Please fill the fields.');
}
}
},{
text: 'Cancel'
}]
});

fsf.render(document.body);
});
PHP CODE:item.php

<?php
$items = array(
'xtype'=>'fieldset',
'title'=>'Contact Info',
'collapsible'=>true,
'autoHeight'=>true,
'defaults'=>array('width'=>210,'height'=>22),
'defaultType'=>'textfield',
'items' =>array(
array('fieldLabel'=>'Home','name'=>'home','value'=>'(888) 555-1212','allowBlank'=>false),
array('fieldLabel'=>'Business','name'=>'business','allowBlank'=>false),
array('fieldLabel'=>'Mobile','name'=>'mobile','allowBlank'=>false),
array('fieldLabel'=>'Fax','name'=>'fax','allowBlank'=>false)
)
);
echo json_encode($items);
?>
Ext.ux.Plugin.RemoteComponent
7097

[holala]

Please help!

http://www.comegogo.com/ext2/rc/demo.html

see my demo.

this form panel have 2 fieldsets,the first one got components from json,the seconds is code in Demo.js,all textfields set allowBlank is false(js and json is same set),but when you click save button,only the secends fieldsets has been check is valid,the first one no responds,Why the components by json data don't be check isvalid? I don't know how to solve this problem,Please help!

Thank you very much!

[hendricd]

@holala -- Posts moved here for input. But,

I don't believe you are using the plugin properly. See amendments below:


Ext.onReady(function(){

Ext.QuickTips.init();
//Ext.form.Field.prototype.msgTarget = 'side';

var remoteUrl = 'item.php';
var tabId = 'tabpanel';
var tabIndex = 0;
var liteTab = false;
var deferedTab = false;
var mainPanel = false;

var getRemoteComponentPlugin = function(){
return new Ext.ux.Plugin.RemoteComponent({
url : remoteUrl
});
};
var items = {plugins: [getRemoteComponentPlugin()]};
var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form with FieldSets',
//bodyStyle:'padding:5px 5px 0',
width: 350,
plugins: [getRemoteComponentPlugin()],
items: items, //items are provided LATER by the plugin....
buttons: [{
text: 'Save',
handler: function() {
if (fsf.form.isValid()) {

} else {
Ext.MessageBox.alert('Error Message', 'Please fill the fields.');
}
}
},{
text: 'Cancel'
}]
});

fsf.render(document.body);
});

[holala]

Please DO NOT MOVE my post,ok?
no body in this section and my post never be found,I want somebody help me solve this probelm,so,don't move my post!

[hendricd]

@holala -- I ( a moderator) moved your post so that:

a) I could offer assistance with your problem, (did you see the response ?)
b) others familiar with RemoteComponent could also offer assistance.
c) others may search/find solutions (in context) in the future.

[holala]

plugins: [getRemoteComponentPlugin()],
items: items, //items are provided LATER by the plugin....


Thank you for your help,I tried to changed the code like the quote code,but ff shows two errors and the form can not show,the following errors is :
1.this.items has no properties
2.this.layout.layout is not a function

I tried to change to items:{plugins: [getRemoteComponentPlugin()]},
no error occur,but isvalid() still not working.

Please take a look,Thanks a lot!

PS:I search this forum two whole days,but I still don't found out any good solution,so I post this subject again and again,I realy hope someone can help me solve this trouble.Thanks again!

[mjlecomte]

Hello,

I am trying to run the ManagedIframe examples located at http://extjs.com/forum/showthread.php?p=152139#post152139

i Extracted the demoPack.zip directly into a existing: /examples/miframe directory of my standard 2.x Ext.distribution but when i load the examples in my browser nothing happens. For example, if i load "iframesdemo.html" it just show this message "Ext.ux.ManagedIframePanel" nad nothing else. I can not see any tab or working example. Any idea??

egards

What does that have to do with this thread?

[hoggy]

I'm using a card layout with 2 panels, each using the RemoteComponent to get their content. (one contains a grid, another contains a form). My tree nodes switch the card layout's activeitem.

...a fairly typical "explorer" style application, but using RemoteComponent to dynamically generate the required grid or form in the card.

My question is this - how should I force the card to reload its contents from RemoteComponent with a different URL?

Any help is much appreciated....

[zombeerose]

@tidal - I have been using your fantastic plugin to lazy-load for several months now with no complaints what-so-ever! Great job!!!

However, today, I came across a situation where my remote url actually constructs and returns the component rather than returning a config object. I have to create the object early so that it can be referenced by other functions throughout the remote code.

I was able to tweak your code to check if the returned JSON was already a component and if so, avoid creating it. I chose this approach instead of returning my remote component within a config object of a wrapper panel. Maybe "nesting" would be better and I'm open to discussion/suggestions.

Anyways, I thought I would share the change and hope that you don't find a voodoo doll with my name on it. ;)


var component = (JSON.isXType && JSON.isXType('component')) ? JSON : Ext.ComponentMgr.create(JSON, defaultType);

//replaced line:
//var component = Ext.ComponentMgr.create(JSON, defaultType);

[tidal]

Hi Guys!

Sorry, for not answering your questions and putting
out a new version the last months.
And sorry for not having the demo (http://demo.matikom.de/ext/remotecomponent/Ext.ux.Plugin.RemoteComponent.html#demo) up for a while.
(you don

[jerzypuc]

tidal,
This is fantastic piece! I really love it!

I found something I do not know how to do. :-/

It shows this same way in your demo... and I don't think it is as intended.... :-?

Let say we have script1 (which is window) calling in your plugin script2 (which is tabpanel) calling script3 (which is content of the openned tab)

Everything works fine each script is executed as intended. (But probably not rendered as intended or again it is my misunderstanding :"> )

Now if you take look into tabs the content of has greater height than expected. (in your demo too, there is nothing beeing in the bottom of any tab but abs are scrolled). If you have no elements there - like in your example it is enough to make tabpanel autoScroll : false. Otherwise if you have for example bbar element - which is on the bottom by default you have to scroll to it all the time.

Now there is something I discovered. If you have all of this in resizable window, after resize it is rendered correctly.

I would appreciate any solution to this problem or any direction how to attack this problem.
I can craft small demo if needed.


Once again thank you for the plugin.

Jerzy Puchala

[tidal]

Hi Jerzy!

Let

[jerzypuc]

Hi,

My apologies. :"> The problem is in Desktop way of creating window (I do not know where yet) after I made just the window by hand and insert my content it works fine.

Thanks for puting me on right track.

[tidal]

Never mind ! :)

I should have mentioned, that the demo is light-years away from
being any reference oder demo for a good ExtJS Layout or
or how to set up the remote configuration in a right way.
There are better sources for that out there.

It

[vinnybozz]

Newbie help !

What is the correct way to add a loading message, I understand the principle(I think) but can't get it to work.
This is what I have so far:


var loadingIndicator = '<div class="loading-indicator">Loading...</div>';

var plugin = new Ext.ux.Plugin.RemoteComponent({
url : 'url/to/remote/source.json'
});

plugin.on('beforeload',function() { /* add mask */ ) });
plugin.on('success',function() { /* destroy mask */ });

var container = new Ext.TabPanel({
title : 'give me a name',
plugins: plugin
});
Any help would be greatly appreciated.
Thx

[tidal]

Hi!

Something like this should work:
var plugin = new Ext.ux.Plugin.RemoteComponent({
url : 'url/to/remote/source.json'
});

plugin.on('beforeload', function(conf, plug){
var mask = new Ext.LoadMask(plug.container.getEl(), {msg:'loading components...'});
plugin.on('success', mask.hide, mask);
mask.show();
});

var container = new Ext.TabPanel({
title : 'give me a name',
plugins: plugin
});


But keep in mind, that the container must be allready rendered for this to work.

[vinnybozz]

Thx for the help and the plugin :)

[tidal]

Hi!

I managed to finish the 0.3.0 version of Ext.ux.Plugin.RemoteComponent yesterday!
It has some additional features and fixes.
Next Version 1.0.0 will then introduce a lot more config options and an RemoteComponentManager to be more effective.

changelog:

* v 0.3.0 / Aug. 01 2008

* Plugin now 'really' extends Ext.util.Observable by calling superclass constructor.
Thanks to evilkate.
* Plugin now supports loading of arrays of component configurations
Thanks to dka.
* added config option 'mask' to mask an Element while loading
* added config option 'maskConfig' to pass configuration to loadMask
* changed config option 'purgeListeners' to 'purgeSubscribers' to avoid overwriting it's purgeListeners method
* changed config option 'loadOn' to additionally accept object literal configuration in {event: 'event', scope: 'scope'} style to listen for a different components (not the container) event. Also accepts event or object configuration as numeric array to listen to multiple events or components.Plugin will load by the first occurence of any of these events if 'purgeSubscribers' is not set to false.

The demo (http://demo.matikom.de/ext/remotecomponent/Ext.ux.Plugin.RemoteComponent.html) has been updated to show the new features. Take a look at the new buttons 'array' and 'mixed'.
Especially 'mixed' shows how to load destroy and reload FormFields by an independent trigger.

More Infos and Examples how to use the new features will follow soon.

Till then...

Have fun...

Timo

[jerzypuc]

All,

How to load the content of toolbar/statusbar? Toolbar and statusbar are not Containers, so I have nice error in the line calling doLayout() on container.

It does add elements into the **bar, I can see them. The only problem is that Panel containing the **bar in bbar part has to be re-rendered. This fails.

Any help will be appreciated

Thanks in advance

Jerzy

[tidal]

Ah ja, Jerzy,

you remember me, why I had a 'doLayoutOn' config option
in an earlier Test-Version of the Plugin.
I

[jerzypuc]

Hi again,

I think I understand what happens. I still can't find how to solve the problem. :-/

In version 0.2.1
If you have Toolbar and you add plugin into it which calls source with list of the elements than code breaks in

if(this.fireEvent('beforecomponshow', component, this)){
component.show();
if(this.fireEvent('beforecontainshow', component, this)){
this.container.doLayout(); // this line throws an error
this.fireEvent('success', component, this);
}
}


This is because this is the toolbar. It is not a container.
As suggested I did overwrite beforecontainshow like such:

plugin.on('beforecontainshow', function(cmp){
this.container.ownerCt.ownerCt.doLayout();

//this won?t be necessary in next version.
// It?s to hide the loadMask
plugin.fireEvent('success');

return false;
});

I can't use cmp as suggested because line

if(this.fireEvent('beforeadd', component, this)){
this.container.add(component);
if(this.fireEvent('beforecomponshow', component, this)){
component.show();


does not do real Container add. This means that component will still have ownerCt undefined (which is consistent with documentation)
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.


Unfortuanetly this does not fixes the lyaout of the page.

Now with the version 0.30


} else {
component = renderComponent(JSON).show(); // this line returns undefined
}
if(this.fireEvent('beforecontainshow', component, this)){
this.container.doLayout();
this.fireEvent('success', component, this);
}


The red line returns undefined from here

if(this.fireEvent('beforeadd', JSON, this)){
//this.container.initComponent();
component = this.container.add(JSON);
if(this.fireEvent('beforecomponshow', component, this)){
return component;
}
}


because red line does not really add the JSON to the container (becuse it is not a container).

So we return to square 1.

Summary.
Because Toolbar is not a container components added into it do not have ownetCt property and Container which contains Toolbar does not layout the elements (so it renders toolbar empty on the beggining and after we add elements to the Toolbar, Toolbar size changes. This makes Panel containing the Toolbar inside bbar to add scrollbar to accomodate the changes.) Effect is that the very top pixes of toolbar is visible, but rest of is is accessable after scrolling. This is fixed immidietly after resize of the panel.

Question is: Am I doomed untill Toolbar will extend Container? :((

Jerzy




[QUOTE=tidal;204417]Ah ja, Jerzy,

you remember me, why I had a 'doLayoutOn' config option
in an earlier Test-Version of the Plugin.
I

[tidal]

Hi Jerzy!

I didn

[jerzypuc]

As far as I can find in this forum it should be in Extjs3.0

Jerzy

[QUOTE=tidal;206787]Hi Jerzy!

I didn

[mnask79]

hi guys ,
i feel shy ,coz really i don't know why i don't understand exactly what this plugin for :">

in my case i have big application and all JavaScript in one file and i want my application to be faster coz my js file size is 400 k its take long time to load it , and in my application when i open any Extjs window and in my application the memory usage increase and if i close the same Extjs window the memory usage dose not decrease so my application become so slow , u can see this via (Windows Task Manager).


the following is sample script for a form in my js file



Ext.ebx.changTimeForm = function() {

var submitTimeFormOnce = 0 ;
Ext.main.time = [
['5', '5 mins'],
['10', '10 mins'],
['15', '15 mins'],
['20', '20 mins'],
['25', '25 mins'],
['30', '30 mins'],
['35', '35 mins'],
['40', '40 mins'],
['45', '45 mins']
];

var timeDs = new Ext.data.SimpleStore({
fields: ['actId', 'action'],
data :Ext.main.time
});

var combo_time = new Ext.form.ComboBox({
id:'time_combo',
editable:false,
store:timeDs,
displayField:'action',
hiddenName:'action',
valueField:'actId',
name:'timeout',
mode: 'local',
hideLabel:true,
selectOnFocus:true,
triggerAction: 'all',
width:100,
autoHeight : true ,
forceSelection:true
});

var timeFormBtn = new Ext.Button({
handler:dosubmit,
scope: this,
text:'Submit'
});

var timeFormCnclBtn = new Ext.Button({
text:'Cancel',
handler: function() {
Ext.getCmp('time-wind').close();
}
});

Ext.ebx.changTimeForm.superclass.constructor.call(this,{
id:'frm_time',
vLabelWidth:0,
labelWidth: 100,
url:'url.php',
defaultType: 'textfield',
waitMsgTarget: true,

keys: [{
key: Ext.EventObject.ENTER,
scope: this,
fn: dosubmit
}, {
key:116,
scope:this,
fn:function(){return false; console.log('F5 Pressd'); return false;}
}],
buttons: [timeFormBtn,timeFormCnclBtn],
items: [ombo_time]
});


}

Ext.extend(Ext.ebx.changTimeForm,Ext.FormPanel);

var timeWindFun = function () {
var timeWind = new Ext.Window({
id:'time-wind',
title: lang.SET_NTIME,
layout:'fit',
width:300,
height:200,
plain: true,
modal: true ,
resizable : false ,
buttonAlign :'center',
constrain :true,
items: [new Ext.ebx.changTimeForm]
});


}



so how i can make my application faster , and i wont it get slow when i open and close the Extjs windows

i hope u got me guys

regards

[zombeerose]

Great work as always - one thing I stumbled across today...


var renderComponent = function(JSON){
if(this.fireEvent('beforeadd', JSON, this)){
//this.container.initComponent();
var component = this.container.add(JSON);
if(this.fireEvent('beforecomponshow', component, this)){
return component;
}
}
}.createDelegate(this);
var was missing and creating the component in the global space. I had to ask myself, "what did I do wrong now?" ;)

[tidal]

@zombeerose:

Thx, I allready have seen this missing var. ;)
My mistake, it will be fixed in next version.
(Sorry, don

[mnask79]

Dear Tilda ,
Really thanks about your answer, i thought nobody gonna answer me :).

"for example) could write a little extension to Ext.FormPanel which fits all
your needs regarding forms - This can be a FormPanel with a submit functionality
(and maybe some other not to specific ones). Then you can put all the behavior and
layout on the config level"

could u give me an example plz ?
and please ,what i can do about the memory ?

thanks alot dear Tilda , i hope for u the best
regards

[Andrewd2]

i use only Ext.ux.Plugin.LiteRemoteComponent
for more functionality change this line:

Ext.ux.Plugin.LiteRemoteComponent = function (config){
...
this.container.add(Ext.ComponentMgr.create(Ext.decode(res.responseText), defaultType)).show();
...
};


to:

Ext.ux.Plugin.LiteRemoteComponent = function (config){
...
this.container.add(Ext.ComponentMgr.create(Ext.applyIf(Ext.decode(res.responseText),(this.container.defaults?this.container.defaults:{})), defaultType)).show();
...
};

[accilies]

Hello hendricd,

Can we consider this case

var x = new Ext.form.FormPanel({
items : {
xtype : 'fieldset',
plugins: new Ext.ux.Plugin.RemoteComponent({
url: '/index.php/DataService/Type,getReportsConfigurations/recordID,0/Remote,true/FormId,21',
loadOn: 'disable',
mask: Ext.get(document.body),
maskConfig: {
msg: 'remoting...'
}
})
},
{
// buttons config comes here
}
});


In this case too the validation fails. Yes, in the code for the plugin, i saw

var renderComponent = function(JSON){
if(this.fireEvent('beforeadd', JSON, this)){
//this.container.initComponent();
component = this.container.add(JSON);
if(this.fireEvent('beforecomponshow', component, this)){
return component;
}
}
}.createDelegate(this);


2 questions.

1. When i do a lazy loading of the component by calling the load() method on some buttons AFTER the form object is initialized, the validation of the fields we get from remote component fails.
2. I am not sure of this one but need to know... When we do loading on formobject create, the new components from the remote json will be added to the fieldset as it is the container. Then in that case, again validations should fail?


@holala -- Posts moved here for input. But,

I don't believe you are using the plugin properly. See amendments below:


Ext.onReady(function(){

Ext.QuickTips.init();
//Ext.form.Field.prototype.msgTarget = 'side';

var remoteUrl = 'item.php';
var tabId = 'tabpanel';
var tabIndex = 0;
var liteTab = false;
var deferedTab = false;
var mainPanel = false;

var getRemoteComponentPlugin = function(){
return new Ext.ux.Plugin.RemoteComponent({
url : remoteUrl
});
};
var items = {plugins: [getRemoteComponentPlugin()]};
var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form with FieldSets',
//bodyStyle:'padding:5px 5px 0',
width: 350,
plugins: [getRemoteComponentPlugin()],
items: items, //items are provided LATER by the plugin....
buttons: [{
text: 'Save',
handler: function() {
if (fsf.form.isValid()) {

} else {
Ext.MessageBox.alert('Error Message', 'Please fill the fields.');
}
}
},{
text: 'Cancel'
}]
});

fsf.render(document.body);
});

[accilies]

Hello Everyone,

This is a bug and to solve this i added the onAdd method (below) at the top of the plugin code as mentioned by Saki @ http://extjs.com/forum/showthread.php?p=224355#post224355

Ext.override(Ext.form.FormPanel, {
add:function(comp) {
var c = Ext.form.FormPanel.superclass.add.apply(this, arguments);
if(c && true !== c.isFormField) {
c.on('add', this.onAdd, this);
}
}
});

Now the problem is that once it is added tothe FORM, and you say change the URL of the component call the LOAD (i have modified the plug-in to take new URL with the load function) i have to destroy/remove the fields and then call the remote component plugin. However, when you destroy/remove the fields from the fieldset, it is not removed the FORM object which was added in the onAdd method. The below code is not the perfect solution but it worked for me for now.


var x = new Ext.form.FormPanel({
items: {
id: 'FieldsetName',
xtype: 'fieldset',
title: 'Set report paramerters',
autoHeight: true,
autoWidth: true,
plugins: new Ext.ux.Plugin.RemoteComponent({
url: '/index.php/dummyLoader',
loadOn: 'disable', // I did not wanted to load. So just because this component is never disabled so i used this.
mask: Ext.get(document.body),
maskConfig: {
msg: 'remoting...'
}
}),

onAdd: function(index, c, key){
if (c.isFormField) {
var form = this.findParentByType('form');
if (form)
form.onAdd(index, c, key);
}
},
onRemove: function(c){

if (c.isFormField) {
var form = this.findParentByType('form');
if (form)
form.onRemove(c);
}
}
},
buttons: {
text: 'reload field set',
handler: function(){
var FieldsetName = Ext.getCmp('FieldsetName');
FieldsetName.items.each(function(item){
Ext.destroy(item.container.up('.x-form-item'));
this.onRemove(item)
this.remove(item, true);
}, FieldsetName);
FieldsetName.plugins.load('/index.php/Loader/' + dynamicPartOfMYURL);
},
scope: this
}
})

Hello hendricd,

Can we consider this case

var x = new Ext.form.FormPanel({
items : {
xtype : 'fieldset',
plugins: new Ext.ux.Plugin.RemoteComponent({
url: '/index.php/Old/',
loadOn: 'disable',
mask: Ext.get(document.body),
maskConfig: {
msg: 'remoting...'
}
})
},
{
// buttons config comes here
}
});
In this case too the validation fails. Yes, in the code for the plugin, i saw

var renderComponent = function(JSON){
if(this.fireEvent('beforeadd', JSON, this)){
//this.container.initComponent();
component = this.container.add(JSON);
if(this.fireEvent('beforecomponshow', component, this)){
return component;
}
}
}.createDelegate(this);
2 questions.

1. When i do a lazy loading of the component by calling the load() method on some buttons AFTER the form object is initialized, the validation of the fields we get from remote component fails.
2. I am not sure of this one but need to know... When we do loading on formobject create, the new components from the remote json will be added to the fieldset as it is the container. Then in that case, again validations should fail?

[Remy]

Is it possible to use this extension to retrieve a dynamically created menu config and add it to a toolbar? I'm not sure if the menu class has an xtype?

I have tried to to do this with a very simple menu config which only contains a text element but I get 'this.container.add is not a function'. Does this mean that the Toolbar cannot be added to using the extension as a plugin?

Here's what I've got:

Ext.QuickTips.init();

var getRemoteComponentPlugin = function(){
return new Ext.ux.Plugin.RemoteComponent({
url : './ext/ux/data.asp',
mask: 'content',
maskConfig: {
msg: 'remoting...'
}
});
};

var viewport = new Ext.Viewport({
id: 'appViewPort',
layout: 'border',
border: false,
items: [{
region: 'north',
height: 48,
border: false,
collapsible: false,
tbar: ["First row:",{
text:"Button 1"
},'-',{
text:"Button 2"
}],
items: [
new Ext.Toolbar({
items:[{
plugins: [getRemoteComponentPlugin()]
}],
})
]
}, rest of viewport left out for brevity.

My remoteconfig (data.asp) returns the following:

{
id: 'mainMenu',
xtype:'menu',
items: [{
text: 'Menu Text'
}]
}

I was hoping I would be able to build a dynamic menu as an introduction before trying more advanced uses.

Any help is welcome
Remy

[Remy]

Ok, got my dynamic menu built outwith using the RemoteComponent. After some digging around I found a fairly simple way to do this and return the JSON config from the server. All working. Will still want to use the remoteComponent for other things like generating grids from the menuItems. Can the remoteComponent dynamically replace and existing grid with a new one rather than just adding one?

[mjlecomte]

Basically sounds like you just need to use grid.reconfigure(). You can send the params for reconfigure through an ajax call. Ext already provides some handling for this if you use metaData as described in json reader in API. If you want to extend that concept further you may want to reference something like the autogrid extension.

[Dave.Sanders]

Hey there, I had the need where I wanted my handler page to be able to spit back both a component to go into the area, AND some data that would be used on the client side. I've tailored my version to add this very simple conduit to bring data back. You just need to send out a JSON object with a property called "objtype" set to "data". Here is the changed callback function.

var callback = function(res){
var JSON = Ext.decode(res.responseText);

if(this.fireEvent('beforecreate', JSON, this)){
var data = new Array();
var component = null;
//JSON = JSON instanceof Array ? JSON[0] : JSON;
if(JSON instanceof Array){
Ext.each(JSON, function(j, i){
if (j.objtype && j.objtype == "data"){
data[data.length] = j;
}
else {
component = renderComponent(j).show();
}
});
}else{
if (JSON.objtype && JSON.objtype == "data"){
data[data.length] = JSON;
}
else {
component = renderComponent(JSON).show();
}
}
this.data = data;
if(component != null)
{
if(this.fireEvent('beforecontainshow', component, this)){
this.container.doLayout();
this.fireEvent('success', component, this);
}
}

}
if(this.purgeSubscribers){
this.purgeListeners();
}
}.createDelegate(this);

Then, when you want the data in your other code, just go to:

myObject.plugins.data

to find your data.

Simple solution, but maybe useful to someone and maybe it can be worked in in a more permanent way somewhere.

[garraS]

Hi, I can't make it work with a Grid using JsonStore, it's never shows the data in the grid.

Here's my code:

(function(){

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="coalor:red;">' + val + '%</span>';
}
return val;
}

var urlConexion = 'modulos/noticias/json.json';

// create the data store
var store = new Ext.data.Store({
url: urlConexion,
autoLoad: true,
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
// store.loadData(myData);

// create the Grid
var grid = new Ext.grid.GridPanel({
xtype: 'grid',
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
border: false,
autoExpandColumn: 'company'
});

grid.show();

return grid;
})()
And json.json:

({"company": "3m Co","price": 71.72,"change": 0.02,"pctChange": 0.03,"lastChange": "9/1 12:00am"},{"company": "3m Co2","price": 73.72,"change": 0.05,"pctChange": 0.01,"lastChange": "9/1 12:00am"})
Any ideas?

[Remy]

Basically sounds like you just need to use grid.reconfigure(). You can send the params for reconfigure through an ajax call. Ext already provides some handling for this if you use metaData as described in json reader in API. If you want to extend that concept further you may want to reference something like the autogrid extension.

Thanks, I'll look into that but I also want to use it to create other items and not only Grids, I'm looking to use it to create Forms and Calendar panels. I want to re-use my centre region contextually with whatever is selected from the menu system. Grid row select and load a form etc., The app has around 100 uses for the grid so re-using space is important and of course avoiding memory leaks so I need to be sure that previous instances are completely destroyed or re-used.

[Remy]

GarraS, you check your JSON using http://www.jsonlint.com/

Also, use Firefox and firebug to see what errors you are receiving.

I ran your JSON through and have reformatted to valid
[
{
"company": "3m Co",
"price": 71.72,
"change": 0.02,
"pctChange": 0.03,
"lastChange": "9/1 12:00am"
},
{
"company": "3m Co2",
"price": 73.72,
"change": 0.05,
"pctChange": 0.01,
"lastChange": "9/1 12:00am"
}
] Note the change of brackets at beginning and end from () to []

[garraS]

Perfect! Thanks!

[Dave.Sanders]

You tell me. :) I'd like to hear feedback about whether this is a good / bad idea or whether there are better ways to do this.

I've updated the callback function to be able to take a new object type (see my thread above about the data object type) called script. This object then directs the plugin on how to handle and add in scripts you pass down.

So, you would use this objtype to say: "Include the referenced JS file that I give you the url for." or "Include (and run) this block of script." Finally, you can tell it to remove a previously included script.

Here is some sample JSON that it can accept:


{objtype:'script',src:'js/test.js',id:'testscript'}
{objtype:'script',id:'testscript', remove:true}
{objtype:'script',id:'testscript2', content:'testAlert(\"booga\");'}


The first line would include the script via url, the second would remove it, and the third is a javascript block that is included and runs.

UPDATE: I've fixed one bug where it would break if you tried to add the same script id twice in a row, and fixed IE7/IE8 support - but I still can't get it working right in Chrome. (it doesn't seem to be able to add the remote script reference to the Head tag.) I'm hoping by posting this someone who knows a lot more about these browsers can point out how to change the lines where I'm appending it to the dom.

Thanks

var callback = function(res){
var JSON = Ext.decode(res.responseText);

if(this.fireEvent('beforecreate', JSON, this)){
var data = new Array();
var script = new Array();
var component = null;
//JSON = JSON instanceof Array ? JSON[0] : JSON;
if(JSON instanceof Array){
Ext.each(JSON, function(j, i){
if (j.objtype && j.objtype == "data"){
data[data.length] = j;
}
else if(j.objtype && j.objtype == "script"){
script[script.length] = j;
}
else {
component = renderComponent(j).show();
}
});
}else{
if (JSON.objtype && JSON.objtype == "data"){
data[data.length] = JSON;
}
else if(j.objtype && j.objtype == "script"){
script[script.length] = JSON;
}
else {
component = renderComponent(JSON).show();
}
}
this.data = data;
this.script = script;
success = false;
if(component != null){
if(this.fireEvent('beforecontainshow', component, this)){
this.container.doLayout();
success = true;
}
}
if (this.script.length > 0) {
for (var x=0; x<this.script.length; x++){
if (this.script[x].remove == true) {
var el = Ext.get(this.script[x].id);
if (el) {el.remove();}
} else if (this.script[x].src) {
var el = Ext.get(this.script[x].id);
if (el) {el.remove();}
var e = document.createElement("script");
e.id = this.script[x].id;
e.src = this.script[x].src;
e.type="text/javascript";
//TODO:this is not working in chrome yet.
document.getElementsByTagName("head")[0].appendChild(e);
} else if (this.script[x].content) {
var el = Ext.get(this.script[x].id);
if (el) {el.remove();}
var e = document.createElement("script");
e.id = this.script[x].id;
e.type="text/javascript";
e.text = this.script[x].content;
document.getElementsByTagName("head")[0].appendChild(e);
}
}
success = true;
}

if (this.data.length > 0) {success = true;}

if (success) {this.fireEvent('success', component, this);}

}
if(this.purgeSubscribers){
this.purgeListeners();
}
}.createDelegate(this);

[Remy]

Ok, simple question.

I have a menu which upon selection of an item it should populate my "center" in the viewport with a grid. I can successfully retrieve retrieve a statusbar and menu but am not getting any errors when trying to add a GridPanel?

Here's the code:
Ext.onReady(function() {

Ext.QuickTips.init();

var sbPlugin = new Ext.ux.Plugin.RemoteComponent({
url : 'ajax/StatusBar.asp'
});

var menuPlugin = new Ext.ux.Plugin.RemoteComponent({
url : 'ajax/Menu.asp'
});

var gridPlugin = new Ext.ux.Plugin.RemoteComponent({
url : 'ajax/grid.asp'
});

var defaultsPlugin = new Ext.ux.Plugin.RemoteComponent({
url : 'ajax/adddefaults.asp'
});

var viewport = new Ext.Viewport({
id: 'appViewPort',
layout: 'border',
border: false,
items: [{
region: 'north',
id: 'dashboard',
height: 48,
border: false,
collapsible: false,
plugins: [menuPlugin, defaultsPlugin]
},

{
region: 'south',
id: 'statusbar',
height: 24,
border: false,
collapsible: false,
plugins: sbPlugin
},
EAST panel removed for brevity
{
region: 'center',
id: 'mainPanel',
layout: 'fit',
border: false,
items: [{
title:'MainPanel',
plugins: [gridPlugin]
}]

}]
});
});

The JSON returned is:
[{xtype: 'grid', title:'MainPanel',columns:[{id:'br_id', header:'ID',width:'10',sortable: 'true', dataIndex:'br_id'

},{header:'Branch',width:'100',sortable: 'true', dataIndex:'br_desc'}],store:[{'br_id':'1','br_desc'

:'Test'}]}]The Panel title displays but the grid doesn't? I suspect I have an incomplete Grid config as I have only entered the minimum details to try to get it working before full-on coding.

Any help is gratefully received,
Remy

[Remy]

Seems I should have used SimpleStore in the above example but even then it fails. If somone could show me an example of retrieving a grid with either store or simplestore I would be very grateful.

[mjlecomte]

I'm not using this specific plugin at the moment, but you might be able to refer to another thread for insight:http://extjs.com/forum/showthread.php?p=238189#post238189
There's also a remoteload directory in the examples that you might want to consult.

[Remy]

Thanks mjlecomte, I'm learning a lot by trial and error, unless I start using the tools I don't learn or retain the info learned. The API docs are good but when you're not sure where to look or there are no definite examples its pretty tricky. But I have to say, I haven't enjoyed building web apps for years and Ext has vanquished the boredom, I can hardly put it down.

I will read through that thread and get to where I need to be, thanks for the pointer.

[Remy]

Well, I've progressed in that I can create and destroy grids and dynamically create the columns but I can't seem to get any data returned. The JSON is being retrieved from the server, the JSON is in a valid format according to JSONlint.com but the data is never rendered. I think I may have a problem with:

a) the data format being returned
b) the order/latency of data retreival and unfamiliarity with the events model
c) a config option although I can't see that

I'm a bit stuck and have laid out my code as is, if anyone can see where I'm going wrong I'd be very grateful.

Included js file:
Ext.onReady(function() {

Ext.QuickTips.init();

var sbPlugin = new Ext.ux.Plugin.RemoteComponent({
url : 'ajax/StatusBar.asp'
});

var menuPlugin = new Ext.ux.Plugin.RemoteComponent({
url : 'ajax/Menu.asp'
});

var defaultsPlugin = new Ext.ux.Plugin.RemoteComponent({
url : 'ajax/adddefaults.asp'
});

var viewport = new Ext.Viewport({
id: 'appViewPort',
layout: 'border',
border: false,
items: [{
region: 'north',
id: 'dashboard',
height: 48,
border: false,
collapsible: false,
plugins: [menuPlugin, defaultsPlugin]
},

{
region: 'south',
id: 'statusbar',
height: 24,
border: false,
collapsible: false,
plugins: sbPlugin
},
{
region: 'center',
id: 'mainPanel',
layout: 'fit',
border: false
}]
});
}); // eo function onReady

function menuClickHandler(item){


//Ext.getCmp('gridTable').destroy();
Ext.getCmp('mainPanel').remove('gridPanel');
createGrid(item);
Ext.getCmp('mainPanel').doLayout();

}

function createGrid(item){
return Ext.getCmp('mainPanel').add({
title: item.title,
id: 'gridPanel',
plugins: new Ext.ux.Plugin.RemoteComponent({
url : 'ajax/grid.asp',
params: {table:item.id}
}),
autoShow: true
}
);
}

The menuClickHandler passes a dataview name which in turn determines the data retrieved from the server.

Grid.asp returns:
[{xtype: 'grid', id: 'gridTable', height:'300', autoShow: 'true', title:'pa_sites',columns:[{id:'si_id'

, header:'si_id',sortable: 'true', dataIndex:'si_id'},{id:'si_nhid', header:'si_nhid',sortable: 'true'

, dataIndex:'si_nhid'},{id:'si_address1', header:'si_address1',sortable: 'true', dataIndex:'si_address1'

},{id:'si_address3', header:'si_address3',sortable: 'true', dataIndex:'si_address3'},{id:'si_postcode'

, header:'si_postcode',sortable: 'true', dataIndex:'si_postcode'},{id:'si_fax', header:'si_fax',sortable

: 'true', dataIndex:'si_fax'},{id:'si_info', header:'si_info',sortable: 'true', dataIndex:'si_info'}

],store: new Ext.data.Store({url: 'ajax/tabledata.asp', storeId: 'myStore', reader: new Ext.data.JsonReader

({},['si_id','si_nhid','si_address1','si_address3','si_postcode','si_fax','si_info']), autoLoad: 'true'

, remoteSort: 'true',baseParams: {table: 'pa_sites'}}),bbar: new Ext.PagingToolbar({store: Ext.StoreMgr

.lookup('myStore')})}]
This successfully creates a gridPanel which is visible in the DOM but the problem seems to lie somewhere with my store/reader/data rendering.

TableData.asp returns (data modified for privacy reasons - any typos are due to this edit):
[{'si_id':'0','si_nhid':'4','si_address1':'XXXXXX','si_address3':'','si_postcode':'A1 1AA'

,'si_fax':'9999 9999','si_info':''},{'si_id':'1','si_nhid':'8','si_address1':'XXXXX','si_address3'

:'','si_postcode':'A1 1AA','si_fax':'999 9999','si_info':''}]

I know this is a big post for someone to have a look at but I've been trying to sort this for 2 very long days now and would really appreciate some assistance.

thanks in advance,
Remy

[hendricd]

Some things to try:

The boolean values in your JSON response should not be quoted ( ' true' ).
You are (trying to anyway) autoLoad the store, which likely returns results before the grid is rendered, so the grid is missing all the store callbacks to show you anything. Defer you initial store load until the 'render' event of the gridPanel.

[Remy]

Thanks hendricd, I have changed to the boolean to be outwith quotes but that would have applied to autoLoad:'true' also, it did however accept these with the quotes but that's not really relevant. I have removed the autoLoad config item and the data indeed is not returned but I am struggling to see where I can place a store.load call in my scripts. I tried to use Ext.getCmp() to get 'gridTable' - not found and tried to use Ext.StoreMgr.lookup('myStore') and this is also not found. Both of these attempts were made within the menuClickHandler after the createGrid line?

[mjlecomte]

I'd be careful you don't have an asynchronous response issue affecting what you just said.

Also use caution with what doug said as well. In theory, I think you are supposed to send back boolean, not string. Sometimes it works ok, sometimes it does not in my experience. I don't know if it's an inconsistency in Ext's comparison using == instead of === inconsistently or what. Anyway, point is, don't dismiss it outright.

[mjlecomte]

I am struggling to see where I can place a store.load call in my scripts

I haven't been through this plugin's code as of yet. But it would be good if it supported sending back listeners so you could call for store loading once the grid is rendered. Also note, if you were to send back the store's data with the grid's config then the data would be local and you might use loadData instead of load.

I happen to be working on the same thing (remote retrieval of grid), but I don't know if I'll end up using this plugin or another remote load routine.

[Remy]

Doug is clearly right about the boolean values and I have changed those. After my grid is instantiated I can see it in Firebug's DOM under components but can't retrieve it with getCmp(), I will keep trying though as this is extremely educational for me. As someone said in another thread, everytime you conquer an issue, the next is a line of code away;)

[Remy]

I haven't been through this plugin's code as of yet. But it would be good if it supported sending back listeners so you could call for store loading once the grid is rendered. Also note, if you were to send back the store's data with the grid's config then the data would be local and you might use loadData instead of load.

I happen to be working on the same thing (remote retrieval of grid), but I don't know if I'll end up using this plugin or another remote load routine.

It does work with local data as I tested this first, maybe I should just go down that route, it doesn't modularise my code the way I would like but its more important that it works.

[mjlecomte]

It does work with local data as I tested this first, maybe I should just go down that route, it doesn't modularise my code the way I would like but its more important that it works.

To be clear, when I say local data, I mean that you send the data back via ajax with your other config stuff. At that point you wouldn't call load, because the data is already 'local'. When I say local I don't mean that you have a variable like data = whatever. What I'm talking about here is more like if you want to make 2 trips to the server or 1. 1 trip to get the config, 1 to get the store.

[Remy]

Yeah, I got that. I initially sent my data within the config itself so that's where I'm going to head back too. Thanks for the assistance =D>

[Dave.Sanders]

Another Day, Another Variant:

I've taken my previous two additions (adding script and adding data blocks - see further back in this thread) and reworked it a bit to make it more usable. The problem was that, because the current plugin code was using the JSON.decode on the entire response, then you couldn't do things like include scripts that were used by objects in the response packet. (In other words, the eval would try to happen on the component you were adding, which might call a script function that hadn't technically been defined yet and you would error.)

To get around this, I parse out the objects in the response text into an array FIRST, and then loop through and create each one. If a script is found, then the script is inserted into the dom before your component gets created, and your new component can use the script immediately.

Again, this is only an update to the callback function. I'd happily take suggestions on how to do the parsing better / faster - I'm just not a regex guy... - or anything else.

/**
* private
* Callback method for successful Ajax request.
* Creates Components from responseText and
* and populates Components in Container.
* @param {Object} response object from successful AJAX request.
*/
var callback = function(res){

this.data = new Array();
var raw = res.responseText;
var objs = new Array();

var item = '';
var counter = 0;
for(var x=0;x<raw.length;x++)
{
if (x==0 && raw[x] == '[') {continue;}
if (x==raw.length - 1 && raw[x] == ']') {continue;}
if (counter==0 && raw[x] == ',') {continue;}
if (raw[x] =="{") {counter++;}
if (raw[x] =="}") {counter--;}
item += raw[x];
if (counter == 0) {objs[objs.length] = item; item = '';}
}

for (var x=0; x<objs.length; x++)
{
var JSON = Ext.decode(objs[x]);
if (JSON.objtype && JSON.objtype == "data"){
this.data[this.data.length] = JSON;
}
else if(JSON.objtype && JSON.objtype == "script"){
if (JSON.remove == true) {
var el = Ext.get(JSON.id);
if (el) {el.remove();}
} else if (JSON.src) {
var el = Ext.get(JSON.id);
if (el) {el.remove();}
var e = document.createElement("script");
e.id = JSON.id;
e.src = JSON.src;
e.type="text/javascript";
//TODO: this code does not quite function in chrome yet.
document.getElementsByTagName("head")[0].appendChild(e);
} else if (JSON.content) {
var el = Ext.get(JSON.id);
if (el) {el.remove();}
var e = document.createElement("script");
e.id = JSON.id;
e.type="text/javascript";
e.text = JSON.content;
document.getElementsByTagName("head")[0].appendChild(e);
}
}
else {
component = renderComponent(JSON).show();
}
}
this.container.doLayout();
this.fireEvent('success', this);

if(this.purgeSubscribers){
this.purgeListeners();
}
}.createDelegate(this);

As a reminder to those who don't want to go find the other posts about this - this augments the RemoteComponent control so that you can also send back data, which is then added to the plugin for your later reference, or you can attach script files, or include in-line script content, all via the JSON you send back to the client.

Post 1 (http://extjs.com/forum/showthread.php?p=237718#post237718)
Post 2 (http://extjs.com/forum/showthread.php?p=238267#post238267)

[Remy]

Just an update on my previous posts, the grid is now populating properly! The code was fine with the exception of the grid creation which required a layout config option, this is why there were no errors, it wasn't rendering properly. Thanks to hendricd and mjlecomte for your help. Now onto my next "challenge".

[kaigan]

Hi,

I've stumbled upon another grid problem which I can't really understand. I have a layout with a west-region (accordion) and a center region.

I have a remote-config containing a grid;

{
xtype: 'form',
width: 430,
height: 100,
items: [{
xtype: 'grid',
border: false,
store: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'name'},
{name: 'modified', type: 'date', dateFormat: 'Y-m-d H:i'},
{name: 'type'},
{name: 'size'},
{name: 'icon'}
]),
data: [
['Program Files', '2008-01-01 00:00', 'File Folder', 0, 'folder.png'],
['Program Files (x86)', '2008-01-01 00:03', 'File Folder', 0, 'folder.png'],
['ProgramData', '2008-02-06 13:21', 'File Folder', 0, 'folder.png'],
['temp', '2007-12-05 00:59', 'File Folder', 0, 'folder.png'],
['Users', '2008-05-01 18:08', 'File Folder', 0, 'folder.png'],
['Windows', '2008-01-01 04:57', 'File Folder', 0, 'folder.png'],

['install.exe', '2008-08-17 03:42', 'Application', 561671, 'application.png'],
['globdata.ini', '2008-10-01 16:01', 'Configuration Settings', 3214, 'application-settings.png'],
['VC_RED.MSI', '2008-10-09 07:31', 'Application', 9498742, 'application-installer.png'],
['VC_RED.cab', '2008-10-09 07:31', 'WinRAR Archive', 65789416, 'winrar-archive.png']
],
sortInfo: {field: 'modified', direction: 'DESC'}
}),

columns: [
{id: 'name', header: 'Name', sortable: true, dataIndex: 'name'},
{header: 'Modified', width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d H:i'), dataIndex: 'modified'},
{header: 'Type', width: 120, sortable: true, dataIndex: 'type'},
{header: 'Size', width: 120, sortable: true, dataIndex: 'size', align: 'right', renderer: Ext.util.Format.fileSize}
],

autoExpandColumn: 'name'
}]
}The strange thing is that the grid will not show it's rows other than if I load it into a accordion that is not open onload. I'm guessing it have something to do with the order of rendering stuff but I'm unsure how to solve this.

See the attached screenshot for an idea of what I mean, the screenshot shows me highlighting the "hidden" data from one of the grids that does not show it's data.

Hopefully the explanation wasn't to hard to follow :)

[garraS]

Hi, I have a problem with catching parameters...

tab = tabPanel.add({
id: id
,title: title
,iconCls: iconCls
,loadScripts: true
,plugins: new Ext.ux.Plugin.RemoteComponent({
url: url
,params: params
,method: 'POST'
,loadOn: 'show'
,mask: Ext.getCmp('tabpanel').body
,maskConfig: {
msg: 'Cargando...'
}
})
,autoShow: true
});
tabPanel.doLayout();
tabPanel.setActiveTab(tab);
And I want to catch the params in the url file that I load. I try using in my "form.js":

var params = Ext.getCmp('test').autoLoad.params;
alert(params.id);
But doesn't work. :(
Please help me.

[Remy]

garraS, what is the object you are creating using the remoteComponent? Can you post the code for that? You will need to use a valid method of the newly created component.

[garraS]

Is a FormPanel, here is the code of "form.js":

(function(){

var formulario = new Ext.form.FormPanel({
id: 'formulario'
,xtype: 'form'
,name: 'formulario'
,labelAlign: 'top'
,baseCls: 'x-panel-mc'
,method: 'POST'
,autoScroll: true
,bodyStyle: 'padding:15px;'
,items: [{
xtype: 'textfield'
,fieldLabel: 'Titulo'
,fieldAlign: 'right'
,name: 'titulo'
,id: 'titulo'
,allowBlank: false
,anchor: '98%'
},{
xtype: 'textarea'
,fieldLabel: 'Copete'
,name: 'copete'
,id: 'copete'
,allowBlank: true
,height: 50
,anchor: '98%'
},{
xtype: 'htmleditor'
,fieldLabel: 'Desarrollo'
,name: 'desarrollo'
,id: 'desarrollo'
,height: 200
,anchor: '98%'
,allowBlank: false
,enableLinks: true
,enableLists: true
,enableFormat: true
,enableSourceEdit: true
,enableColors: true
,enableFont: true
}]
,buttons: [{
text: 'Guardar'
,iconCls: 'save'
},{
text: 'Restablecer'
,iconCls: 'reset'
}]
});

var params = Ext.getCmp('test').autoLoad.params;
formulario.form.load({
url: 'url.php'
,params: {
action: 'load'
,id: params.id
}
,method: 'POST'
});

return formulario;

})()


The line:

var params = Ext.getCmp('test').autoLoad.params;

doesn't work becouse now I'm not using autoLoad attribute when I create a new tab.

[Remy]

formPanel doesn't have a params or baseParams property, where is the code which creates the config with autoLoad? Can you post all the code to have a better look?

[garraS]

Yes sir.

tabpanel.js:

...
,addTab: function(event,element,linkCmp){
var tabPanel = Ext.getCmp('tabpanel');

var id = 'tab-'+linkCmp.id;
var title = linkCmp.titleTab;
var iconCls = linkCmp.iconCls;
var url = linkCmp.url;
var params = linkCmp.params;
var mantenimiento = linkCmp.mantenimiento;

var tab = tabPanel.getItem(id);

if(!tab){
tab = tabPanel.add({
id: id
,title: title
,iconCls: iconCls
,closable: true
,autoScroll: true
,border: false
,frame: false
,loadScripts: true
,buttonAlign: 'center'
,layout: 'fit'
,plugins: new Ext.ux.Plugin.RemoteComponent({
url: url
,params: params
,method: 'POST'
,loadOn: 'show'
,mask: Ext.getCmp('tabpanel').body
,maskConfig: {
msg: 'Cargando...'
}
})
,autoShow: true
});
}
tabPanel.doLayout();
tabPanel.setActiveTab(tab);
}
...
form.js:

(function(){

var formulario = new Ext.form.FormPanel({
id: 'formulario'
,xtype: 'form'
,name: 'formulario'
,labelAlign: 'top'
,baseCls: 'x-panel-mc'
,method: 'POST'
,autoScroll: true
,bodyStyle: 'padding:15px;'
,items: [{
xtype: 'textfield'
,fieldLabel: 'Titulo'
,fieldAlign: 'right'
,name: 'titulo'
,id: 'titulo'
,allowBlank: false
,anchor: '98%'
},{
xtype: 'textarea'
,fieldLabel: 'Copete'
,name: 'copete'
,id: 'copete'
,allowBlank: true
,height: 50
,anchor: '98%'
},{
xtype: 'htmleditor'
,fieldLabel: 'Desarrollo'
,name: 'desarrollo'
,id: 'desarrollo'
,height: 200
,anchor: '98%'
,allowBlank: false
,enableLinks: true
,enableLists: true
,enableFormat: true
,enableSourceEdit: true
,enableColors: true
,enableFont: true
}]
,buttons: [{
text: 'Guardar'
,iconCls: 'save'
},{
text: 'Restablecer'
,iconCls: 'reset'
}]
});

var params = Ext.getCmp('modify-as').autoLoad.params;
formulario.form.load({
url: 'url.php'
,params: {
action: 'load'
,id: params.id
}
,method: 'POST'
});

return formulario;

})()
When I create a new tab calling "form.js", I need to load some data in the FormPanel.
This is becouse I have a grid and, when I click on modify button, open the form and load the data from DB. Here is the code of the grid, when click on Modify Button:

function modify() {
var selectedKeys = grid.selModel.selections.keys;
var datos = {id: 'modify-as', iconCls: 'modify-as', titleTab: 'test', url: 'form.js', params: {id: selectedKeys}};
Ext.getCmp('west').addTab(this,this,datos);
}

[Remy]

can't you pass your params as a parameter of your function which creates the above form?

[garraS]

Yes I can. But I can't catch the params passed on the "form.js".

[Remy]

I see, so you are using form.js as the url for the remoteComponent? What I have done is generate the remoteComponent config server side using xtype and retrieve the param using your server side platform (ASP in my case, PHP in yours). Your component can then be loaded with the data retrived using your params and returned.

An example generated from the server would return:


[{
,id: 'formulario'
,xtype: 'form'
,name: 'formulario'
,labelAlign: 'top'
,baseCls: 'x-panel-mc'
,method: 'POST'
,autoScroll: true
,bodyStyle: 'padding:15px;'
,items: [{
xtype: 'textfield'
,fieldLabel: 'Titulo'
,fieldAlign: 'right'
,name: 'titulo'
,id: 'titulo'
,allowBlank: false
,anchor: '98%'
},{
xtype: 'textarea'
,fieldLabel: 'Copete'
,name: 'copete'
,id: 'copete'
,allowBlank: true
,height: 50
,anchor: '98%'
},{
xtype: 'htmleditor'
,fieldLabel: 'Desarrollo'
,name: 'desarrollo'
,id: 'desarrollo'
,height: 200
,anchor: '98%'
,allowBlank: false
,enableLinks: true
,enableLists: true
,enableFormat: true
,enableSourceEdit: true
,enableColors: true
,enableFont: true
}]
,buttons: [{
text: 'Guardar'
,iconCls: 'save'
},{
text: 'Restablecer'
,iconCls: 'reset'
}]
}
]

You would also want to prepopulate the form at this point.

[Remy]

Should have said you can include the autoLoad config with your params as part of the returned object.

[garraS]

No, the form it's ok, works fine, but I need the code to catch the params passed from the RemoteComponent to load the info in the FormPanel.

[Remy]

I know the form is ok but it doesn't expose params as a method so you can't get them that way, generating the dynamic config on the server works for me.

[Remy]

I had an issue with the component in that I couldn't get the result of the plugin creation. The component does not implement the failure handler and Animal has refactored it to include this. The thread is here:


http://extjs.com/forum/showthread.php?p=241862#post241862

It might be worthwhile bringing that discussion in here.

[garraS]

I still have the same problem...I cannot take the params (sent with RemoteComponent) in a JavaScript file.

When I call a JavaScript file (using "url") with RemoteComponent, I need to take the params sent to the new JavaScript file and make a JsonStore with that params.

[Remy]

garraS,

try:

var params = Ext.getCmp('test').initialConfig.plugins.params;
alert(params.id);

[garraS]

It's works! Thanks!

[brookd]

Hello,

Great plugin, use it all the time and love it. I am using it to load a json config file that is a series of cards loaded into a card panel.

My problem is that sometimes the loaded component have various rendering errors, like a textfield that is 500 pixels high, or a combobox that does not show its values. Closing and re-opening the window (the Ext.Window the cardPanel is in) fixes the problem. It is intermittent. Does anyone else experience anything like this?

I should say, this may not be because of this component, but may be elsewhere in my code which is why I am asking if anyone else has this issue.

[kaigan]

Talking about rendering problems ;) I still can not find a solution to my grid rendering problem, might be related. The data is actually there but is not shown.

http://extjs.com/forum/showthread.php?p=240180#post240180

[mjlecomte]

Closing and re-opening the window (the Ext.Window the cardPanel is in) fixes the problem. It is intermittent. Does anyone else experience anything like this?

I should say, this may not be because of this component, but may be elsewhere in my code which is why I am asking if anyone else has this issue.

Smells like there may be a missing doLayout() needed. To verify the second paragraph, why not use your code without the plugin to verify (take your remote config and hardcode it in).

[service@think-1st.de]

Could I with this extension create the JsonReader, dataStore and ColumnModel from a grid?
And if so, is there a example how to do this?

[Remy]

Its possible to do this, I use Classic ASP to achieve it, I can't post the code since it is full of calls to my custom ASP functions but you simply generate what you normally would but make use of xtype for grids and fields.

"[{xtype: 'grid', loadMask: true, id: 'gridprimary', columns:[array of columns]"
The store would be generated inline also:

",store: new Ext.data.Store(storeId: 'gridStore', autoLoad:{params:{start:0, limit:20}}, reader: new Ext.data.JsonReader({root:'rows',totalProperty:'totalCount',fields:[array of fields}), remoteSort: true, baseParams: {instance: 'primary'}})"

This is returned as a JSON formatted response.

[jmariani]

Dude, your plugin rocks.
My dream of cloning PeopleSoft as OpenSource is near.

Thank you.

[jmariani]

Hi.

I'm getting this error: "this.container.add is not a function
http://localhost/bdApp/tools/remoteComponent/Ext.ux.Plugin.RemoteComponent.js
Line 35"

when trying to do this:

[CODE] items: {
xtype: 'form',
id: 'CountryBrowserForm',
labelAlign: 'right',
frame: true,
monitorValid: true,
bodyStyle:'padding:5px 5px 0',
//plugins: [new Ext.ux.form.FieldAutoExpand()],
autoHeight: true,
url: 'php/saveCountry.php',
items: [{
xtype:'fieldset',
checkboxToggle:false,
title: 'Datos del pa

[mjlecomte]

Since you don't say, I'm guessing:
getFormField('ISO31661')
returns that JSON from the server.

If that's the case you need to have that evaluated already, that code isn't going to sit around and wait on your server is it?

The error you're getting seems to confirm it. Set a breakpoint there and step through. Ext is going to check if there are any items and add them to the container for those items. That item is probably coming up undefined....again step through with firebug.

[jmariani]

Sorry, forgot to add:

var getFormField = function(fieldName){
return new Ext.ux.Plugin.RemoteComponent({
//loadOn: 'show',
url: 'php/getFieldDefinition.php',
method: 'GET',
params: {fieldName: fieldName}
});
};


getFormField is defined in a js and is loaded in the header. The error is happening at the RemoteComponent code:

Ext.ux.Plugin.LiteRemoteComponent = function (config){

var defaultType = config.xtype || 'panel';

var callback = function(res){

this.container.add(Ext.ComponentMgr.create(Ext.decode(res.responseText), defaultType)).show();

this.container.doLayout() ;

};

return{

init : function (container){

this.container = container;

Ext.Ajax.request(Ext.apply(config, {success: callback, scope: this}));

}

}

};


Thank you.

[SunWuKung]

Just an update on my previous posts, the grid is now populating properly! The code was fine with the exception of the grid creation which required a layout config option, this is why there were no errors, it wasn't rendering properly. Thanks to hendricd and mjlecomte for your help. Now onto my next "challenge".

Hi,
I am exactly in the same position than you were.
My remotely loaded grid is loaded into a viewport, then it loads the data, but it doesn't appear.
Can you post the layout config option you had to make for the grid to appear.

Thx.
SWK

[Remy]

It's fairly lengthy and with plenty in there that probably isn't relevelant but here's my JSON response including the grid config:

[
{
xtype: 'grid',
loadMask: true,
autoExpandColumn: 'nh_HomeName',
cm: new Ext.grid.ColumnModel([
{
id: 'nh_id',
width: 45,
header: 'ID',
sortable: true,
dataIndex: 'nh_id',
align: 'right',
editor: new Ext.form.NumberField({

})
},
{
id: 'nh_HomeName',
header: 'Name',
sortable: true,
dataIndex: 'nh_HomeName',
editor: new Ext.form.TextField({
allowBlank: true
})
},
{
id: 'nh_OrganisationType',
header: 'Type',
sortable: true,
dataIndex: 'nh_OrganisationType'
},
{
id: 'nh_branchID',
header: 'Branch',
sortable: true,
dataIndex: 'nh_branchID'
},
{
id: 'nh_HealthboardID',
header: 'PCT',
sortable: true,
dataIndex: 'nh_HealthboardID',
editor: new Ext.form.TextField({
allowBlank: true
})
},
{
id: 'nh_ContactName',
header: 'Contact',
sortable: true,
dataIndex: 'nh_ContactName',
editor: new Ext.form.TextField({
allowBlank: true
})
},
{
id: 'nh_Position',
header: 'Position',
sortable: true,
dataIndex: 'nh_Position',
editor: new Ext.form.TextField({
allowBlank: true
})
},
{
id: 'nh_address1',
header: 'Address',
sortable: true,
dataIndex: 'nh_address1',
editor: new Ext.form.TextField({
allowBlank: true
})
},
{
id: 'nh_address2',
header: 'Address',
sortable: true,
dataIndex: 'nh_address2',
editor: new Ext.form.TextField({
allowBlank: true
})
},
{
id: 'nh_address3',
header: 'Address',
sortable: true,
dataIndex: 'nh_address3',
editor: new Ext.form.TextField({
allowBlank: true
})
},
{
id: 'nh_city',
header: 'City',
sortable: true,
dataIndex: 'nh_city',
editor: new Ext.form.TextField({
allowBlank: true
})
},
{
id: 'nh_postcode',
header: 'Post Code',
sortable: true,
dataIndex: 'nh_postcode',
editor: new Ext.form.TextField({
allowBlank: true
})
},
{
id: 'nh_PhoneNo',
header: 'Phone',
sortable: true,
dataIndex: 'nh_PhoneNo',
editor: new Ext.form.TextField({
allowBlank: true
})
},
{
id: 'nh_FaxNo',
header: 'Fax',
sortable: true,
dataIndex: 'nh_FaxNo',
editor: new Ext.form.TextField({
allowBlank: true
})
},
{
id: 'nh_GroupID',
header: 'Group',
sortable: true,
dataIndex: 'nh_GroupID',
editor: new Ext.form.TextField({
allowBlank: true
})
},
{
id: 'nh_Capacity',
header: 'Capacity',
sortable: true,
dataIndex: 'nh_Capacity',
align: 'right',
editor: new Ext.form.NumberField({

})
},
{
id: 'nh_ListLastUpdate',
header: 'Verified',
sortable: true,
dataIndex: 'nh_ListLastUpdate',
align: 'right',
editor: new Ext.form.DateField({
allowBlank: true
})
},
{
id: 'nh_VenueRef',
header: 'VenueRef',
sortable: true,
dataIndex: 'nh_VenueRef',
editor: new Ext.form.TextField({
allowBlank: true
})
},
{
id: 'nh_EMail',
header: 'EMail',
sortable: true,
dataIndex: 'nh_EMail',
editor: new Ext.form.TextField({
allowBlank: true
})
},
{
id: 'nh_Status',
header: 'Status',
sortable: true,
dataIndex: 'nh_Status'
},
{
id: 'nh_CreateDate',
header: 'Date Created',
sortable: true,
dataIndex: 'nh_CreateDate',
align: 'right',
editor: new Ext.form.DateField({
allowBlank: true
})
},
{
id: 'disabled',
header: 'Disabled',
sortable: true,
dataIndex: 'disabled',
align: 'right',
editor: new Ext.form.NumberField({

}),
hidden: true
}
]),
id: 'gridpa_organisation',
plugins: [
new Ext.ux.grid.GridFilters({
id: 'DEBUG',
pluginId: 'TEST',
autoReload: true,
local: false,
filters: [
{
type: 'numeric',
dataIndex: 'nh_id'
},
{
type: 'string',
dataIndex: 'nh_HomeName'
},
{
type: 'list',
labelField: "ot_desc",
dataIndex: 'nh_OrganisationType',
store: new Ext.data.JsonStore({
id: 'ot_id',
autoLoad: true,
baseParams: {
table: 'pa_OrganisationType',
lookupSourceField: 'nh_OrganisationType',
lookupField: 'ot_id',
lookupValue: "ot_desc"
},
url: 'ajax/LookupList.asp',
root: 'rows',
fields: [
{
name: 'ot_id',
mapping: 'ot_id'
},
{
name: "ot_desc"
}
]
})
},
{
type: 'list',
labelField: "br_desc",
dataIndex: 'nh_branchID',
store: new Ext.data.JsonStore({
id: 'br_id',
autoLoad: true,
baseParams: {
table: 'pa_Branch',
lookupSourceField: 'nh_branchID',
lookupField: 'br_id',
lookupValue: "br_desc"
},
url: 'ajax/LookupList.asp',
root: 'rows',
fields: [
{
name: 'br_id',
mapping: 'br_id'
},
{
name: "br_desc"
}
]
})
},
{
type: 'string',
dataIndex: 'nh_HealthboardID'
},
{
type: 'string',
dataIndex: 'nh_ContactName'
},
{
type: 'string',
dataIndex: 'nh_Position'
},
{
type: 'string',
dataIndex: 'nh_address1'
},
{
type: 'string',
dataIndex: 'nh_address2'
},
{
type: 'string',
dataIndex: 'nh_address3'
},
{
type: 'string',
dataIndex: 'nh_city'
},
{
type: 'string',
dataIndex: 'nh_postcode'
},
{
type: 'string',
dataIndex: 'nh_PhoneNo'
},
{
type: 'string',
dataIndex: 'nh_FaxNo'
},
{
type: 'string',
dataIndex: 'nh_GroupID'
},
{
type: 'numeric',
dataIndex: 'nh_Capacity'
},
{
type: 'date',
dataIndex: 'nh_ListLastUpdate'
},
{
type: 'string',
dataIndex: 'nh_VenueRef'
},
{
type: 'string',
dataIndex: 'nh_EMail'
},
{
type: 'list',
labelField: "os_desc",
dataIndex: 'nh_Status',
store: new Ext.data.JsonStore({
id: 'os_id',
autoLoad: true,
baseParams: {
table: 'pa_OrganisationStatus',
lookupSourceField: 'nh_Status',
lookupField: 'os_id',
lookupValue: "os_desc"
},
url: 'ajax/LookupList.asp',
root: 'rows',
fields: [
{
name: 'os_id',
mapping: 'os_id'
},
{
name: "os_desc"
}
]
})
},
{
type: 'date',
dataIndex: 'nh_CreateDate'
},
{
type: 'numeric',
dataIndex: 'disabled'
}
]
}),
new Ext.ux.plugins.CustomColumnMenu({
menuItems: [
new Ext.menu.Item({
text: 'Properties',
handler: function(item,
ev,
grid,
colIndex,
dataIndex){
showProperties(dataIndex);
}
})
]
})
],
iconCls: 'icon-grid',
border: false,
stripeRows: true ,
viewConfig: {
getRowClass: function(r,
i){
if(r.data.disabled !='0'){
return 'grid-deleted-row';
}
}
},
emptyText: 'No Records to display...',
deferEmptyText: true,
listeners: {
afteredit: function(editEvent){
var fieldValue = editEvent.value instanceof Date?editEvent.value.format('Y-m-d H: i: s'): editEvent.value;var keyValue = this.getStore().getAt(editEvent.row).data[
'nh_id'
];Ext.Ajax.request({
waitMsg: 'Saving changes...',
url: 'ajax/fieldSave.asp',
method: 'POST',
params: {
table: 'pa_organisation',
keyId: 'nh_id',
keyValue: keyValue,
fieldId: editEvent.field,
fieldNewValue: fieldValue,
fieldOldValue: editEvent.originalValue
},
failure: function(response,
options){
Ext.MessageBox.alert('Error',
'There was a problem communicating with the server');
},
success: function(response,
options){
var responseData = Ext.util.JSON.decode(response.responseText);if (responseData.success === true){
Ext.StoreMgr.lookup('pa_organisation').commitChanges();
} else {
Ext.Msg.show({
title: 'Error',
msg: responseData.msg
});
}
}
})
},
rowclick: function(grid,
index){
var btn = Ext.getCmp('pa_organisationbtnDel').enable();var btn = Ext.getCmp('pa_organisationbtnMod').enable();
},
rowdblclick: function(grid,
index){
editRecord(grid,
'Organisation',
index,
'nh_id')
}
},
tbar: new Ext.Toolbar({
items: [
'-',
{
text: 'Clear Filters..',
iconCls: 'filter-clear',
handler: clearFilters.createDelegate(null,
[
'gridpa_organisation'
],
false)
},
'-',
{
xtype: 'button',
iconCls: 'add',
id: 'pa_organisationbtnAdd',
text: 'Add',
listeners: {
click: function(){
editRecord(Ext.getCmp('gridpa_organisation'),
'Organisation',
-1,
'nh_id',
'Add')
}
}
},
'-',
{
xtype: 'button',
iconCls: 'edit',
id: 'pa_organisationbtnMod',
text: 'Edit',
disabled: true,
listeners: {
click: function(){
editRecord(Ext.getCmp('gridpa_organisation'),
'Organisation',
Ext.getCmp('gridpa_organisation').store.indexOf(Ext.getCmp('gridpa_organisation').getSelectionModel().getSelected()),
'nh_id')
}
}
},
'-',
{
xtype: 'button',
iconCls: 'remove',
id: 'pa_organisationbtnDel',
text: 'Delete/Enable',
disabled: true,
listeners: {
click: function(){
confirmDelete(Ext.getCmp('gridpa_organisation'),
'Organisation',
Ext.getCmp('gridpa_organisation').store.indexOf(Ext.getCmp('gridpa_organisation').getSelectionModel().getSelected()),
'nh_id')
}
}
},
'-',
{
xtype: 'tbfill'
},
'-',
{
xtype: 'cycle',
id: 'pa_organisationenabledisable',
enableToggle: true,
showText: true,
items: [
{
text: 'Enabled',
iconCls: 'enabled',
checked: true
},
{
text: 'Deleted',
iconCls: 'disabled'
}
],
changeHandler: function(){
Ext.StoreMgr.lookup('pa_organisation').reload();
}
}
]
}),
store: new Ext.data.Store({
listeners: {
'beforeLoad': function(s,
o){
o.params || (o.params = {

});Ext.apply(o.params,
{
disabled: Ext.getCmp('pa_organisationenabledisable').getText()=='Enabled'?0: 1
});
},
'loadexception': dataLoadException,
'load': function(s,
r,
o){
var btn = Ext.getCmp('pa_organisationbtnMod').disable();var btn = Ext.getCmp('pa_organisationbtnDel').disable();
}
},
url: 'ajax/tabledata.asp',
sortInfo: {
field: 'nh_id',
direction: 'ASC'
},
storeId: 'pa_organisation',
autoLoad: {
params: {
start: 0,
limit: 20
}
},
reader: new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'totalCount',
fields: [
'nh_id',
'nh_HomeName',
'nh_OrganisationType',
'nh_branchID',
'nh_HealthboardID',
'nh_ContactName',
'nh_Position',
'nh_address1',
'nh_address2',
'nh_address3',
'nh_city',
'nh_postcode',
'nh_PhoneNo',
'nh_FaxNo',
'nh_GroupID',
'nh_Capacity',
'nh_ListLastUpdate',
'nh_VenueRef',
'nh_EMail',
'nh_Status',
'nh_CreateDate',
'disabled'
]
}),
remoteSort: true,
baseParams: {
table: 'pa_organisation'
}
}),
bbar: new Ext.PagingToolbar({
store: Ext.StoreMgr.lookup('pa_organisation'),
pageSize: 20,
displayInfo: true,
displayMsg: 'Displaying records {
0
} - {
1
} of {
2
}',
plugins: new Ext.ux.Andrie.pPageSize
})
}
]

[SunWuKung]

Thanks, but it seems
my problem is probably somehow related to remote component itself.

The message I am receiving through remote component is simply:
[{xtype: 'examplegrid'}]this is added to my central panel, and the grid's store load its data, but the grid doesn't appear.

When I use
region: 'center',
id: 'mainPanel',
layout: 'fit',
border: false,
xtype: 'examplegrid'everything works fine.

My grid is currently using the AutoGrid plugin ( http://extjs.com/forum/showthread.php?p=53307#post53307 ) - so the column model is setup from the data sent from the server.
Maybe the Autogrid and Remote-component cant work together.

[Remy]

Do you have the code where you use the remoteComponent plugin? I'm sure that autoGrid and remoteComponent will work together. From my experience, a side effect of using the remoteComponent is that it overnests components ie You need a panel to plugin the remoteComponent to, this in turn will return an object (autoGrid in your case) which is another level of component.

Some points:

- examplegrid is not an xtype, try getting it to work with a grid before using autoGrid.
- your JSON response is not equivocal to your config that works, your response should mirror how you would config your grid manually

Try putting a panel in your center region with the remoteComponent plugin and return your full config via remoteComponent (that's why this plugin is useful!)

This is how I use the plugin (I use a tab panel so my grids appear within the items of this)

var gridPlugin = new Ext.ux.Plugin.RemoteComponent({
url : 'ajax/grid.asp',
params: {table:'pa_motd'}

//not all viewport settings shown!

{ region: 'center',
id: 'mainPanel',
xtype:'tabpanel',
activeTab: 0,
enableTabScroll:true,
layoutOnTabChange:true,
minTabWidth: 160,
tabWidth:160,
width:'auto',
border: true,
items: [
{
title: 'Message of The Day',
layout: 'fit',
id: 'pa_motd',
closable: true,
plugins: gridPlugin
}]
}

[Remy]

Just another quick point, if you are using the autoGrid do you actually need remoteComponent? I use remoteComponent to run a server script which builds my columnModel from the server script and returns the grid config, including column model as the response (see original post).

[SunWuKung]

well, first, many thanks for taking the time to help
Please bear with me, I am still at the primate stage of the evolution of my programming: monkey see, monkey do - so the code below are pieces cut and paste from different sources, including your previous post.

Next my code to register 'examplegrid':

Ext.ns('Peopletest');
Peopletest.Usergrid = Ext.extend(Ext.ux.AutoGridPanel, {
store :new Ext.data.JsonStore( {
url :'/admin/user/list/'
}),
id :'usr_id',
selModel :new Ext.grid.CheckboxSelectionModel(),
stripeRows :true,
loadMask :true,
onRender : function() {

// load the store
this.store.load( {
params : {
start :0,
limit :10
}
});
Peopletest.Usergrid.superclass.onRender.apply(this, arguments);

} // eo function onRender

}); // e/o extend
// register xtype
Ext.reg('examplegrid', Peopletest.Usergrid);This works fine in the following viewport - with xtype examplegrid hardcoded.
Ext.BLANK_IMAGE_URL = '../../ext-2.2/resources/images/default/s.gif';
Ext.ns('Peopletest');

Ext.onReady( function() {

Ext.QuickTips.init();

function menuClickHandler(){
//Ext.getCmp('gridTable').destroy();
Ext.getCmp('mainPanel').remove('gridPanel');
createGrid();
Ext.getCmp('mainPanel').doLayout();
}

function createGrid(item){
return Ext.getCmp('mainPanel').add({
title: 'Remote Grid',
id: 'gridPanel',
plugins: new Ext.ux.Plugin.RemoteComponent({
url : 'user/remotegrid',
params: {table:14}
}),
autoShow: true
}
);
}

// code here
var viewport = new Ext.Viewport( {
id: 'appViewPort',
layout :'border',
renderTo :Ext.getBody(),
items : [ {
region :'north',
id: 'menubar',
xtype :'toolbar',
items : [ {
xtype :'tbspacer'
}, {
xtype :'tbbutton',
text :'Load Grid',
handler : function(btn) {
menuClickHandler();
}
}, {
xtype :'tbbutton',
text :'Remove Grid',
handler : function(btn) {
btn.disable();
}
}, {
xtype :'tbfill'
} ]
}, {
region: 'center',
id: 'mainPanel',
layout: 'fit',
border: false
,xtype: 'examplegrid'
}, {
region :'south',
id: 'statusbar',
xtype :'panel',
html :'South'
} ]
});

}); // eo function onReadyIf I comment out the ,xtype: 'examplegrid' row and press the Load Grid button the grid doesn't appear - though the same metadata for the grid arrives from the server.

[Remy]

I haven't digested your post fully but here's my function for calling the creation of a new grid:

function createGrid(tableId,tableName){
return Ext.getCmp('mainPanel').add({
layout: 'fit',
closable: true,
title: tableName,
hideBorder:true,
id: tableId,
plugins: new Ext.ux.Plugin.RemoteComponent({
url : 'ajax/grid.asp',
params: {table:tableId},
listeners: {
'success': {fn:function(response, options) {
if (response.success === false) {
if (response.sessionExpired === true){
Ext.Msg.show({title:'Error',msg:response.msg});
logoutHandler(response.msg);
} else {
Ext.Msg.show({title:'Error',msg:response.msg});
}
}
}},
'failure': {fn:function(response, options) {
Ext.MessageBox.alert('Error',response.msg);
}}
}
}),
autoShow: true
}
).show();
}

[SunWuKung]

I think that now mine is functionally the same as yours, but no luck...

function createGrid(item){
return Ext.getCmp('mainPanel').add({
title: 'Remote Grid',
layout: 'fit',
hideBorder:true,
id: 'gridPanel',
plugins: new Ext.ux.Plugin.RemoteComponent({
url : 'user/remotegrid',
params: {table:14}
}),
autoShow: true
}
).show();
}

[mjlecomte]

If all you need is the grid's column model and store configuration you can do that entirely through metaData sent by server, you don't need remoteComponent.

If you're going to use remoteComponent, I don't know why you'd want to use autoGrid also. I'll admit I haven't used remoteComponent in practice. But if you're going off to the server to get the entire component, why would you go back to configure that component? I would think you'd send the whole thing back in one shot, or can you not also send the data for the grid back at the same time out of the box?

[SunWuKung]

Right, I can do that.
I am trying to have something simple working now - with a plain nonAutogrid.

var gridPlugin = new Ext.ux.Plugin.RemoteComponent( {
url :'user/remotegrid'
});
{
region :'center',
id :'mainPanel',
layout :'fit',
border :false,
items: [ { layout: 'fit', plugins: gridPlugin }]
} This makes my grid appear now (although for some reason both the component call and the data call occurs twice).

If I try to insert the grid by a button click the grid is inserted into the dom and the store is populated with data but the grid doesn't appear in the end.

var parent = Ext.getCmp('mainPanel');
parent.remove('gridPanel');
parent.add( {
layout :'fit',
id: 'gridPanel',
plugins: new Ext.ux.Plugin.RemoteComponent( {
url :'user/remotegrid'
}),
autoShow :true
});
parent.show();
parent.doLayout();
}
}Could you advice me what am I doing wrong here?
Thx.
SWK

[SunWuKung]

This is the grid config I am returning. I believe it is correct, since it does produce the proper grid when called statically.
I am sure the problem is in the way I handle adding the component to the viewport since if I look at the generated html the grid is there, the data is in the grid - it just won't appear.

$json = "[ {
xtype :'grid',
id :'usergrid',
autoShow :true,
stripeRows :true,
loadMask :true,
emptyText :'No Records to display...',
deferEmptyText :true,
cm :new Ext.grid.ColumnModel($columns),
store :new Ext.data.Store( {
url :'user/list2',
storeId :'myStore',
reader :new Ext.data.JsonReader( {
root :'rows',
totalProperty :'totalCount',
fields :$fields
}),
autoLoad :'true',
remoteSort :'true'
})
} ]";

[SunWuKung]

....mea culpa. My application.js was loading twice.
Things work for me fine now.
Thx.
SWK

[spsp000000]

IS there any samples using RemoteComponent to get items for toolBar(eg. grid's)
I saw the DEMO but i didn't understand the toolbar example (Example 3).Thanks!

[Remy]

You simply generate a JSON config using the remoteComponent as a plugin of the component you want the toolbar to appear on.

Are you using the RC to generate a grid but also want the grid to have a toolbar built using RC? You can do this too, just build the config for the toolbar of the grid and include the remoteComponent as a plugin within the toolbar's config, the toolbar will be generated too.

[spsp000000]

thanks for your help.

here is my Code:
--------------------------------------------
Ext.onReady(function() {

Ext.QuickTips.init();

var p = new Ext.Panel({
id : 'mainPanel',
title : 'ataetetwafadsf',
renderTo : Ext.getBody(),
width : 600,
height : 400,
plugins : new Ext.ux.Plugin.RemoteComponent({
url : 'data/toolbar.json'
})
});
});
--------------------------------------------
toolbar.json : {tbar:[{text:'tb1'},'-',{text:'tb1'}]}
--------------------------------------------

it works fine in FF,but in IE7,it doesnt.
the toolbar appears with a blank on the bottom,so ugly,why?
i dont have privilege to upload the picture.

[anoop abbot]

plz tell me i want to load the html page which is made up of extjs tech , n i want to display in another panel in some another page at click event. it is working correct for simple html page it is loading the page but at the of extjs made up html page it is not loading. and condor has advised me to use remote component plugins. can u tell me how to use remote plugins.

[anoop abbot]

this is the code for loading the page in tabpanel,


listeners:
{
dblclick: function(node)
{
Ext.getCmp('aa').add(
{
title: node.text,
iconCls: 'tabs',
autoLoad:'ab1.html',
scripts: true,
//autoLoad:{url:'http://www.yahoo.com'},
closable: true
}).show();
}
}

[anoop abbot]

i am trying to load extjs made up html page but the page is not loading plz tell me what is the solution to this problem. it is loading simple html page.

listeners:
{
dblclick: function(node)
{

Ext.getCmp('aa').add(
{

title: node.text,
iconCls: 'tabs',
autoLoad:'ab1.html',
scripts: true,
//autoLoad:{url:'http://www.yahoo.com'},
closable: true
}).show();
}
}

[sergey.s]

some bells and whistles:
- lazyLoad option (or false url) to avoid instant (not deffered) loading
- ability to pass options into load(), new options locally override initial ones
- new event - failure
- ability to pass 'success' and 'failure' options into AJAX request
- maskContainer option to mask plugin's container

[santiagokci]

In my application everything is loaded in tabs in a central tabpanel. Then, any formpanel is loaded there. Some of these formpanels has nested more tabpanels with grid panels and othres. Previously, every item was loaded in their tabpanels using autoload method (loosing all you loose doing in this way), since we move to RemoteComponent plugin, performance get worse, it is posible?

thanks in advance and sorry for my english.

[wilfredor]

Hi guys,

I'm trying to validate my form, but not work, look my code:


buttons: [{
text: 'Guardar',
handler: fn_submitForm
},{
text: 'Cancelar',
handler: fn_resetForm

}] // See full JSON form (http://pastebin.com/m107e1bb5)


and in my fn_submitForm

function fn_submitForm(button,event){

var f = Ext.getCmp('myformJSON'); /// <<<< myformJSON's not valid, why ?
if(f.getForm().isValid() == true)
{

[wilfredor]

I have problems with my form layout:

http://www.laposadadelreino.com/test/personal/personal.html

Load in the seccond time

Ext.onReady(function(){
var tabs2 = new Ext.TabPanel({
renderTo: 'container',
activeTab: 0,
width:600,
plain:true,
defaults:{autoScroll: true},
enableTabScroll: true,
animScroll: true,
layoutOnTabChange: true,
defaults: {
hideMode: 'offsets' // recommended -- prevents formlayout problems in child "tabs" later on
},
items:[{
title: 'Listado',
html: 'Contenido de mi tab'
},{
title: 'Personal',
nocache: true,
listeners: {
render: function(self) {
self.doLayout();
}
}

}]
});
/********* Adding a Remote FormPanel to a TabPanel *********/
tabs2.getItem(1).on('activate', function(){
var formulario = new Ext.FormPanel(
{
id:'formulario',
layout: 'form',
plugins:getRemote('formulario.json')
}
);
this.add(formulario);

//this.doLayout(); // Work but show a bad layout

}, null, {single:true});



});

[Spongerusher]

I put my post here :
http://www.extjs.com/forum/showthread.php?t=84740