I have a grid, In that grid when I expand the row, there is another set of data to be displayed. I want those grid column to be dynamic. Based on my json data I want to push data in to column. But here When I am giving method, the debugger is not going there. Can anybody explain how to load dynamic column in extJS widget column.
Here is my code
Ext.define('myApp.view.base.grid.Window', {
extend: 'Ext.window.Window',
alias: 'widget.win',
title: 'my window',
height: 500,
width: 800,
layout: 'fit',
items: [{
xtype: 'grid',
columns: [{
text: 'Col 1',
dataIndex: 'col1',
flex: 1,
},{
text: 'col2',
dataIndex: 'col2',
flex: 1
}],
}],
plugins: [{
ptype: 'rowwidget',
widget: {
xtype: 'grid',
columns:[]//this.createColumn() // This columns i want to load dynamically.
}
}]
});
To add columns dynamically to the plugin, You have to push the columns config in your plugins column array.
grid.getPlugin().config.widget.columns.push({
text : 'Item',
dataIndex : 'item',
flex : 1
}, {
text : 'Description',
dataIndex : 'desc',
flex : 2
});
Created a fiddle for you here
Related
I am using layout: 'hbox'for a container and this contain has four child items as below
label
Continer having textfield and div for message
label
Container having textfield and div for message
I want all these four elements to be displayed horizontally in single line, that's why I used HBox layout, but its showing only first two child items. I looked up generated html and found that items 3 and 4 are generated but are getting position incorrectly.
Here is jsfiddle link for below code http://jsfiddle.net/5znVE/
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
width: '100%',
bodyPadding: 10,
items: [{
xtype: 'container',
id: 'chkNumberCtnr',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'label',
cls: 'field-label',
text: 'from Check Number',
}, {
xtype: 'container',
id: 'frmChkFldCntr',
cls: 'field-container',
items: [{
xtype: 'textfield',
id: 'fromChk'
}, {
xtype: 'container',
id: 'frmChkMessage',
cls: 'error-message',
html: '<div>This is required field</div>'
}]
}, {
xtype: 'label',
text: 'to Check Number'
},{
xtype: 'container',
id: 'toChkFldCntr',
cls: 'field-container',
items: [{
xtype: 'textfield',
id: 'toChk'
}, {
xtype: 'container',
id: 'toChkMessage',
cls: 'error-message',
html: '<div>This is required field</div>'
}]
}]
}
]
});
Add flex: 1 to all four of your child items in order to have them size automatically to fill the available width.
This is probably an easy one to do with formatting, when I add a row to the grid it comes up blank
code to add the row:
var innerArray = Array(
{'ID':'aaa','Text':'aaa'}
);
searchCriteria.add(innerArray);
Code that makes the table
var searchCriteria = Ext.create('Ext.data.Store', {
// store configs
autoDestroy: true,
storeId: 'myStore',
// reader configs
idIndex: 0,
fields: [
'ID',
'Text'
]
});
Panel
var resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'Search Criteria',
layout: 'fit',
height: 400,
renderTo: Ext.getBody(),
layout: {
type: 'vbox', // Arrange child items vertically
align: 'stretch', // Each takes up full width
padding: 5
},
items: [{ // Results grid specified as a config object with an xtype of 'grid'
xtype: 'grid',
columns: [
{
header: 'ID'
},
{
header: 'Text'
}
], // One header just for show. There's no data,
store: searchCriteria,
flex: 1 // Use 1/3 of Container's height (hint to Box layout)
}]
});
Rows get added, but blank what am I doing wrong?
In your grid columns, add a dataIndex property:
columns: [{
header: 'ID',
dataIndex: 'ID'
},{
header: 'Text',
dataIndex: 'Text'
}
The dataIndex property is what tells the grid where to pull the information from in the stores model
I have this grid and form panels. I want to add a grid of data into the form panel and still have buttons from the form panel.
myGrid= Ext.create('Ext.grid.Panel',{
layout: {
type: 'fit'
},
id: 'gridId',
title: null,
store: myDataStore,
columns: [{
header: 'header 1',
dataIndex: 'index_1',
width: 120
}, {
header: 'header 2',
dataIndex: 'index_2',
width: 120
}, {
header: 'header 3',
dataIndex: 'index_3',
width: 120
}],
stripeRows: true
})
formPanel= Ext.create('Ext.form.Panel',{
id:'panelId',
items:[myGrid],
buttons: [{
// cancel, save, other buttons
}]
})
But I get this error
HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy
what do I do wrong?
You forgot semicolons after your Ext.create() config.
Seems to work just fine here. I made a fiddle
http://jsfiddle.net/WGgR8/1/
So I have the view below. This view is called when an item from a list on a previous view is tapped. The lists on this view are filtered based on the previous selection, but I want to be able to add items to these lists that contain the same filter (store field = "value"). How can I get it so that the value that is filtering the lists is also passed when clicking the button and loading a new view?
My View page.
Ext.define("MyApp.view.ShowAll", {
extend: 'Ext.Container',
requires: ['Ext.NavigationView', 'Ext.dataview.List', 'Ext.layout.HBox', 'Ext.Container'],
xtype: 'myapp-showall',
config: {
layout: 'hbox',
items: [
{
layout: 'fit',
xtype: 'container',
itemId: 'listContainer',
flex: 1,
items: [
{
xtype: 'list',
store: 'leftStore',
itemTpl: '{storeField}',
emptyText: 'No values added yet'
},
{
xtype: 'toolbar',
docked: 'bottom',
padding: '5px',
items: [{ xtype: 'button', itemId: 'addValue', text: 'Add Values', ui: 'confirm', width:'100%' }]
}
]
},
{
style: "background-color: #333;",
width: 10
},
{
layout: 'fit',
xtype: 'container',
itemId: 'listContainerTwo',
flex: 1,
items: [
{
xtype: 'list',
store: 'rightStore',
itemTpl: '{storeField}',
emptyText: 'No values added yet'
},
{
xtype: 'toolbar',
docked: 'bottom',
padding: '5px',
items: [{ xtype: 'button', itemId: 'addValueRight', text: 'Add Values', ui: 'confirm', width:'100%' }]
}
]
}
]
}
});
Here is part of my Controller (which sets the store filters)
showValues: function() {
this.showValueDetails(arguments[3]);
},
showValueDetails: function(record) {
var title = "Value: "+record['data']['name'];
var showValue = Ext.create('MyApp.view.ShowAll', { title: title });
showValue.setRecord(record);
var valueName = record['data']['name'];
var leftStore = Ext.getStore("leftStore");
leftStore.clearFilter();
leftStore.filter('storeField', valueName);
var rightStore = Ext.getStore("rightStore");
rightStore.clearFilter();
rightStore.filter('storeField', valueName);
this.getMain().push(showValue);
},
It sets the page title correctly and filters the store also. I just am unsure how to pass a variable so when the buttons are clicked the valueName (from controller) is passed to the next view.
Since I was able to set the title fine using the code above, once I click the submit button all it takes is the following to get the title.
var titleVariable = Ext.getCmp('ShowAll')['title'];
I have a formPanel with a column layout. It works perfectly as long as there are visible fields in every column.
I tried adding in hidden fields to provide space for the parts of the column where I need it but it's displaying very strangely. I did try changing to adding in textFields and hiding them but it was not keepingany space at all.
The screenshot below shows what I mean. There is a hidden field at the end of the 1st row at column 3 and at the bottom of the column 1 and 3 but the layout doesn't show that.
The hidden fields have been implemented as (with unique id/name values):
{
id:'my_field_id',
name: 'my_field_name',
xtype: 'hidden'
}
And my formpanel columns have been configured similar to:
id: 'myForm'
,title: 'Search Form'
,frame:true
,waitMessage: 'Please wait.'
,initComponent: function() {
var config = {
items: [{
layout:'table',
items:[{
//columnWidth:.25,
layout: 'form',
items: [{
xtype: 'datefield',
fieldLabel: "From Date",
id: 'date1'
},
{
xtype:'combo',
id: 'fieldSelecCmb1',
hiddenName: 'ddi_country',
anchor:'98%',
store: fieldStore,
displayField: 'name',
valueField: 'alpha2code',
selectOnFocus: true,
mode: 'local',
typeAhead: true,
editable: false,
triggerAction: 'all',
value: 'emp_id',
listeners:{
select: {
fn:function(combo, value){
myStore.load({params:{ddi_country: this.value}});
}
}
}
},
{
id:'my_field',
name: 'my_field',
xtype: 'hidden'
}
]
},
had the same problem .. we defined a component
Ext.define('NCEN.extended.columnSpacer', {
extend: 'Ext.form.field.Display',
alias: 'widget.columnSpacer',
value: ' '
});
and just use it like
xtype: 'columnSpacer'