PDA

View Full Version : how to implement this code in extjs into coolite



jhenriquecosta
Feb 07, 2010, 10:57 PM
hi, sorry my poor english! im dificulty with form column.

how to implement code below in coolite!
http://blog.rkn.com.br/2009/11/form-override-criando-colunas-facilmente-extjs-3-0-x/


appreciate your help!

r_honey
Feb 08, 2010, 12:07 PM
Well, the page you posted is in a language I dont understand, but based on the image there: I think you would find this link useful:

http://examples1.ext.net/#/Form/FormPanel/Validation/

jhenriquecosta
Feb 08, 2010, 12:37 PM
sorry! im brazilian and my english is bad!

what I want is make the override below on coolite.

code:


Ext.override(Ext.form.FormPanel, {
vIconSpace: 20,
colSpace: 5,
labelWidth: 100,
ajustFields:function(ff){
Ext.each(ff.items, function(f, i){
if((f)&&(f.items)){
this.ajustFields(f); //MODIFICADO
}

var c1 = ff.items[i]; //Campo atual
var c2 = ff.items[i-1]; //Campo anterior

if(c1.col&&c2){
function confField(c){
c.labelWidth = Ext.num(c.labelWidth, this.labelWidth); //Largura do Label
c.vIconSpace = Ext.num(c.vIconSpace, this.vIconSpace); //Espaço após o campo
c.colSpace = Ext.num(c.colSpace, this.colSpace); //Espaço antes do campo
c.width = Ext.num(c.width, 100); //Largura padrão MODIFICADO
c.msgTarget = c.msgTarget || this.msgTarget || Ext.form.Field.prototype.msgTarget;
c.labelAlign = c.labelAlign || this.labelAlign;
}

function calcWidth(w){
var x = w.width;
x += (w.msgTarget == 'side' ? w.vIconSpace : 0);
x += 5;
x += (w.labelAlign == 'top' ? 0 : w.labelWidth);
return x;
}

function createItem(field){
return {
width: calcWidth.createDelegate(this)(field),
border: false,
layout: 'form',
labelWidth: field.labelWidth,
items: field
}
}

function addColum(c, field){
c.items.push(createItem(field))
}

if(c2.layout!=='hbox'){
confField.createDelegate(this)(c2);
c2 = {
xtype:'container',//MODIFICADO
layout:'hbox',
border:false,
items:[createItem(c2)]
}
}
confField.createDelegate(this)(c1);
c2.items[c2.items.length-1].width += c1.colSpace;
addColum(c2,c1);
c1 = c2;
c2 = 0;

ff.items[i] = c1;
ff.items[i-1] = c2;
}
delete c1;
delete c2;
},this)
if(Ext.isArray(ff.items)){
for(i in ff.items){
ff.items.remove(0);
}
}
},
createForm:Ext.form.FormPanel.prototype.createForm .createInterceptor(function() {
this.ajustFields(this);
})
})

fpw2377
Feb 08, 2010, 1:18 PM
Looks like this code is using an HBOX layout which is not available in coolite yet unless you have the professional version and can get access to the 1.0 code base, I know HBOX is in there. I made a small sample page and it looks like it might work if the layout is available although I don't know for sure since I don't have the v1 stuff. If you have the v1 relase and want to try, just paste that override code in a page with this from and try it out. All you have to do is add a custom config item named 'col' with a value of true to the field you want the break on.




<ext:FormPanel ID="FormPanel1" runat="server" BodyStyle="padding:5px;" ButtonAlign="Right"
Frame="true" Height="210" Title="Title" Width="600">
<Body>
<ext:FormLayout runat="server" LabelWidth="60">
<ext:Anchor>
<ext:TextField ID="TextField1" Width="195" runat="server" FieldLabel="Label1">
</ext:TextField>
</ext:Anchor>
<ext:Anchor>
<ext:TextField ID="TextField2" Width="195" runat="server" FieldLabel="Label2">
<CustomConfig>
<ext:ConfigItem Name="col" Value="true" Mode="Raw"></ext:ConfigItem>
</CustomConfig>
</ext:TextField>
</ext:Anchor>
<ext:Anchor>
<ext:TextField ID="TextField3" Width="490" runat="server" FieldLabel="Label3">
</ext:TextField>
</ext:Anchor>
</ext:FormLayout>
</Body>
<Buttons>
<ext:Button ID="Button1" runat="server" Icon="Disk" Text="Submit">
</ext:Button>
</Buttons>
</ext:FormPanel>

