I'm using ExtJS5 and trying to put the object items to card panel for a function that user can change the panel when click treepanel. But I don't know is it a right way to do that.
var p = Ext.create('Ext.panel.Panel', {
layout: 'card',
items: [
grid, bottompanel
]
});
I like to do that like Example
And here is the panel on right hand side.
var grid = Ext.create('Ext.grid.Panel', {
//title: 'Simpsons',
title: 'Customers',
height: 300,
width:'100%',
id: 'cus_grid',
columns: [
{text: "Customer ID", dataIndex: "id", flex: 1},
{text: "Customer Name", dataIndex: "name", flex: 1},
{text: "Services Name", dataIndex: "s_name", flex: 1},
{text: "Services Type", dataIndex: "s_type", flex: 1}
],
store: user,
listeners : {
itemclick: function(dv, record, item, index, e) {
//alert(record.get('name'));
Ext.getCmp('infoForm').getForm().findField('id').setReadOnly(true);
Ext.getCmp('infoForm').getForm().findField('s_type').setReadOnly(true);
Ext.getCmp('infoForm').loadRecord(record);
}
}
});
var bottompanel = Ext.create('Ext.form.Panel', {
//region: 'center',
title: 'Information',
bodyPadding: 10,
flex:1,
width:'100%',
id: 'infoForm',
items: [{
xtype: 'textfield',
name: 'id',
fieldLabel: 'Customer ID',
allowBlank: false // requires a non-empty value
},{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}, {
xtype: 'textfield',
name: 's_name',
fieldLabel: 'Services Name',
allowBlank: false // requires a non-empty value
}, cmbBox],
// Reset and Submit buttons
buttons: [],
tbar: toolBar
});
Thank you.
I fixed the problem....
I forgot to add width in card panel so have an error occurred.
Thank you.
Related
Binding checkbox selectionmodel in initComponent is not working as expected in grid component of extjs
What could be the problem in the code? attaching fiddle
https://fiddle.sencha.com/#view/editor&fiddle/2g8r
In order to bind a checkbox in grid, there is a built in plugin.How ever ,if you need to attach the selModel ONLY in the initComponent.Then define grid,attach selmodel and create instance of it. .Here is the updated fiddle https://fiddle.sencha.com/#view/editor&fiddle/2ghc
Ext.define('OuterGrid', {
extend: 'Ext.grid.Panel',
store: userStore,
storeId: 'mystore',
width: 400,
height: 500,
title: 'Sample Application',
columns: [{
text: 'Name',
dataIndex: 'name',
width: 100,
sortable: true
}, {
text: 'Email Address',
dataIndex: 'email',
width: 150,
}, {
text: 'Phone Number',
dataIndex: 'phone',
flex: 1,
}],
initComponent: function() {
this.selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [{
xtype: 'checkcolumn',
text: 'Active',
dataIndex: 'id'
}],
});
this.callParent();
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('OuterGrid', {
renderTo: Ext.getBody(),
});
}
});
so I have a view where I display a combobox and a grid that share a 'Roles' store. If you pick an option on the combobox, the grid will be filtered accordingly.
I am looking for a way to add an "All" option to the combobox that is selectable (so placeholder or value attributes don't work for me). I want to do this because I cannot add that option to the store without affecting the grid as well.
This is my code:
Ext.define("MODIFE.view.administration.Roles",{
extend: "Ext.panel.Panel",
xtype: "app-administration-roles",
controller: "administration-roles",
viewModel: {
type: "administration-users"
},
title: "Roles",
items:[
{
title: 'Búsqueda de Roles',
frame: true,
resizable: true,
xtype: 'form',
layout: 'column',
defaults: {
layout: 'form',
xtype: 'container',
defaultType: 'textfield',
style: 'width: 50%'
},
items: [{
items: [{
fieldLabel: 'Rol',
xtype: 'combobox',
store: 'Roles',
displayField: 'Description',
valueField: 'RoleId',
}]
}, {
items: [
{ fieldLabel: 'Estatus', xtype: 'combobox' },
]
}],
buttons: [
{ text: 'Nuevo' },
{ text: 'Buscar' }
]
},
{
layout: 'fit',
items: [{
xtype: 'grid',
id: 'rolesGrid',
title: 'Listado de Roles',
store: 'Roles',
columns: [
{ text: 'Rol', dataIndex: 'Description', flex: 2},
{ text: 'Estatus', dataIndex: 'Status', flex: 2},
]
}]
}]
});
Thanks in advance!
You could clone the store, then any alterations wont be reflected in the original store. (but it's messy, and may have problems with syncing if you have this enabled)
//clone store
var records = [],
me = this;
me.store.each(function(r){
records.push(r.copy());
});
var store2 = new Ext.data.Store({
recordType: me.store.recordType,
model: me.store.model
});
store2.add(records);
//add record
store2.add({ID:"-1", NAME: "-Please select-"});
I have a tabpanel. In the tab, i have a panel which includes a toolbar and 3 items: [ fieldset, a gridpanel, and another fieldset (or some buttons)]. I cannot get the gridpanel to show scroll bar. It only works if i set the maxheight/minheight of the gridpanel.
I also tried wrapping gridpanel inside a container. No luck.
In the example, i use fit layout. I tried "anchor" layout, and assigned anchor:'100% 50%' to gridpanel, hoping that it would resize when i resize browser. No luck.
Alternatively, if gridpanel is the ONLY item in the tab, autoscroll would work. So it appears when it's inside another panel, autoscroll/ resizing does not work.
Did I miss something here ?
Ext.application({
name: 'MyApp',
launch: function () {
// create the data store
var d = ['company', 100];
var myData = [];
for (var i = 0; i < 50; i++) {
myData[i] = d;
}
var store = Ext.create('Ext.data.ArrayStore', {
fields: [{
name: 'company'
}, {
name: 'price',
type: 'float'
}],
data: myData
});
Ext.create("Ext.container.Viewport", {
layout: {
type: 'border'
},
items: [{
xtype: 'toolbar',
id: 'headerbar',
region: 'north',
height: 30
}, {
xtype: 'toolbar',
id: 'menubar',
region: 'north',
height: 30
}, {
xtype: 'tabpanel',
itemId: 'maintabpanel',
activeTab: 0,
region: 'center',
plain: true,
margins: '5 5 5 5',
layout: 'fit',
items: [{
closable: false,
title: 'Tab',
margins: '0 0 0 0',
items: [{
xtype: 'panel',
title: 'Panel',
layout: 'fit',
tools: [{
type: 'help',
tooltip: 'Help'
}, {
type: 'close',
tooltip: 'Close'
}],
items: [{
xtype: 'fieldset',
title: 'Field Set',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Input'
}]
}, {
xtype: 'gridpanel',
autoScroll: true,
store: store,
columns: [{
text: 'Company',
flex: 1,
sortable: true,
dataIndex: 'company'
}, {
text: 'Price',
flex: 1,
sortable: true,
dataIndex: 'price'
}],
viewConfig: {
autoFit: true
}
}, {
xtype: 'fieldset',
title: 'Field Set 2',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Output'
}]
}]
}]
}]
}, {
xtype: 'box',
id: 'footer',
region: 'south',
html: '<h1> Copyright 2012</h1>',
height: 30
}]
});
}
});
Note that the parent panel of the gridpanel has fit layout, yet it has more than 1 item (the fieldset, the gridpanel, and another fieldset). A fit layout can only have 1 child.
Also, the parent of that fit panel (the one with closable : false - the tab) has no layout definition.
Here's a JsFiddle modified version of your code that works.
I have a GRID which works properly. Now I need to add this GRID to the first Tab Panel. How can I do that?
my code:
GRID.JS
Ext.create('Ext.grid.Panel', {
xtype:'grid',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
TAB.JS
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
xtype:'grid'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody()
});
I have added the xtype:grid in GRID.JS and I am trying to access that Grid from TAB.JS in the 1st tab, but it is not getting displayed.
xtype: 'grid' - means create standard Ext.grid.Panel and add it here.
You have two options:
Create your grid and save it into variable.
var _grid = Ext.create('...', {...});
Ext.create('Ext.tab.Panel', {
...
items: [
_grid
]
});
Or, define your own class with new xtype
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygrid',
...
});
Ext.create('Ext.tab.Panel', {
...
items: [{
xtype: 'mygrid'
}]
});
How do I go about making the gridpanel/table in extjs auto expand based on the window size?
Thanks
I added layout :'fit'.. i didn't change much
var listView = Ext.create('Ext.grid.Panel', {
store: mystore,
multiSelect: true,
title:'Notifications for ' + jsonServiceId + ' <i>(0 items selected)</i>',
viewConfig: {
emptyText: 'No images to display'
},
//reserveScrollOffset: true,
renderTo: containerEl,
layout:'fit',
columns: [{
text: 'Sell',
flex: 10,
dataIndex: 'Sell',
renderer: function(value, metaData, record) {
// alert(record.get('Sell'));
}
},{
text: 'Class',
flex: 10,
dataIndex: 'ClassName'
},
{
text: 'Last Changed',
flex: 20,
dataIndex: 'LastChangedAt',
xtype: 'datecolumn',
format: 'd-M-Y h:i a'
}
]
});
It's a layout thing. You should add layout: 'fit' to the parent container. It will make your grid expand to the size of parent container.
Just as here in example:
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout-browser/layout-browser.html