First of all, I have about 1000-1500 records and I need to show them in a grid in custom style. But, first row has to contain checkbox and a form(combo,textfield), which is below that checkbox.
Similar to:
row1: checkbox
combo, textfield, textfield
row2: checkbox
combo, textfield, textfield
...
So, I could not use grid for this approach(Because I have to use 'colum render function' to each row and it causes re-render whole grid again even if change one row).
That's why I tried to add each component to a panel dynamically. But the main problem is that whenever I add the components to the panel, it takes too long . For example, it takes 4.5 s for only 100 records. I can't even imagine how long would it take for 1500 records.
Please check this fiddle. You will understand the exact problem. please do not forget the check console.time:
https://fiddle.sencha.com/#fiddle/13g0
And sample codes:
console.time('FakeGrid');
Ext.suspendLayouts();
var fakeGrid = Ext.create('Ext.panel.Panel', {
title: 'Fake grid Panel',
renderTo: Ext.getBody(),
});
var records = [];
for(var i=0; i < 10; i++) {
records.push({
id: 'Check'+ i,
reg: 'Reg' + i
})
}
Ext.each(records, function(rec) {
var regionPanel = {
xtype: 'fieldset',
collapsible: true,
border: false,
title: rec.reg,
layout: 'vbox',
items: []
};
Ext.each(records, function(rec) {
var hBoxPanel = {
xtype: 'panel',
layout: 'hbox',
items: [{
xtype: 'checkbox',
boxLabel: rec.id
}]
};
var fakeSubPanel = Ext.create('Ext.panel.Panel', {
layout: 'hbox',
items: [{
xtype: 'combobox',
fieldLabel: 'Combo'
}, {
xtype: 'textfield',
fieldLabel: 'field1'
}, {
xtype: 'textfield',
fieldLabel: 'field2'
}]
});
var sitePanel = {
xtype: 'panel',
layout: 'vbox',
//margin: '5 0 0 31',
items: [hBoxPanel, fakeSubPanel]
};
regionPanel.items.push(sitePanel);
}); //Ext.each
fakeGrid.add(regionPanel);
}); //Ext.each
Ext.resumeLayouts(true);
console.timeEnd('FakeGrid');
If you have any suggestion, please enlight me with your ideas. Thank you so much!
Related
I am using an EXTJS xtype: container to create a row and when I want to insert a row into the store the row gets added to the top of the existing row instead of the bottom, is there any way to add the newly created row to the bottom?
Below is the code:
somefunc: function (token, filter, op) {
var filter = Ext.create({
xtype: 'container',
height: 30,
cls: 'purge-filter-item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [
this.typeCombo = new Ext.form.ComboBox({
emptyText: $L('Select a filter...'),
store: this.menuStore = new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: this.getFilterValues()
})
})
]
});
this.insert(0, filter);
this.doLayout();
return filter;
}
Any idea why this could be happening and how to fix this?
Any idea why this could be happening and how to fix this?
Because you are using insert() method instead of this you can use add() method it will by default add in last index.
In this FIDDLE, I have created a demo using add() method to adding new component. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
title: 'Add new row',
renderTo: Ext.getBody(),
tbar: [{
text: 'Add new',
handler: function (btn) {
var panel = btn.up('panel');
panel.add({
xtype: 'container',
height: 30,
cls: 'purge-filter-item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [{
xtype: 'textfield',
emptyText:'enter value here',
fieldLabel:'this is field '+( panel.items.items.length+1)
}]
});
}
}]
})
}
});
i need to add a button to the column header besides the filters menu (like the blue mark on the photo)
A little hack like this could work. Just get the layout aligned to show content in left and right most parts of Container.
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
items: [{
xtype: 'grid',
sortable: true,
columns: [{
flex: 1
}, {
text: "Age",
flex: 1
}],
listeners: {
afterrender: function (grid) {
var columns = grid.columnManager.getColumns();
var nameCol = columns[0];
var targetDom = nameCol.textInnerEl.dom;
var newPanel = Ext.create('Ext.container.Container', {
items: [{
xtype: 'label',
text: "Name"
}, {
xtype: 'button',
text: "DO IT"
}],
renderTo: targetDom
});
}
}
}]
}]
});
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/29o8
I'd like to achieve this behavior:
If a field (combo, text, date ...) in a form panel has a custom property set true
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'Name',
customProp: true
},
then add a button or other components behind the actual component. Writen in json it would look like this:
{
xtype: 'container',
margin: '0 0 8 0',
layout: 'hbox',
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'Name',
},
{
xtype: 'button',
text: 'xxx',
tooltip: 'I\'m a custom tooltip'
}
]
}
I'm wondering how i could achieve this. Is this even possible ?
It is.
Ext.require('*');
Ext.onReady(function() {
var form = new Ext.form.Panel({
renderTo: document.body,
width: 400,
height: 100,
items: {
xtype: 'textfield',
fieldLabel: 'Foo'
}
});
setTimeout(function() {
var field = form.down('textfield');
// We have a reference to the field, let's go!
var owner = field.ownerCt;
owner.remove(field, false);
owner.add({
xtype: 'container',
layout: 'hbox',
items: [field, {
xtype: 'button',
text: 'Foo'
}]
});
}, 1000);
});
Where container is a reference to the container with the hbox layout.
I need to make an app that shows a form in a window on one screen and the main window with part of the same form - or is this is'n possible another form - on the other screen. Is this possible with ExtJs ? How ? Has anyone seen an example or perhaps an extension that does such ?
You can use a 'card' layout inside your form.
In the following example, the user sees three different pages, the first two pages have fields and the last one a button.
Clicking on the button retrieves the values from the fields. It doesn't matter that the fields are in different containers, as long as these containers are 'descendants' of the form.
Ext.application({
name : 'MyApp',
launch : function() {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
layout:'card',
activeItem: 0,
bbar: [{
text: '« Previous',
handler: function(button) {
var cardlayout = button.up('form').getLayout();
var prev = cardlayout.getPrev();
if (prev) {
cardlayout.setActiveItem(prev);
}
}
},{
text: 'Next »',
handler: function(button) {
var cardlayout = button.up('form').getLayout();
var next = cardlayout.getNext();
if (next) {
cardlayout.setActiveItem(next);
}
}
}],
items: [{
xtype: 'container',
items: [{
xtype: 'textfield',
fieldLabel: 'First name',
name: 'firstName'
}]
},{
xtype: 'container',
items: [{
xtype: 'textfield',
fieldLabel: 'Last name',
name: 'lastName'
}]
},{
xtype: 'container',
items: [{
xtype: 'button',
text: 'Submit',
handler: function(button) {
var formValues = button.up('form').getValues();
alert('Name: ' + formValues.firstName
+ ' ' + formValues.lastName);
}
}]
}]
});
}
});
var confirmWindow = Ext.create('Ext.window.Window', {
title: 'Selected Item List',
autoHeight: true,
width: 500,
layout: 'fit',
modal: true,
items: [{
xtype: 'panel',
bodyPadding : 5,
items: [{
xtype: 'textfield',
id : 'freightFee',
fieldLabel: 'Freight Fee ',
name : 'freight' // I need this value, when I click the button
}]
}],
bbar: ['->', {
xtype: 'buttongroup',
items: [{
text: "test",
handler: function () {
// I want to get the textfield value (freightFee)
var freightFee = Ext.getCmp('freightFee').getValue(); // error :Ext.getCmp('freightFee') is undefined
}
}]
}
});
I have a window like above, and I want to get the text inputbox value when I click the button.
I tried,
var freightFee = Ext.getCmp('freightFee').getValue();
but error message say,
Ext.getCmp('freightFee') is undefined
anybody know this?
thank you!
Don't use getCmp ever! It's very expensive and unnecessary. Check out up/down methods to locate elements parents/childrens http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element-method-down
In your case something like that should work:
handler: function(button) {
var tf = button.up('window').down('#freightFee');
}