jhenriquecosta
Feb 08, 2010, 1:49 PM
thanks a lot!

it works fine!!!!!!

below source complete the solution!

code:


<ext:ScriptContainer ID="ScriptContainer1" runat="server" />

<script type="text/javascript">
Ext.override(Ext.form.FormPanel, {
ajustaFields: function(ff) {
Ext.each(ff.items, function(f, i) {
if ((f) &amp;&amp; (f.items)) {
this.ajustaFields(f);
}
if (f.col) {
f.labelWidth = (typeof f.labelWidth === 'number') ? f.labelWidth : this.labelWidth || 100;
f.space = (typeof f.space === 'number') ? f.space : 25;
f.paddingLeft = (typeof f.paddingLeft === 'number') ? f.paddingLeft : 5;

ff.items[i - 1].labelWidth = (typeof ff.items[i - 1].labelWidth === 'number') ? ff.items[i - 1].labelWidth : this.labelWidth || 100;
ff.items[i - 1].space = (typeof ff.items[i - 1].space === 'number') ? ff.items[i - 1].space : 25;
if (ff.items[i - 1].layout == 'column') {
ff.items[i - 1].items.push({
//columnWidth:1,
width: f.width ? f.width + 10 + (this.labelAlign == 'top' ? 0 : f.labelWidth) : f.width,
border: false,
layout: 'form',
labelWidth: f.labelWidth,
style: 'padding-left:5px;',
items: f
})
ff.items[i] = 0;
} else {
ff.items[i] = {
layout: 'column',
anchor: '100%',
border: false,
items: [{
//columnWidth:1,
width: ff.items[i - 1].width ? ff.items[i - 1].width + ff.items[i - 1].space + (this.labelAlign == 'top' ? 0 : ff.items[i - 1].labelWidth) : ff.items[i - 1].width,
border: false,
layout: 'form',
labelWidth: ff.items[i - 1].labelWidth,
items: ff.items[i - 1]
}, {
//columnWidth:1,
width: f.width ? f.width + f.space + 5 + (this.labelAlign == 'top' ? 0 : f.labelWidth) : f.width,
border: false,
layout: 'form',
labelWidth: f.labelWidth,
style: 'padding-left:' + f.paddingLeft + 'px;',
items: f
}]
}
ff.items[i - 1] = 0;
}

}
}, this)
for (i in ff.items) {
ff.items.remove(0);
}
},
createForm: Ext.form.FormPanel.prototype.createForm.createInte rceptor(function() {
this.ajustaFields(this);
}),
focusFirstEnabledField: function() {
var i = this.getFirstEnabledField();
if (i) {
i.focus(arguments);
}
return i;
},
getFirstEnabledField: function() {
var x = null;
Ext.each(this.form.items.items, function(i) {
if ((!i.hidden) &amp;&amp; (!i.disabled) &amp;&amp; (i.getXType() !== 'hidden')) {
x = i;
return false;
}
}, this)
return x;
}
})


</script>


<body>
<form id="form1" runat="server">
<ext:ScriptManager runat="server" ID="scriptMgr">
</ext:ScriptManager>

