I am facing problem in adding text area to container dynamically.
Initial creation of container:
xtype: 'container',
layout: 'form',
width: 400,
ref: 'form',
layoutConfig: {
labelSeparator: ' ',
trackLabels: true
},
items: [{
xtype: 'textarea',
value: 'test',
fieldLabel: 'label',
anchor: '100%',
submitValue: false,
readOnly: true,
ref: '../field_1',
id: 'field_1'
}]
}
Dynamic code:
for (i = 4; i < obj.length; i++) {
var id = i + 12;
id = 'field_' + id;
var field = newTextArea(id);
field.setValue(obj[i].value);
field.setVisible(true);
this.form.add(field);
}
Function to create text area:
function newTextArea(id) {
var text_Area = new Ext.form.TextArea({
fieldLabel: 'Test',
height: 30,
width: 250,
submitValue: false,
readOnly: true,
autoScroll: true,
id: id
});
return text_Area;
}
Problem:
When i debug and see form, textarea is added in form items but its not displayed in the browser. Can someone suggest what to do?
Regards,
Raj
Check this simple fiddle.
Not sure what is wrong with your code, you dont mention what is obj and I think that this.form is wrong reference to the container. I think you can to use Ext.ComponentQuery.query or something similar (like up and down methods for queryable components).
In extjs 3.x, you have to call doLayout after adding items to a container.
for (i = 4; i < obj.length; i++) {
var id = i + 12;
id = 'field_' + id;
var field = newTextArea(id);
field.setValue(obj[i].value);
field.setVisible(true);
this.form.add(field);
}
this.form.doLayout();
Related
I have a tabulator table with many items, and moving a row outside the displayed range of rows involves a number of steps (moving, dropping, scrolling, then moving again, etc.)
Has anyone come up with a method to scroll the table when the user drags a row above or below the displayed range? Here is a gif and a JSFiddle which demonstrates the problem.
https://jsfiddle.net/sunny001/puqwemnf/5/
const data = [];
for (let i = 0; i < 10000; i++){
data.push({id: i, name: 'name' + i})
}
const table = new Tabulator('#table', {
height: 400,
data: data,
movableRows: true,
columns: [
{
rowHandle: true,
formatter: "handle",
headerSort: false,
frozen: true,
width: 30,
minWidth: 30
},
{field: 'id', title: 'id'},
{field: 'name', title: 'name'}
],
selectable: true
})
I'm trying to implement a tpl within a displayfield to display a list of data sent to the server from a textarea.
The same data is displayed in a grid with rowexpander plugin (display values in XTemplate like textarea format)
Fiddle: https://fiddle.sencha.com/#fiddle/14sf
I tried something like this:
FIDDLE: https://fiddle.sencha.com/#fiddle/14t7
without sucess...
I tried every way I found to render a tpl unsuccessfully.
Display has a config tpl but it seems not work in my case...
I appreciate suggestions for resolving this issue
The displayfield also has renderer function. You can use it as in your grid:
//var is just for illustration of the issue
var vegetables_types = 'potatos\ncarrots\npumpkins';
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 450,
height: 200,
bodyPadding: 10,
title: 'Template',
items: [{
xtype: 'displayfield',
fieldLabel: 'TPL',
name: 'vegetables_types',
renderer: function(value, field) {
this.rndTpl = this.rndTpl || new Ext.XTemplate('<div><div>' + '<b>Vegetables: </b><ul><li>{[values.vegetables_types.replace(/\\n/g, "<li/>")]}</li><ul>' + '</div></div>');
return this.rndTpl.apply({
vegetables_types: value
});
},
listeners: {
render: function(field, eOpts) {
field.setValue('potatos\ncarrots\npumpkins')
}
}
}],
});
https://fiddle.sencha.com/#fiddle/14il
I've got an application that is heavy on field usage. I noticed that adding new fields can be fairly expensive, even when using suspend/resumelayouts. Observing the timeline in Chrome, I can see quite a lot of recalculation of styles and forced layouts (seems like one per fields) for the panel div.
The code below is a simple representation of what I'm doing.
util = {
createTextField: function(myItemId) {
return Ext.create('Ext.form.field.Text', {
fieldLabel: 'Field' + myItemId + ':',
name: 'field',
itemId: myItemId,
autofocus: true,
enableKeyEvents: true,
labelAlign: 'left',
labelWidth: 50,
labelStyle: 'font-size: 16px;',
width: 500
});
}
}
Ext.onReady(function() {
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
for(i=0; i<100; i++)
{
Ext.suspendLayouts();
formPanel.add(util.createTextField(i));
Ext.resumeLayouts(true);
}
}
});
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
height: 600,
bodyPadding: 5,
autoScroll: true,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90
}});
formPanel.render('form-ct');
});
The page itself is fairly straightforward:
<body>
<div id="form-ct"></div>
</body>
Right now pressing the button takes roughly ~2 seconds in Chrome and almost 4 in IE11. My question is whether this can be somehow optimized. Note that the fields must be rendered dynamically. I'm using ExtJS 4.1.
Start with moving suspendLayout/resumeLayout pair outside of the loop:
Ext.suspendLayouts();
for(i=0; i<100; i++)
{
formPanel.add(util.createTextField(i));
}
Ext.resumeLayouts(true);
Calling these inside the loop basically defeats the whole purpose of suspending layouts because you are forcing a relayout no less than 100 times in a row.
The add method is firing two events, add and beforeadd. You can instead using an array with components to add all at ones. Besides that you can use defaults and defaultType, but that will not do much I guess.
util = {
createTextField: function(myItemId) {
return Ext.create('Ext.form.field.Text', {
fieldLabel: 'Field' + myItemId + ':',
name: 'field' + myItemId // names are unique, we will use this to query components
});
}
}
Ext.onReady(function() {
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
// array to hold all components
var components = new Array();
// optimize the for loop and introduce y
for(var i = 0, y = 100; i < y; i++)
components.push(util.createTextField(i));
// add all components at ones to prevent multiple events fired
Ext.suspendLayouts();
formPanel.add(components);
Ext.resumeLayouts(true);
}
});
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
height: 600,
bodyPadding: 5,
autoScroll: true,
// use defaultType and defaults to clean the code
defaultTypes: 'textfield',
defaults: {
autofocus: true,
enableKeyEvents: true, // this is heavy, consider if it is required
labelAlign: 'left',
labelWidth: 50,
labelStyle: 'font-size: 16px;',
width: 500
}
});
formPanel.render('form-ct');
});
I want to add buttons in one of columns in the grid. I try this code
listeners: {
render: {
fn: function(kad_tab){
var view = kad_tab.getView();
for (var i = 0; i < store.getCount(); i++) {
var cell = Ext.fly(view.getCell(i, 2));
new Ext.Button({
handler: function(){
alert('Suppression')
},
renderTo: cell.child(".btn"),
text: 'Supprimer'
});
}
},
// delay: 200
}
}
{header: "", width: 70, dataIndex: '', renderer: function(){ return '<div class="btn" style="height: 11px; width: 60px"></div>';}}
But firebug says that he see error here Ext.fly(this.getRow(c)) is null.
if i use delay: 200. There is no errors in firebug but dont see a buttons in column.
What im doing wrong?
I found a simple way...
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon : url_servlet+'externals/gxp/src/theme/img/pencil.png',
tooltip: 'Button click',
handler: function(grid, rowIndex, colIndex) {
alert("DAMACIA!!!!!");
}
}]
}
This code is working in Extjs 4.0.2a
but when converted to 4.1 it no longer works and gives an error
Uncaught TypeError: Cannot call method 'query' of undefined
Ext.onReady(function() {
var panel = new Ext.Panel({
renderTo: divtag,
draggable: {
insertProxy: false,
onDrag: function(e) {
var el = this.proxy.getEl();
this.x = el.getLeft(true);
this.y = el.getTop(true);
},
endDrag: function(e) {
this.panel.setPosition(this.x, this.y);
}
},
title: 'Panel',
width: 200,
height: 100,
x: 20,
y: 20
});
});
Apparently there is a bug in this version of Ext. It wont work even if you try default D'n'D for panel like this:
Ext.onReady(function() {
var panel = new Ext.Panel({
renderTo: 'divtag',
draggable: true,
title: 'Panel',
width: 200,
height:100,
x: 20,
y: 20
}); //panel.show(); });
});
I menage to patch the code to work the way you want it, this code should work:
Ext.onReady(function() {
var panel = new Ext.Panel({
renderTo: 'divtag',
draggable: {
insertProxy: false,
onDrag: function(e) {
var el = this.proxy.getEl();
this.x = el.getX();
this.y = el.getY();
},
endDrag: function(e) {
panel.setPosition(this.x,this.y);
},
alignElWithMouse: function() {
panel.dd.superclass.superclass.alignElWithMouse.apply(panel.dd, arguments);
this.proxy.sync();
}
},
title: 'Panel',
width: 200,
height:100,
x: 20,
y: 20
}); //panel.show(); });
});
As a side note I should probably advice you not to do this anyway, because you can define your own DD for panel that you can use, and even better Ext already have one defined, so you can just override Ext panel to use default Ext.util.ComponentDragger, or in code, I advice you to do this:
Ext.override(Ext.panel.Panel, {
initDraggable: function() {
var me = this,
ddConfig;
if (!me.header) {
me.updateHeader(true);
}
if (me.header) {
ddConfig = Ext.applyIf({
el: me.el,
delegate: '#' + me.header.id
}, me.draggable);
// Add extra configs if Window is specified to be constrained
if (me.constrain || me.constrainHeader) {
ddConfig.constrain = me.constrain;
ddConfig.constrainDelegate = me.constrainHeader;
ddConfig.constrainTo = me.constrainTo || me.container;
}
me.dd = Ext.create('Ext.util.ComponentDragger', this, ddConfig);
me.relayEvents(me.dd, ['dragstart', 'drag', 'dragend']);
}
}
});
var panel = Ext.create('Ext.panel.Panel', {
id: 'test',
renderTo: 'divtag',
draggable: true,
floating: true,
title: 'Panel',
width: 200,
height:100,
x: 20,
y: 20
});
Code for a initDraggable function in panel override is taken from current stable version of Ext.window.Window.initDraggable method.
I was able to get it working in 4.1: you have to add quotes around the id of the renderTo element, like:
renderTo : 'divtag',
Without quotes it was looking for an undefined variable named divtag.
Once I ran that I got no errors, and then I just did panel.show() to render it.
Just a suggestion: a Window component is a specialized Panel that has a floating mixin - might be all you need.