View Full Version : What is the recommended way to display read-only data in a panel ?

23 Jul 2010, 4:39 AM
I'm writing an database driven application (MySQL/PHP/ExtJS) based on the Extjs Web desktop example.

As you might expect we have forms, grids, and trees, etc for manipulating numerous json resultsets supplied by the PHP/MySQL backend.

However, one question keeps coming up: What is the best way to display read-only data when the focus is on one data entity? i.e. a single row of data where a grid is not appropriate, for example, viewing one customer (customer name, address, telephone, email, etc).

i.e. Label, value pairs:

Name: Joe Bloggs
Address: Someplace
Tel: 1234
email: [email protected]

I've tried using a Form in 'read-only' or disabled mode - simply because I can conveniently use the ..getForm().loadRecord(record) method to get the data on to the page. However it's a struggle to 'style' the form so as to not look like a form, since its not being used as one.

I've tried re-writing a panel's HTML content via the panel.body.update() method, but I find the method is often disabled within the layouts I'm using. Yes it works in isolation, but once inside a container's layout, I find I can't get handle on the body or the update method is "not a function"

Grateful for any suggestions?

23 Jul 2010, 5:02 AM
You could take a look at http://www.sencha.com/deploy/dev/docs/?class=Ext.form.DisplayField?class=Ext.form.DisplayField
Im using this to display data the way you want it.

23 Jul 2010, 5:37 AM
I think DisplayField is slightly limiting.

It should be configurable with a tpl config being an XTemplate (or XTemplate creation string) which specifies element layout and data tokens.

So that you can set the value to be an object.

Maybe you could have a go at that jsalisbury.

23 Jul 2010, 6:13 AM
You could use the code from this feature request (http://www.sencha.com/forum/showthread.php?62951-OPEN-640-DisplayField-to-be-able-to-format-data.).

23 Jul 2010, 7:44 AM
Have you considered templates? Here are some examples:


24 Jul 2010, 2:13 PM
(um....er....Looks like it's just me again, then).

I've perservered with the read-only form method, and have found that I can make a passable data display with a formpanel style config as follows...

xtype: 'form',
id: win.id + '_view_client_form',
style: {'padding': '15px', 'border': '0px'},
defaults: {
style: {
'background-image': 'none',
'background-color': 'rgb(245,245,245)',
border: 0,
width: 240
labelStyle: 'font-weight: bold;'
labelWidth: 180,
labelAlign: 'right',
height: 500,
width: 480,

xtype: 'textfield',
name: 'client_name',
fieldLabel: 'Client',
readOnly: true