<ext:FormPanel ID="FormPanel1" runat="server" BodyStyle="padding:5px;" ButtonAlign="Right"
Frame="true" Height="210" Title="Title" Width="750">
<Body>
<ext:FormLayout ID="FormLayout1" runat="server" LabelWidth="60">
<ext:Anchor>
<ext:TextField ID="TextField1" Width="100" runat="server" FieldLabel="Label1">
</ext:TextField>
</ext:Anchor>
<ext:Anchor>
<ext:TextField ID="TextField2" Width="100" runat="server" FieldLabel="Label2">
<CustomConfig>
<ext:ConfigItem Name="col" Value="true" Mode="Raw"></ext:ConfigItem>
</CustomConfig>
</ext:TextField>
</ext:Anchor>
<ext:Anchor>
<ext:TextField ID="TextField4" Width="100" runat="server" FieldLabel="Label2">
<CustomConfig>
<ext:ConfigItem Name="col" Value="true" Mode="Raw"></ext:ConfigItem>
</CustomConfig>
</ext:TextField>
</ext:Anchor>
<ext:Anchor>
<ext:TextField ID="TextField3" Width="490" runat="server" FieldLabel="Label3">
</ext:TextField>
</ext:Anchor>
</ext:FormLayout>
</Body>
<Buttons>
<ext:Button ID="Button1" runat="server" Icon="Disk" Text="Submit">
</ext:Button>
</Buttons>
</ext:FormPanel>
</form>
</body>
</html>

geoffrey.mcgill
Feb 08, 2010, 2:16 PM
Hi,

Thanks for posting the completed sample. Looks cool.

Out of interests sake, the above <ext:FormPanel> could be coded as follows in the v1.0 build.

Example


<ext:FormPanel
runat="server"
Title="Example"
Padding="5"
Frame="true"
Height="210"
Width="750"
LabelWidth="60">
<Items>
<ext:TextField Width="100" runat="server" FieldLabel="Label1" />
<ext:TextField Width="100" runat="server" FieldLabel="Label2">
<CustomConfig>
<ext:ConfigItem Name="col" Value="true" Mode="Raw" />
</CustomConfig>
</ext:TextField>
<ext:TextField Width="100" runat="server" FieldLabel="Label3">
<CustomConfig>
<ext:ConfigItem Name="col" Value="true" Mode="Raw" />
</CustomConfig>
</ext:TextField>
<ext:TextField Width="490" runat="server" FieldLabel="Label4" />
</Items>
<Buttons>
<ext:Button runat="server" Icon="Disk" Text="Submit" />
</Buttons>
</ext:FormPanel>

geoffrey.mcgill
Feb 08, 2010, 2:18 PM
We're also working on a feature that might simplify the markup even further by eliminating some use of the CustomConfig objects. Here's a sample.

Example


<ext:FormPanel
runat="server"
Title="Example"
Padding="5"
Frame="true"
Height="210"
Width="750"
LabelWidth="60">
<Items>
<ext:TextField Width="100" runat="server" FieldLabel="Label1" />
<ext:TextField Width="100" runat="server" FieldLabel="Label2" Col="true" />
<ext:TextField Width="100" runat="server" FieldLabel="Label3" Col="true" />
<ext:TextField Width="490" runat="server" FieldLabel="Label4" />
</Items>
<Buttons>
<ext:Button runat="server" Icon="Disk" Text="Submit" />
</Buttons>
</ext:FormPanel>

r_honey
Feb 09, 2010, 5:43 AM
Am I missing something here? What does that extra col config item do??

fpw2377
Feb 09, 2010, 10:59 AM
The col is used by the form override method on the javascript side, from what I can tell, as the form is being created, this override code alters the layout of fields to use an HBox layout. The 'col' property defines the end of a row so if you have this:



<ext:TextField Width="100" runat="server" FieldLabel="Label1" />
<ext:TextField Width="100" runat="server" FieldLabel="Label2" Col="true" />
<ext:TextField Width="100" runat="server" FieldLabel="Label3" Col="true" />
<ext:TextField Width="490" runat="server" FieldLabel="Label4" />

the form will be rendered with 3 rows with label 1 and 2 on the same row, label 3 on a row and label 4 on a row.

This code will not work on 8.x though because we don't have the hbox layout yet. In the next release there will be two new layouts, Hbox and Vbox, here is the extjs docs on it:

http://www.extjs.com/deploy/dev/examples/layout/hbox.html

r_honey
Feb 09, 2010, 11:18 AM
Well, I have 1.0. But this config item does not make a difference. The form still renders with 4 rows..

fpw2377
Feb 09, 2010, 3:45 PM
Make sure you copy the javascript from above in your form too. Without it the override will not work.