Changing length, width, size of domino fields

[Phil Randolph]

I'm having trouble with getting Ext.nd to recognize my attempts to modify the sizes of both dialog list fields and date/time fields when they render. I've been successful getting plain text fields to acknowledge my size adjustments, by adding something like width="300px" to the Style field on the HTML tab of the field properties, but neither doing that or putting something similar in the HTML Attibutes item seem to be recognized.

Can anyone help here? Thanks!

[jratcliff]

Instead of

width="300px"

Try:

width:300px;

[dot.Scott]

With Ext as part of init function



var fieldNameVar = new Ext.form.TextArea({
id : 'FieldName',
emptyText: 'Please enter something',
disabled : false,
height: 23,
allowBlank : false,
width : 250,
applyTo: 'FieldName'
});

[RWaters]

With Ext as part of init function



var fieldNameVar = new Ext.form.TextArea({
id : 'FieldName',
emptyText: 'Please enter something',
disabled : false,
height: 23,
allowBlank : false,
width : 250,
applyTo: 'FieldName'
});

Yeah, the problem is that Ext.nd automatically converts over fields that Notes generates. We don't really have access to the config parameters.

[Phil Randolph]

Instead of

width="300px"

Try:

width:300px;

I tried your change Jack, and it had no effect on the rendered Ext.nd-ized field. I can see that the size change is acknowledge briefly when it is pre-rendered for a split second, but it shrinks back down to the 'default?' size when the rendering kicks in.

And again, the regular text fields do acknowledge the size modifications, just not more specialized field types.

[jratcliff]

And again, the regular text fields do acknowledge the size modifications, just not more specialized field types.

Which specialized field types do not work? I've tried this on date/time fields and dialoglist fields and it worked for me.

[Phil Randolph]

It is both date/time fields and dialoglist fields in which I have this behavior. Before the Ext re-rendering kicks in they show the size difference, then they shift down to the smaller size when the rest of the ext changes take hold.

[aravinduvce]

hi,

actually we are using toolbar over a grid which comprises two buttons.when minimising the page the the portions of the toolbar is gettiing out of the page and not visible . so i need an idea to view the toolbar on reducing the size . as there is no margin-right option in style property in which way i can do it?



code employed


function createToolbar()
{

menubtnGlobalSettings = new Ext.Toolbar.Button({
text:"Global Settings",
minWidth:70});

menubtnEditPort = new Ext.Toolbar.Button({
text:"Edit",
minWidth:70});

toolbarInterface = new Ext.Toolbar({
style:{
"margin-left":"84.8%",
"margin-top":"4%"
},
items:[ menubtnGlobalSettings,menubtnEditPort ]
});

panel.add(toolbarInterface);
};

[mth96a]

how can we change the width? Please!!!

[jratcliff]

Hmm, I was wrong. Setting width:n in the style area of a field in designer doesn't do anything for comboboxes. It works for other fields though so I'll look at our code to see what's going on there.

[mth96a]

i can post a template of the web desktop running on domino with logout and custom apps running if that would help get me the answers! I need the combo box width even if i have to change extnd.js, thanks

[RWaters]

Here's an override that should work for now, we'll provide this in the next release. It looks for the html width attribute or a width set via style, currently you have to specify the width in px since this is all that Ext supports for fields.



Ext.override(Ext.nd.Form, {
convertSelectToComboBox : function(el) {
var w = (el.attributes.width) ? el.attributes.width.value : el.style.width || '150';
w = parseInt(w.split('px')[0]);
var cb = new Ext.form.ComboBox({
typeAhead : true,
triggerAction : 'all',
transform : el,
forceSelection : true,
resizable: true,
width: w
});

// only setup domino's onchange event for keyword refreshes if the user wants this
// domino will do a postback to the server which may not be desired
if (this.applyDominoKeywordRefresh) {
// if domino sends an onchange attribute then grab it so we can later add it to the onSelect event of ComboBox
var attr = el.attributes;
if (attr) {
var onChange = attr['onchange'];
if (onChange) {
var sOnChange = onChange.nodeValue;
var extcallback = function(bleh) { eval(bleh);}.createCallback(sOnChange);
}
}

// to fix a bug with DomHelper not liking domino sometimes wrapping a SELECT within a FONT tag
// we need to handle setting the value of the hiddenField ourselves
var value = (cb.getValue()) ? cb.getValue() : cb.getRawValue();
var field = Ext.get(cb.hiddenName);
field.dom.value = value;

// we must also define a listener to change the value of the hidden field when the selection in the combobox changes
cb.on('select',function(){
/* value is the selection value if set, otherwise is the raw typed text */
var value = (this.getValue()) ? this.getValue() : this.getRawValue();
var field = Ext.get(this.hiddenName);
field.dom.value = value;
if (typeof extcallback == 'function') {
Ext.MessageBox.wait("Refreshing document...");
extcallback();
}
});
} // end if (this.applyDominoKeywordRefresh)
} // end convertSelectToComboBox
});

[mth96a]

