PDA

View Full Version : Text field label as dynamic href?



amygrant
1 Nov 2007, 1:05 PM
I'm trying to make a simple account manager. I'm using fields such as username, first name, last name, city, email, etc...

I have my grid set up and fully working for adding, editing, and deleting users.

I am trying to figure out how I could a text field label a piece of dynamic HTML. Let's say the end-user uses the grid to pull up a list of accounts. The end-user then clicks on an account to go to the popup which allows for editing.

Currently, the form displays something like...

Username <input type="text" ... />


I'd like it to display

Username <a href="/login_history.php?userid=XXXX">login history</a> <input type="text" ... />


What I'm trying to do is make the field label include an HREF changes based upon the user id:
/login_history.php?userid=1234
/login_history.php?userid=0841
/login_history.php?userid=30492
etc...

However, I cannot find anything in any documentation that evidences this can be done. Is this simply something I can't do?

fay
2 Nov 2007, 2:53 AM
Are you actually talking about an Ext.form.TextField (http://extjs.com/deploy/ext/docs/output/Ext.form.TextField.html) or a cell/row in a grid?

If TextField, you can put any HTML in the fieldLabel:


form.add(new Ext.form.TextField({
fieldLabel: 'Username <a href="http://www.google.com">Login History</a>',
id:'username',
name: 'username',
width:275
}));

If grid (see http://extjs.com/deploy/ext/docs/output/Ext.grid.ColumnModel.html#config-renderer):


function renderTest(value, cell, row, rowIndex, colIndex, store){
return '<a href="http://www.google.com">Test</a>';
}

amygrant
2 Nov 2007, 7:05 AM
Sorry for not specifying, I am referring to a TextField. However, I need the link to be dynamic based on the data being displayed.


form.add(new Ext.form.TextField({
fieldLabel: 'Username <a href="http://www.something.com/history.php?userid=XXXX">Login History</a>',
id:'username',
name: 'username',
width:275
}));

In the code above, the link of http://www.something.com/history.php?userid=XXXX would change based on the current contact. So lets say we are viewing the data fields for contact 1234, then the link would be

http://www.something.com/history.php?userid=1234

The problem is, I cannot figure out how to change the link dynamically upon rendering. I know I can make the fieldLabel contain an HTML link, but how do I change the link based on the contact record being displayed?

fay
2 Nov 2007, 8:21 AM
I understand now Amy, and I think my original suggestion doesn't really work anyway. What about using a customised TriggerField. You could create a half-decent icon (as opposed to the one I've attached).


<style>
.x-login-history-trigger{
background: transparent url(./login.png) no-repeat scroll 0pt !important;
<!-- width: 40px !important; -->
}
</style>

<script>
var TestForm = function(){
return {
init: function(){
var form = new Ext.form.Form({});

var fldUsername = new Ext.form.TriggerField({
fieldLabel: 'Username',
id:'username',
name: 'username',
width:275,
triggerClass: 'x-login-history-trigger'
});
form.add(fldUsername);

fldUsername.onTriggerClick = function()
{
// Get the current user's id here and then do whatever you need to do, for example:
var UserId = ...;
window.location = 'http://www.something.com/history.php?userid=' + UserId;
};

form.render('test-form');
}
}
}();
Ext.onReady(TestForm.init, TestForm);
</script>

</head>

<body>
<div id="test-form"></div>
</body>
</html>