Here is my code: ======================================================= order_new_gridPrice.cfm (Child window) =======================================================
<div id="test2"></div>
<script type="text/javascript">
Ext.onReady(function(){
var PANEL821 = new Ext.Panel({
autoHeight: true,
autoWidth: true,
id: "myPanel",
renderTo: "test2",
items: [
new Ext.Button({
handler: testHandler,
iconCls: "icon-save",
text: "Save Form",
dummy: true
})
],
dummy: true
});
function testHandler() {
//var b = document.getCmp('myWin');
var a = this.findParentByType('panel').id;
a = a.findParentByType('window').id;
Ext.Msg.alert('Test', a);
//new_order_form.form.findField('quantity2').setValue('12');
}
});
</script>
=======================================================
order_new_form.cfm (Parent window)
=======================================================
<script type="text/javascript">
var dynForm;
//Ext.namespace ("Ext.fozzy");
Ext.ux.OrderedFormPanel = Ext.extend( Ext.FormPanel, {
addAfter : function( targetElementName, elementToAdd ){
function recursiveView (targetElementName,
elementToAdd, currentItem)
{
for( var i = 0 ; i <
currentItem.items.items.length ; i++ ){
var isArray = false;
try
{
if
(currentItem.items.items[i].items.items.constructor == Array)
isArray = true;
}
catch (e) {}
if (isArray)
{
recursiveView
(targetElementName, elementToAdd,
currentItem.items.items[i]);
}
if( currentItem.items.items[i].id ==
targetElementName ){
currentItem.insert( i + 1,
elementToAdd );
return;
}
}
}
recursiveView (targetElementName, elementToAdd, this);
}
});
</script>
<div id="new_order_form" class="output"></div>
<div id="article_form" class="output"></div>
<script type="text/javascript">
var articleJSON = new Ext.data.JsonStore({
autoLoad: true,
remoteSort: true,
root: "query.data",
totalProperty: "recordcount",
url: "articleJSON.cfm",
baseParams: {
limit: "100" },
fields: [ "id",{name: "article_number"},"article_name" ],
dummy: true
});
</script>
<script type="text/javascript">
Ext.onReady(function(){
var new_order_form = new Ext.ux.OrderedFormPanel({
bodyStyle: "padding: 10px; ",
height: 501,
id: "new_order_form",
labelAlign: "top",
labelWidth: 100,
renderTo: "new_order_form",
url: "order_new_query.cfm?order=po&{ts \\\'2009-11-10
15:50:17\\\'}",
width: 701,
bbar:
new Ext.Toolbar({
items: [
new Ext.Toolbar.Button({
handler: myHandler,
iconCls: "icon-save",
text: "Commit Order",
dummy: true
})
,
new Ext.Toolbar.Button({
handler: myHandler_reset,
iconCls: "icon-cancel",
text: "Cancel",
dummy: true
})
,
new Ext.Toolbar.Button({
handler: myHandler_add,
iconCls: "icon-cancel",
text: "Add +",
dummy: true
})
],
dummy: true
})
,
items: [
new Ext.Panel({
autoScroll: true,
bodyStyle: "padding: 5px; ",
frame: false,
height: 300,
id: "dyn_panel",
width: 680,
items: [
{
border: false,
layout: "column",
items: [
{
border: false,
columnWidth: 0.12,
id: "columnID",
layout: "form",
items: [
new Ext.form.Label({
text: "ID",
dummy: true
})
,
new Ext.form.TextField({
allowBlank: true,
fieldLabel: "Id 1",
hideLabel: true,
name: "id1",
readOnly: true,
value: "1",
width: 50,
dummy: true
})
],
dummy: true
}
,
{
border: false,
columnWidth: 0.19,
id: "columnArticleNumber",
layout: "form",
items: [
new Ext.form.Label({
text: "Article#",
dummy: true
})
,
new Ext.form.TextField({
allowBlank: false,
fieldLabel:
"Article_number 1",
hideLabel: true,
name: "article_number1",
width: 100,
dummy: true
})
],
dummy: true
}
,
{
border: false,
columnWidth: 0.3,
id: "columnArticleName",
layout: "form",
items: [
new Ext.form.Label({
text: "Article Name",
dummy: true
})
,
new Ext.form.TextField({
allowBlank: true,
fieldLabel:
"Article_name 1",
hideLabel: true,
name: "article_name1",
readOnly: true,
width: 180,
dummy: true
})
],
dummy: true
}
,
{
border: false,
columnWidth: 0.12,
id: "columnQty",
layout: "form",
items: [
new Ext.form.Label({
text: "Qty",
dummy: true
})
,
new Ext.form.NumberField({
allowBlank: false,
allowDecimals: false,
decimalPrecision: 0,
fieldLabel: "Quantity
1",
hideLabel: true,
name: "quantity1",
width: 50,
dummy: true
})
],
dummy: true
}
,
{
border: false,
columnWidth: 0.12,
id: "columnPrice",
layout: "form",
items: [
new Ext.form.Label({
text: "Price",
dummy: true
})
,
new Ext.form.NumberField({
allowBlank: false,
allowDecimals: true,
decimalPrecision: 2,
fieldLabel: "Price 1",
hideLabel: true,
name: "price1",
width: 50,
dummy: true
})
],
dummy: true
}
,
{
border: false,
columnWidth: 0.12,
id: "columnTPrice",
layout: "form",
items: [
new Ext.form.Label({
text: "Total Price",
dummy: true
})
,
new Ext.form.NumberField({
allowBlank: false,
allowDecimals: true,
decimalPrecision: 2,
fieldLabel: "T_price 1",
hideLabel: true,
name: "t_price1",
width: 50,
dummy: true
})
],
dummy: true
}
],
dummy: true
}
],
dummy: true
})
],
url: "order_new_query.cfm?order=po&{ts \'2009-11-10
15:50:17\'}",
method: "post",
dummy: true
});
function myHandler() {
var f;
if (typeof(new_order_form) != "undefined" &&
new_order_form.ctype !=
"Ext.Component")
f = Ext.getCmp("new_order_form");
else
f = new_order_form;
if (f.getForm().isValid())
{
if(f.url) f.getForm().getEl().dom.action = f.url;
f.getForm().submit({
failure: function(f, a) {
Ext.MessageBox.alert("Failure",
a.result.message);
},
success: function (f, a) {
Ext.MessageBox.alert("Success",
a.result.message);
},
waitMsg:'Saving...',
waitTitle: 'Please Wait...'
});
}
else
{
Ext.MessageBox.alert("Validation Error", "Please
correct the errors on
the form and try again");
}
}
function myHandler_reset() {
Ext.getCmp("new_order_form").getForm().reset();
//Ext.getCmp("orderGrid").getStore().rejectChanges();
}
function myHandler_add() {
addField();
}
});
</script>
<script type="text/javascript">
var a, b, c, d, e, f, myWin, row;
row = 1;
//Window function to display the available Article Code frouped by buying &
selling prices
function showPriceWin(article, winTitle, rowId) {
var myWin = new Ext.Window({
closable: true,
id: myWin,
closeAction: 'close',
draggable: true,
resizable: false,
title: winTitle,
autoLoad: {
url:
'order_new_gridPrice.cfm?article='+article+'&rowId='+rowId+'&encyrpt={ts
\'2009-11-10 15:50:17\'}',
scripts: true,
text: 'Loading data ...'
},
collapsible: true,
maximizable: false,
modal: true,
width: 614,
height: 280,
autoScroll: true,
iconCls: 'icon-form',
deferredRender: 'false'
});
myWin.show();
}
function addField(){
row = row + 1;
a = new Ext.form.TextField({ //Dynamic ID Field
allowBlank: true,
name: "id"+row,
id: "id"+row,
width: 50,
value: row,
hideLabel: true});
b = new Ext.form.TextField({ //Dynamic article_number Field
allowBlank: false,
hideLabel: true,
name: "article_number"+row,
id: "article_number"+row,
width: 100,
dummy: true,
listeners:{
change: function (field,nv,ov) {
if(articleJSON.find('article_number',nv,0,false,false)
!= -1) {
Ext.get(String(field.name).replace("article_number",
"article_name")).set({value :
articleJSON.getAt(articleJSON.find('article_number',nv,0, false,
false)).data.article_name});
showPriceWin(nv, 'Available Inventory |
Article# '+nv,
String(field.name).replace("article_number", ""));
Ext.get(String(field.name).replace("article_number",
"quantity")).focus(false, 50);
}
else {
Ext.get(String(field.name).replace("article_number",
"article_name")).set({value : ""});
this.focus(false, 50);
}
}
}
});
c = new Ext.form.TextField({ //Dynamic article_name Field
allowBlank: true,
hideLabel: true,
name: "article_name"+row,
id: "article_name"+row,
readOnly: true,
width: 180,
dummy: true
});
d = new Ext.form.NumberField({ //Dynamic Quantity Field
allowBlank: false,
allowDecimals: false,
decimalPrecision: 0,
hideLabel: true,
name: "quantity"+row,
id: "quantity"+row,
width: 50,
dummy: true
});
e = new Ext.form.NumberField({ //Dynamic Price Field
allowBlank: false,
allowDecimals: true,
decimalPrecision: 2,
hideLabel: true,
name: "price"+row,
id: "price"+row,
width: 50,
dummy: true
});
f = new Ext.form.NumberField({ //Dynamic Total Price Field
allowBlank: false,
allowDecimals: true,
decimalPrecision: 2,
hideLabel: true,
name: "t_price"+row,
id: "t_price"+row,
width: 50,
dummy: true
});
Ext.getCmp("columnID").insert(row, a );
Ext.getCmp("columnArticleNumber").insert(row, b );
Ext.getCmp("columnArticleName").insert(row, c );
Ext.getCmp("columnQty").insert(row, d );
Ext.getCmp("columnPrice").insert(row, e );
Ext.getCmp("columnTPrice").insert(row, f );
Ext.getCmp("columnID").doLayout();
Ext.getCmp("columnArticleNumber").doLayout();
Ext.getCmp("columnArticleName").doLayout();
Ext.getCmp("columnQty").doLayout();
Ext.getCmp("columnPrice").doLayout();
Ext.getCmp("columnTPrice").doLayout();
//Ext.getCmp("new_order_form").getForm().add( a );
//Ext.getCmp("new_order_form").getForm
<div id="test2"></div>
<script type="text/javascript">
Ext.onReady(function(){
var PANEL821 = new Ext.Panel({
autoHeight: true,
autoWidth: true,
id: "myPanel",
renderTo: "test2",
items: [
new Ext.Button({
handler: testHandler,
iconCls: "icon-save",
text: "Save Form",
dummy: true
})
],
dummy: true
});
function testHandler() {
//var b = document.getCmp('myWin');
var a = this.findParentByType('panel').id;
a = a.findParentByType('window').id;
Ext.Msg.alert('Test', a);
//new_order_form.form.findField('quantity2').setValue('12');
}
});
</script>
().add( b );
//addAfter( a, c );
//Ext.getCmp("new_order_form").doLayout();
}
</script>
--------------------------------------------------
From: "Arsalan Tariq Keen" <arsalk...@hotmail.com>
Sent: Wednesday, November 11, 2009 7:50 AM
To: "cf-talk" <cf-talk@houseoffusion.com>
Subject: Re: Ajax Query
>
> Attached is my code for the Parent window (order_new_form.cfm) and the
> child
> window (order_new_gridPrice.cfm).
>
> The code is lengthy and may seem filthy too...so I m summarising my
> goal....
> Initially a form is displayed in a parent window in which the user enters
> Article Number. The article number filed upon 'change' opens a child
> window
> in which I have to display a grid for further user selection. However to
> keep things simple for now I am just displaying a button which on click
> shall set the value of field quantity (to any arbitrary integer value for
> now) in the parent window and also then close the child form.
>
> Many thanks in advance!
>
> --------------------------------------------------
> From: "Tony Bentley" <t...@tonybentley.com>
> Sent: Wednesday, November 11, 2009 5:44 AM
> To: "cf-talk" <cf-talk@houseoffusion.com>
> Subject: Re: Ajax Query
>
>>
>> Sure, please provide some code.
>>
>>
>
>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Want to reach the ColdFusion community with something they want? Let them know
on the House of Fusion mailing lists
Archive:
http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:328241
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