I am not sure how to make this work, sorry

[RWaters]

toss it in the JS Header of your form, above any Ext.onReady calls you have.

[mth96a]

var ExtndApp = function() {
return {
init : function(){
var frm = new Ext.nd.Form();
frm.render();
Ext.override(Ext.nd.Form, {
convertSelectToComboBox : function(el) {
var w = (el.attributes.width) ? el.attributes.width.value : el.style.width || '250';
w = parseInt(w.split('px')[0]);
var cb = new Ext.form.ComboBox({
typeAhead : true,
triggerAction : 'all',
transform : el,
forceSelection : true,
resizable: true,
width: w
});

// only setup domino's onchange event for keyword refreshes if the user wants this
// domino will do a postback to the server which may not be desired
if (this.applyDominoKeywordRefresh) {
// if domino sends an onchange attribute then grab it so we can later add it to the onSelect event of ComboBox
var attr = el.attributes;
if (attr) {
var onChange = attr['onchange'];
if (onChange) {
var sOnChange = onChange.nodeValue;
var extcallback = function(bleh) { eval(bleh);}.createCallback(sOnChange);
}
}

// to fix a bug with DomHelper not liking domino sometimes wrapping a SELECT within a FONT tag
// we need to handle setting the value of the hiddenField ourselves
var value = (cb.getValue()) ? cb.getValue() : cb.getRawValue();
var field = Ext.get(cb.hiddenName);
field.dom.value = value;

// we must also define a listener to change the value of the hidden field when the selection in the combobox changes
cb.on('select',function(){
/* value is the selection value if set, otherwise is the raw typed text */
var value = (this.getValue()) ? this.getValue() : this.getRawValue();
var field = Ext.get(this.hiddenName);
field.dom.value = value;
if (typeof extcallback == 'function') {
Ext.MessageBox.wait("Refreshing document...");
extcallback();
}
});
} // end if (this.applyDominoKeywordRefresh)
} // end convertSelectToComboBox
})
} // init
} // return
}();



Ext.onReady(ExtndApp.init, ExtndApp, true);

[RWaters]

Outside of the onReady call:


Ext.override(Ext.nd.Form, {
convertSelectToComboBox : function(el) {
var w = (el.attributes.width) ? el.attributes.width.value : el.style.width || '250';
w = parseInt(w.split('px')[0]);
var cb = new Ext.form.ComboBox({
typeAhead : true,
triggerAction : 'all',
transform : el,
forceSelection : true,
resizable: true,
width: w
});

// only setup domino's onchange event for keyword refreshes if the user wants this
// domino will do a postback to the server which may not be desired
if (this.applyDominoKeywordRefresh) {
// if domino sends an onchange attribute then grab it so we can later add it to the onSelect event of ComboBox
var attr = el.attributes;
if (attr) {
var onChange = attr['onchange'];
if (onChange) {
var sOnChange = onChange.nodeValue;
var extcallback = function(bleh) { eval(bleh);}.createCallback(sOnChange);
}
}

// to fix a bug with DomHelper not liking domino sometimes wrapping a SELECT within a FONT tag
// we need to handle setting the value of the hiddenField ourselves
var value = (cb.getValue()) ? cb.getValue() : cb.getRawValue();
var field = Ext.get(cb.hiddenName);
field.dom.value = value;

// we must also define a listener to change the value of the hidden field when the selection in the combobox changes
cb.on('select',function(){
/* value is the selection value if set, otherwise is the raw typed text */
var value = (this.getValue()) ? this.getValue() : this.getRawValue();
var field = Ext.get(this.hiddenName);
field.dom.value = value;
if (typeof extcallback == 'function') {
Ext.MessageBox.wait("Refreshing document...");
extcallback();
}
});
} // end if (this.applyDominoKeywordRefresh)
} // end convertSelectToComboBox
});

var ExtndApp = function() {
return {
init : function(){
var frm = new Ext.nd.Form();
frm.render();
var frm2= window.document.forms[0];
frm2.corrected.minListWidth ="200"



var fieldNameVar = new Ext.form.TextArea({
id : 'observation',
width : 250,
applyTo: 'observation'
});
} // init
} // return
}();
Ext.onReady(ExtndApp.init, ExtndApp, true);

[mth96a]

this app is extnd alpha 2, does it need to be beta 1?

[RWaters]

alpha 2 code is quite old (6-7 months?), It very well may not work.

[mth96a]

Changed and pointed it to extnd beta one code, works great now.

[RWaters]

Glad to hear it. We've made our best efforts to keep upgrading simple.

[mth96a]

if you change the combobox option in IE this refreshing forever, maybe it is supposed to, though it does not in firefox, Man i love firefox!

if (typeof extcallback == 'function') {
Ext.MessageBox.wait("Refreshing document...");
extcallback();
}


Also i did something to my form to make it say form proccessed, i fixed it with a $$return field, is something different in extnd beta1?

[RWaters]

Currently we don't provide any special form processing, you still need to use $$return or print from a webquery save agent.