PDA

View Full Version : place component created in the form of rows and columns



Sawan Samal
31 Mar 2014, 1:49 AM
Hi everyone,
I want to take from the user no. of rows and no. of columns.Then as per that i want to display my component.
for ex:row=2
col=3
then 6 components will be displayed with 3 components in 2 rows.



function function1()
{
var i=0;
var j=0;
var menu;
Ext.define("MyWidget",{
extend:'Ext.draw.Component',
initComponent:function(){
{
this.callParent();
}
}});
alert("hi");


var psv = new Ext.FormPanel({
renderTo:Ext.getBody(),
labelWidth: 125,
frame: true,
bodyStyle:'padding:5px 5px 0',
width: 350,


defaultType: 'textfield',
items: [{
fieldLabel:'Enter rows:',


id: 'row'
},{fieldLabel: 'enter columns:',


id: 'column'}],
buttons: [{
text: 'Save',
handler: function()
{
//var h = Ext.get('tx_pmtree_pi1[probeSuggestion]');
var row = psv.items.get('row').getValue();
var col=psv.items.get('column').getValue();
var pp=0;
var sprite;
var k=0;

for(var ii=0;ii<row;ii++)
{
for(var jj=0;jj<col;jj++)
{
Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
width: 200,
height: 200,
items: [{
type: "path",
path: "M150 0 L180 50 L150 100 L250 100 L280 50 L250 0 Z ",

fill: "purple"
}]
});
}



}

}
}]
});
}

But the above code cant put components in the form of rows and columns.please tell me the algorithm to do this task.
if possible give some code snippets.

Farish
31 Mar 2014, 3:33 AM
one you have received the input from the user, create a panel with table layout (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.layout.container.Table) (take a look at the example code). Enter the number of columns in your layout's 'columns' config. then add your components to this panel. they should arrange themselves as you want e.g. if you have columns: 2 and you add 3 components, the first 2 will be in 1st row and 3rd will be in 2nd row.