I am using ExtJS, and I have the following component:
var AlgoField = [{
bodyStyle: 'padding-right:5px;',
id: 'algo_id ',
items: [{
xtype: 'fieldset',
title: 'Algorithms\' Field',
autoHeight: true,
collapsed: true,
collapsible: true,
items: [itemAlgo_1,
itemAlgo_4,
itemAlgo_3,
itemAlgo_2
]
}]
}]
I want to set the collapsed property to false, when occur an event, and I don't know how to get this property and set it to false . (I thought something like this: Ext.get('algo_id').collapsed=false but it doesn't work)
Please help me.
Thanks a lot.
You need to give the fieldset an ID and refer to it, not its parent, i.e:
var AlgoField = [{
bodyStyle: 'padding-right:5px;',
id: 'algo_id ',
items: [{
xtype: 'fieldset',
id: 'collapse_this',
title: 'Algorithms\' Field',
autoHeight: true,
collapsed: true,
collapsible: true,
items: [itemAlgo_1, itemAlgo_4, itemAlgo_3, itemAlgo_2]
}]
}]
Then use:
Ext.getCmp('collapse_this').collapse();
Related
I have a panel which contains items in its body, and I would like the panel itself to be draggable, but only when the user drags the panelheader. (I don't want the user to be able to drag the panel by clicking and dragging in the body). Is there a simple way to do this?
Here is my code for creating the panel:
const newGridPanel = Ext.create({
xtype: 'panel',
id: newpanelid,
floated: true,
closable: true,
draggable: true,
scrollable: true,
width: 400,
height: 300,
resizable: {
constrainToParent: true,
dynamic: true,
edges: 'all',
minSize: 250,
maxSize: [window.innerWidth,window.innerHeight]
},
layout: 'fit',
title: 'Title',
tools: [
{
iconCls: 'x-fa fa-plus',
reference: 'addempbtn',
handler: function() {
newGridPanel.down(xt).getController().onAdd()
},
tooltip: 'Add a New Employee'
}
],
defaults: {
flex: 1
},
items: [
{
xtype: xt,
id: newgridid,
}
]
});
newGridPanel.setX(20);
newGridPanel.setY(20);
newGridPanel.show();
EDIT: I was able to figure out the problem and correct it. The solution has to do with the handle property of the Ext.drag.Source object. You have to specify the CSS handle of the element you want to be able to initiate the drag. In My case, the corrected code is as follows.
const newGridPanel = Ext.create({
xtype: 'panel',
id: newpanelid,
floated: true,
closable: true,
draggable: {handle: 'x-panelheader'}, // <- This is the part that needed to be changed
scrollable: true,
width: 400,
height: 300,
resizable: {
constrainToParent: true,
dynamic: true,
edges: 'all',
minSize: 250,
maxSize: [window.innerWidth,window.innerHeight]
},
layout: 'fit',
title: 'Title',
tools: [
{
iconCls: 'x-fa fa-plus',
reference: 'addempbtn',
handler: function() {
newGridPanel.down(xt).getController().onAdd()
},
tooltip: 'Add a New Employee'
}
],
defaults: {
flex: 1
},
items: [
{
xtype: xt,
id: newgridid,
}
]
});
newGridPanel.setX(20);
newGridPanel.setY(20);
newGridPanel.show();
I have a grid with records from a store using the modern material theme on ExtJS 7.2. I want to create multiple floating, draggable formpanels from this view, but when I drag the formpanel around, closing it leaves a blank white space where the formpanel was, obscuring the background. Here is the source for the formpanel.
onItemClick: function (grid,rowIndex,e) {
var record = grid.getStore().getAt(rowIndex);
var form = Ext.create({
xtype: 'formpanel',
id: `${record.id}_form_${record.get('blah')}`,
title: `Invoice ${record.get('blah')}`,
floating: true,
closable: true,
centered: true,
draggable: true,
shadow: true,
width:300,
height:window.innerHeight*0.8,
scrollable: true,
modal: null,
items: [
{
xtype: 'textfield',
name: 'Blah',
label: 'Blah',
value: record.get('blah'),
},
{
xtype: 'toolbar',
docked: 'bottom',
items: [{
xtype: 'button',
text: 'Save',
ui: 'raised round',
iconCls: 'x-fa fa-save',
handler: function() {
var theform = this.up('formpanel').getFields();
record.set(
{
'blah': theform['Blah'].getValue(),
}
);
this.up('formpanel').destroy();
}
},'->', {
xtype: 'button',
text: 'Cancel',
ui: 'raised round',
iconCls: 'x-fa fa-close',
handler: function() {
this.up('formpanel').destroy();
},
}]
}
]
});
Ext.Viewport.add(form);
}
Does anyone have experience with this problem? I have tried messing around with a custom Ext.drag.Source object, but with no success so far. When I try to close a formpanel that has been dragged, I get an error:
TypeError: Argument 1 of Node.replaceChild is not an object.
Any help would be appreciated.
there is not property called "floating" in the modern toolkit. Did you mean "floated"?
Instead of adding to Viewport better use show() method.
Something like this:
onItemClick: function (grid,rowIndex,e) {
var record = grid.getStore().getAt(rowIndex);
var form = Ext.create({
xtype: 'formpanel',
id: `${record.id}_form_${record.get('blah')}`,
title: `Invoice ${record.get('blah')}`,
floated: true, // It is not called "floating"
closable: true,
centered: true,
draggable: true,
shadow: true,
width:300,
height:window.innerHeight*0.8,
scrollable: true,
modal: null,
items: [
{
xtype: 'textfield',
name: 'Blah',
label: 'Blah',
value: record.get('blah'),
},
{
xtype: 'toolbar',
docked: 'bottom',
items: [{
xtype: 'button',
text: 'Save',
ui: 'raised round',
iconCls: 'x-fa fa-save',
handler: function() {
var theform = this.up('formpanel').getFields();
record.set(
{
'blah': theform['Blah'].getValue(),
}
);
this.up('formpanel').destroy();
}
},'->', {
xtype: 'button',
text: 'Cancel',
ui: 'raised round',
iconCls: 'x-fa fa-close',
handler: function() {
this.up('formpanel').destroy();
},
}]
}
]
});
form.show(); // Show instead of add to Viewport.
//Ext.Viewport.add(form);
}
I am using accordion layout, the data from the store loading fine for the collapsed items and we can see when it is expanded but for the items collapse: false,data is not loading.It is working fine on Firefox,but not working on Chrome and iOS simulator Can anyone please help me on this issue. I am using latest sencha touch version 2.2.1
here is my code
config: {
title: 'Check out',
iconCls: 'truck',
layout: {
type: 'accordion',
toggleOnTitlebar: true,
mode: 'MULTIPLE',
},
scrollable: 'vertical',
items: [{
itemId: 'cartitems',
title: 'Cart Items List',
height: 600,
layout: 'fit',
collapsed: false,
items: [{
xtype: 'list',
scrollable: {
direction: 'vertical',
directionLock: true
},
itemTpl: '<div class="cartitemlist">{DESCRIPTION} Item ID:{REDID} Price:{Price}</div>',
store: 'CartStore'
}]
}
data is showing up if the collapsed : true .. but it is not working when collapsed: false
Try adding a height to the list view. E.g.
items: [{
xtype: 'list',
height: 500,
scrollable: {
direction: 'vertical',
directionLock: true
},
itemTpl: '<div class="cartitemlist">{DESCRIPTION} Item ID:{REDID} Price:{Price}</div>',
store: 'CartStore'
}]
I'm having an issue with multiple instances of an ext js grid all showing the same data. I am using Ext js 4.1.1.
I have a main tab panel. In that panel, there are multiple people tabs. Inside each person tab is a details tab and a family tab.
The details tab is a simple form with text boxes, combo boxes, etc. The family tab has both a dataview and a grid.
If only one person tab is open at a time, everything works fine. As soon as a second person is opened, the family tabs look the same (both the dataview and the grid). It seems to me that the problem has something to do with the model. Perhaps they are sharing the same instance of the model, and that is causing one refresh to change all the data. The dataview and the grid both have the same problem, but I think that if I can fix the problem with the grid, then I can apply the same logic to fix the dataview. I will leave the code for the dataview out of this question unless it becomes relevant.
PersonTab.js
Ext.require('Client.view.MainTab.PersonDetailsForm');
Ext.require('Client.view.MainTab.PersonFamilyForm');
Ext.require('Client.view.MainTab.EventForm');
Ext.define('Client.view.MainTab.PersonTab',
{
extend: 'Ext.tab.Panel',
waitMsgTarget: true,
alias: 'widget.MainTabPersonTab',
layout: 'fit',
activeTab: 0,
tabPosition: 'bottom',
items:
[
{
title: 'Details',
closable: false,
xtype: 'MainTabPersonDetailsForm'
},
{
title: 'Family',
closable: false,
xtype: 'MainTabPersonFamilyForm'
},
{
title: 'page 3',
closable: false,
xtype: 'MainTabEventForm'
}
]
});
MainTabPersonFamilyForm.js
Ext.require('Client.view.MainTab.PersonFamilyHeadOfHouseholdDataView');
Ext.require('Client.view.MainTab.PersonFamilyGrid');
Ext.define('Client.view.MainTab.PersonFamilyForm',
{
extend: 'Ext.form.Panel',
alias: 'widget.MainTabPersonFamilyForm',
waitMsgTarget: true,
padding: '5 0 0 0',
autoScroll: true,
items:
[
{
xtype: 'displayfield',
name: 'HeadOfHouseholdLabel',
value: 'The head of my household is:'
},
{
xtype: 'MainTabPersonFamilyHeadOfHouseholdDataView'
},
{
xtype: 'checkboxfield',
boxLabel: "Use my Head of Household's address as my address",
boxLabelAlign: 'after',
inputValue: true,
name: 'UseHeadOfHouseholdAddress',
allowBlank: true,
padding: '0 20 5 0'
},
{
xtype: 'MainTabPersonFamilyGrid'
}
],
config:
{
idPerson: ''
}
});
MainTabPersonFamilyGrid.js
Ext.require('Client.store.PersonFamilyGrid');
Ext.require('Ext.ux.CheckColumn');
Ext.define('Client.view.MainTab.PersonFamilyGrid',
{
extend: 'Ext.grid.Panel',
alias: 'widget.MainTabPersonFamilyGrid',
waitMsgTarget: true,
padding: '5 0 0 0',
xtype: 'grid',
title: 'My Family Members',
store: Ext.create('Client.store.PersonFamilyGrid'),
plugins: Ext.create('Ext.grid.plugin.CellEditing'),
viewConfig:
{
plugins:
{
ptype: 'gridviewdragdrop',
dragGroup: 'PersonFamilyGridTrash'
}
},
columns:
[
{ text: 'Name', dataIndex: 'Name'},
{ text: 'Relationship', dataIndex: 'Relationship', editor: { xtype: 'combobox', allowblank: true, displayField: 'display', valueField: 'value', editable: false, store: Ext.create('Client.store.Gender') }},
{ xtype: 'checkcolumn', text: 'Is My Guardian', dataIndex: 'IsMyGuardian', editor: { xtype: 'checkboxfield', allowBlank: true, inputValue: true }},
{ xtype: 'checkcolumn', text: 'I Am Guardian', dataIndex: 'IAmGuardian', editor: { xtype: 'checkboxfield', allowBlank: true, inputValue: true } }
],
height: 200,
width: 400,
buttons:
[
{
xtype: 'button',
cls: 'trash-btn',
iconCls: 'trash-icon-large',
width: 64,
height: 64,
action: 'trash'
}
]
});
PersonFamilyGrid.js (store)
Ext.require('Client.model.PersonFamilyGrid');
Ext.define('Client.store.PersonFamilyGrid',
{
extend: 'Ext.data.Store',
autoLoad: false,
model: 'Client.model.PersonFamilyGrid',
proxy:
{
type: 'ajax',
url: '/Person/GetFamily',
reader:
{
type: 'json'
}
}
});
PersonFamilyGrid.js (model)
Ext.define('Client.model.PersonFamilyGrid',
{
extend: 'Ext.data.Model',
fields:
[
'idFamily',
'idPerson',
'idFamilyMember',
'Name',
'Relationship',
'IsMyGuardian',
'IAmGuardian'
]
});
relevant code from the controller:
....
....
var personTab = thisController.getMainTabPanel().add({
xtype: 'MainTabPersonTab',
title: dropData.data['Title'],
closable: true,
layout: 'fit',
tabpanelid: dropData.data['ID'],
tabpaneltype: dropData.data['Type']
});
personTab.items.items[0].idPerson = dropData.data['ID'];
personTab.items.items[1].idPerson = dropData.data['ID'];
thisController.getMainTabPanel().setActiveTab(personTab);
....
....
You're setting the store as a property on your grid prototype and creating it once at class definition time. That means that all your grids instantiated from that class will share the exact same store.
Note that you're also creating a single cellediting plugin that will be shared with all instantiations of that grid as well. That definitely won't work. You likely will only be able to edit in either the first or last grid that was instantiated.
In general you should not be setting properties like store, plugins, viewConfig or columns on the class prototype. Instead you should override initComponent and set them inside that method so that each instantiation of your grid gets a unique copy of those properties.
Ext.define('Client.view.MainTab.PersonFamilyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.MainTabPersonFamilyGrid',
waitMsgTarget: true,
padding: '5 0 0 0',
title: 'My Family Members',
height: 200,
width: 400
initComponent: function() {
Ext.apply(this, {
// Each grid will create its own store now when it is initialized.
store: Ext.create('Client.store.PersonFamilyGrid'),
// you may need to add the plugin in the config for this
// grid
plugins: Ext.create('Ext.grid.plugin.CellEditing'),
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'PersonFamilyGridTrash'
}
},
columns: /* ... */
});
this.callParent(arguments);
}
});
It's hard to tell exactly, but from the code you have submitted it appears that you are not setting the id parameter on your tabs and your stores, which causes DOM collisions as the id is used to make a component globally unique. This has caused me grief in the past when sub-classing components (such as tabs and stores) and using multiple instances of those classes.
Try giving each one a unique identifier (such as the person id) and then referencing them using that id:
var personTab = thisController.getMainTabPanel().add({
id: 'cmp-person-id',
xtype: 'MainTabPersonTab',
...
store: Ext.create('Client.store.PersonFamilyGrid',
{
id: 'store-person-id',
...
});
Ext.getCmp('cmp-person-id');
Ext.StoreManager.lookup('store-person-id');
Hope that helps.
is there are any way to disable all child items on Extjs4 tab panel, without looping them.
my code:
var myPanel = new Ext.TabPanel({
region: 'east',
title: 'my panel title',
width: 200,
id: 'my-panel',
split: true,
collapsible: true,
collapsed: true,
floatable: true,
xtype: 'tabpanel',
items: [
Ext.create('Ext.panel.Panel', {
id: 'my-detail-panel',
title: 'My Info',
autoScroll: true,
file: false,
type: 'vbox',
align: 'stretch',
tpl: myDetailsTpl
}),
Ext.create('Ext.panel.Panel', {
id: 'my-more-detail-panel',
title: 'My more info',
autoScroll: true,
file: false,
type: 'vbox',
align: 'stretch',
tpl: myMoreDetailsTpl
})
]
});
i need disable myPanel's all child items, but still need to 'myPanel' keep status as enable .
myPanel.items.each(function(c){c.disable();})
then
myPanel.items.each(function(c){c.enable();})
to fire them back up again.
This is looping, but it is not using a "for loop" as I think the question was meant to state.
You can just set disabled:true on the initial config for each panel. Is that what you were asking?
Try his:
// Create your own property for storing statu,
config{
allMyTabItemsEnabled = true;
}
// Then on all the items you want to disable/enable, add:
bind: {
disabled: '{!allMyTabItemsEnabled }'
}