Printable View
Hi all,
I want to render a form panel in the tree data row, how to a do this......when i use append and add normal HTML it goes pretty wll, but when i try to render a component in it , the operations fails.....
so could any one guide me as to how do i insert/render a form panel inside treeprow.
Thanks in Advance,
I have not tried this. You might be able to create columns and do something like this:
http://www.djengineer.com/ExtJSExamp...nelEditor.html
Scott.
Have a look at my component: Its.grid.column.Component. It allows you to render components in grid cells. Below is an example to use this component to render forms along with other components in grid cells.
Code:Ext.require([
'Ext.picker.*',
'Ext.form.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*',
'Ext.chart.*',
'Ext.chart.axis.Gauge',
'Ext.chart.series.*',
'Its.grid.column.Component'
]);
Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
fields:['taskname', 'status', 'done', 'assignTo', 'dep', 'date', {name:'qty', type: 'int'}],
data:[
{taskname:"Task 1", status:1, done: 10, assignTo:"Scott", dep:"Manangement", date: '2012-01-01', qty:20},
{taskname:"Task 2", status:2, done: 30, assignTo:"John", dep:"Sales", date: '2012-01-12', qty:35},
{taskname:"Task 3", status:2, done: 50, assignTo:"Smith", dep:"Accounting", date: '2012-01-21', qty:12},
{taskname:"Task 4", status:3, done: 70, assignTo:"Smith", dep:"Accounting", date: '2012-01-05', qty:51}
]
});
Ext.create('Ext.grid.Panel', {
title: 'Component Column Demo',
name : 'task',
store: store,
width: 1200,
height: 950,
renderTo: Ext.getBody(),
columns: [{
text: 'Task name',
flex: 1,
dataIndex: 'taskname'
},{ // chart column
xtype: 'itscomponentcolumn',
text : 'Chart',
width: 200,
dataIndex: 'done',
items: function(value) {
return {
xtype: 'chart',
width: 200,
height: 150,
style: 'background:#fff',
animate: {
easing: 'elasticIn',
duration: 1000
},
store: Ext.create('Ext.data.Store', {
fields: ['gauge'],
data : [{gauge: value}]
}),
insetPadding: 25,
flex: 1,
axes: [{
type: 'gauge',
position: 'gauge',
minimum: 0,
maximum: 100,
steps: 10,
margin: -10
}],
series: [{
type: 'gauge',
value: value,
field: 'gauge',
donut: false,
colorSet: ['#F49D10', '#ddd']
}]
}
}
},{ // column with a combobox
xtype: 'itscomponentcolumn',
text : 'Combobox',
name : 'status',
width: 160,
dataIndex: 'status',
items: function(value) {
return {
xtype: 'combobox',
store: [[1,'In Queue'], [2,'Handling'], [3,'Complete']],
value: value,
width: 130
};
}
},{ // column with a spinner
xtype: 'itscomponentcolumn',
text : 'Spinner',
width: 50,
dataIndex: 'qty',
items: function(value) {
return {
xtype: 'spinnerfield',
value: value,
width: 25
};
}
},{ // column with date picker
xtype: 'itscomponentcolumn',
text : 'Date picker',
dataIndex: 'date',
width: 200,
items: function(value) {
return {
xtype: 'datepicker',
width: 190,
value: new Date(value)
};
}
},{ // column with checkboxes
xtype: 'itscomponentcolumn',
text : 'Checkbox',
defaultType: 'checkboxfield',
items: [{
boxLabel : 'Anchovies',
name : 'topping',
inputValue: '1',
}, {
boxLabel : 'Artichoke Hearts',
name : 'topping',
inputValue: '2',
checked : true,
}, {
boxLabel : 'Bacon',
name : 'topping',
inputValue: '3',
}]
},{ // column with two buttons
xtype: 'itscomponentcolumn',
text : 'Buttons',
align: 'center',
width: 60,
name : 'action',
sortable: false,
defaults: { // default configs applied for all items
xtype: 'button',
width: 'auto'
},
items: [{
iconCls: 'icon-modify',
action : 'modify',
tooltip: 'Modify this task'
},{
iconCls: 'icon-delete',
action : 'delete',
tooltip: 'Delete this task'
}]
},{ //
xtype: 'itscomponentcolumn',
text : 'Form',
align: 'center',
width: 210,
items: [{
xtype: 'form',
width: 200,
height: 100,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
// Reset and Submit buttons
buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}]
}]
}]
});
});