PDA

View Full Version : Suggestions Required: Design View



rehanazher
10 Aug 2009, 11:18 PM
Dear Experts,

Please see the attached image[Existing Design.PNG (http://extjs.com/forum/attachment.php?attachmentid=15553&stc=1&d=1249973664)] for the existing design (simple HTML [table and checkboxes]):


This is a patch panel having multiple ports (each represented by a checkbox).
Ports already used are shown as disabled and checked.
Ports are arranged Horizontally
Each ports status is read from database.Now I need something similar. Looking for best possible panel to get the output. I have following in my mind but still unable to decide which should be better and will require less time to implement:


Grid Panel [in a Form] -> since this is a form that require to be submitted.
Table Layout in a windows having required number of columns and rows.
vBox for each row and Hbox for each column.
Looking forward for good responses.

Thanks and best regards,

Condor
11 Aug 2009, 12:11 AM
You're forgetting option 4: A CheckboxGroup.

But I would go for option 1 and write code to collect the data from the grid before submitting.

Animal
11 Aug 2009, 12:19 AM
A GridPanel might not work very well. Would that be with checkbox columns?

That's a complex and delicate user interface. In that old one, the checkboxes are very close together which might cause mistakes by the user.

If I were implementing that, I would probably come up with a custom solution based around a DataView in which individual ports were Records in the Store.

These would then be rendered as checkboxes by the DataView's XTemplate.

This would allow easy customization of spacing.

But also mousedown+drag selection of multiple nodes using the Ext.DataView.DragSelector plugin, and therefore a context menu for "Check selection"/"Uncheck selection" which I imagine would be a hit with users.

rehanazher
11 Aug 2009, 12:21 AM
Thanks for the reply Condor, I was thinking of the same

But I am confused on defining grid dynamically while I can have max. number of columns and checkboxes required on the grid.

Is it possible to define grid with no other data but only checkboxes.

Thanks Again

rehanazher
11 Aug 2009, 12:24 AM
Thanks Animal ,

I never thought of that with dataview I can have two different images i.e. one for used and other for non used can you direct me to some simple example for dataview with coding.


A GridPanel might not work very well. Would that be with checkbox columns?

That's a complex and delicate user interface. In that old one, the checkboxes are very close together which might cause mistakes by the user.

If I were implementing that, I would probably come up with a custom solution based around a DataView in which individual ports were Records in the Store.

These would then be rendered as checkboxes by the DataView's XTemplate.

This would allow easy customization of spacing.

But also mousedown+drag selection of multiple nodes using the Ext.DataView.DragSelector plugin, and therefore a context menu for "Check selection"/"Uncheck selection" which I imagine would be a hit with users.

Animal
11 Aug 2009, 12:35 AM
examples/view has some examples.

The concept is simple. You define a Store of Records. Each Record encapsulates info about a port.

The DataView uses an XTemplate to define a template of HTML into which data from each Record is injected.

You will use a block of HTML which is maybe a <div> encapsulating an <input type="checkbox"> and some of the data about the port to display the data flowing in whatever area the DataView occupies (I'm assuming it's part of a managed layout)

You can attach click handlers to perform any kind of extra processing on click.

I think it is the best solution for you.

rehanazher
11 Aug 2009, 12:45 AM
Thanks Again Animal,

I will need a little more guidance , going to implement DataView for the first time.
if below is my JSON Data response :

And i have already two variable holding max. columns in each row

how would I used below data:

{rows:
[
{"Port_No":"1","status":"1"},
{"Port_No":"2","status":"1"},
{"Port_No":"3","status":"0"},
{"Port_No":"4","status":"0"},
{"Port_No":"5","status":"0"},
{"Port_No":"6","status":"0"},
{"Port_No":"7","status":"0"},
{"Port_No":"8","status":"0"},
{"Port_No":"9","status":"1"},
{"Port_No":"10","status":"0"},
{"Port_No":"11","status":"0"},
{"Port_No":"12","status":"0"},
{"Port_No":"13","status":"0"},
{"Port_No":"14","status":"0"},
{"Port_No":"15","status":"1"},
{"Port_No":"16","status":"0"},
{"Port_No":"17","status":"0"},
{"Port_No":"18","status":"0"},
{"Port_No":"19","status":"0"},
{"Port_No":"20","status":"0"},
{"Port_No":"21","status":"0"},
{"Port_No":"22","status":"0"},
{"Port_No":"23","status":"0"},
{"Port_No":"24","status":"0"},
]}


Sorry for being dumb.

Animal
11 Aug 2009, 1:12 AM
Very simple.



// Define a Record constructor which will be used (not by us, by the Reader) to create port records
var PortRecord = Ext.data.Record.create([
{ name: 'portNo', type: 'int', mapping: 'Port_No'},
{ name: 'status', type: 'boolean', mapping: 'status'}
]);

var portStore = new Ext.data.Store({

// Reader has responsibility for creating an Array of records from the received Object
reader: new Ext.data.JsonReader({
root: 'rows'
}, PortRecord),

// The Proxy communicates with the server, and provides the object to the Reader
proxy: new Ext.data.HttpProxy({
url: 'The url from which you get that JSON'
})
});

var portView = new Ext.DataView({
store: portStore,
tpl: '<tpl for=".">' + // means loop through the Array of Record data
'<div class="port-info">' +
'<input type="checkbox" name="port{portNo}" checked="{status}">' +
'</div>' +
'</tpl>',
itemSelector: 'div.port-info'
});


That's enough to get you started. If I write your app


I'd have to killcharge you!
You'd never learn anything.

rehanazher
11 Aug 2009, 1:16 AM
Thanks Animal ,

That should be enough I was confuse how use XTemplate, was just watching a screen cast for the same.

Thanks I would love to share screen shot of this form with you when completed.

Thanks Again.