PDA

View Full Version : Two Column Layout



gh0st26
1 Nov 2010, 5:13 PM
I have a question, How would you accomplish a 2-col layout in sencha touch?

in EXTJS i know there's a column layout but that doesn't appear to exist in touch... I have playied around with the HBox layout for awhile, but it just floats all the added items in one single row. I also tried to nest two 'fit' layouts inside but that doesn't seem to get the desired result either. The only thing I could think of is to add a bunch of HBox layouts to a VBox layout but that just seems a bit slow to me.... Any thoughts ?

BTW : What im basically trying to do is create a form that is laid out in two columns. 1-2 fields per col, with tons of rows...

aCa
5 Nov 2010, 4:26 AM
Did you figure this out? I'm curious about the same thing.

.jpg
5 Nov 2010, 6:09 AM
me too.

Animal
5 Nov 2010, 7:21 AM
hbox is the replacement.

Drop this into the sencha-touch/examples directory:



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" href="../resources/css/sencha-touch.css" type="text/css">
<title>Two columns</title>
<script type="text/javascript" src="../sencha-touch.js"></script>
<script type="text/javascript">
Ext.setup({
onReady: function() {
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
layout: 'hbox',
defaults: {
flex: 1
}
},
defaultType: 'container',
items: [{
items: [{
xtype: 'textfield',
fieldLabel: 'Textfield 1'
}, {
xtype: 'textfield',
fieldLabel: 'Textfield 2'
}]
}, {
items: [{
xtype: 'textfield',
fieldLabel: 'Textfield 3'
}, {
xtype: 'textfield',
fieldLabel: 'Textfield 4'
}]
}]
});
}
})
</script>
</head>
<body></body>
</html>

.jpg
5 Nov 2010, 9:24 AM
brilliant.

gh0st26
5 Nov 2010, 9:32 PM
Looks like i was on the right track at least, I didn't know about that "defaultType" property though!

Thank you!

aCa
8 Nov 2010, 6:38 AM
I have been trying to alter the code example to work with what I'm looking for, but so far no success.

I want to have a two column layout where I can swap both columns with swipe effect, when the user click a element from a DataView in one of my columns. I have tried to use card as a base layout and some vbox an hboxes nested within the card layout but I haven't managed to get it working. Any suggestions?

Animal
8 Nov 2010, 6:51 AM
You should be able to have a swipe listener on the main outer Container, and in the handler, loop through all the hbox Containers, switching round the two children of each.