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/
Related
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
I have an issue in my recent implemented Rally Grid.
_CreatePSIObjectiveGrid: function(myStore) {
if (!this.objGrid) {
var colCfgs = [{
text: 'ID',
dataIndex: 'DragAndDropRank',
width: 50
}, {
text: 'Summary',
dataIndex: 'Name',
flex: 1
}, {
text: 'Success Rate',
dataIndex: 'c_SuccessRate',
width: 200
}];
if (!this.getSetting("useSuccessRatioOnly")) {
colCfgs.push({
text: 'Initial Business Value',
dataIndex: 'PlanEstimate',
width: 200
});
colCfgs.push({
text: 'Final Business Value',
dataIndex: 'c_FinalValue',
width: 200
});
}
this.objGrid = Ext.create('Rally.ui.grid.Grid', {
store : myStore,
enableRanking: true,
defaultSortToRank: true,
height: 550,
overflowY: 'auto',
margin: 10,
showPagingToolbar: false,
columnCfgs : colCfgs
});
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
}
}
Although I have set "enableRanking" to "true", the ranking drag and drop doesn't work if I add my grid to a component. However, the drag and drop function does work perfectly if I change the last statement from
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
to
this.add(this.objGrid);
I don't know if this is a Rally bug. Try to compare the final html file generated, no clue is found.
this few sec video shows that the code below, where a rankable grid is added to a child panel, and not directly to this (this points to the app's global scope) still preserves its ability to rerank:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var panel = Ext.create('Ext.panel.Panel', {
layout: 'hbox',
itemId: 'parentPanel',
componentCls: 'panel',
items: [
{
xtype: 'panel',
title: 'Panel 1',
width: 600,
itemId: 'childPanel1'
},
{
xtype: 'panel',
title: 'Panel 2',
width: 600,
itemId: 'childPanel2'
}
],
});
this.add(panel);
this.down('#childPanel1').add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Owner'
],
context: this.getContext(),
enableRanking: true,
defaultSortToRank: true,
storeConfig: {
model: 'userstory'
}
});
}
});
hello,
to manage user access,i need to disable loading some items, in a viewport for now i hide them with a the "hidden" property, but I can't prevent the background processing for this items, such as the server request
how can i disable loading for a specific items.
this my viewport code
var notAllowAdmin=true; //init access rule gere for admin panel
Ext.define('eFinances.view.Viewport', {
extend: 'Ext.container.Viewport',
requires: [
'Ext.layout.container.Border'
],
layout: 'border',
items: [
{
xtype: 'eFinancesToolbar',
region: 'north'
},
{
title: 'Navigation',
region: 'west',
collapsible: true,
split: true,
width: 200,
minWidth: 175,
maxWidth: 400,
animCollapse: true,
margins: '0 0 0 5',
layout: 'accordion',
items: [{
xtype:'menuTresorerie',
title: 'Trésoreries',
iconCls: 'balance' // see the HEAD section for style used
},{
xtype:'menuAchat',
title: 'Achat et fournisseurs',
iconCls: 'depense' // see the HEAD section for style used
}, {
xtype:'menuVente',
title: 'Ventes et clients',
iconCls: 'recette'
}, {
xtype:'menuAdmin',
hidden :notAllowAdmin, // hide items if not allowed
title: 'Administration',
iconCls: 'administration'
}]
},
{
region: 'center',
title: 'work area'
}
]
});
for the moment i hide admin panel with notAllowAdmin variable initialized with rules access , but whole background process are executed, some can tell me how to proceed to completly disactivate panel loading or give me best idea to do this (managing users access)
regards
You can stop adding hidden components to the items array. Example:
items: [
{
xtype:'menuTresorerie',
title: 'Trésoreries',
iconCls: 'balance' // see the HEAD section for style used
},
{
xtype:'menuAchat',
title: 'Achat et fournisseurs',
iconCls: 'depense' // see the HEAD section for style used
},
{
xtype:'menuVente',
title: 'Ventes et clients',
iconCls: 'recette'
}
].concat(notAllowAdmin ? [] : [
{
xtype:'menuAdmin',
title: 'Administration',
iconCls: 'administration'
}
]);
But you should notice that this should be trated only as optimization, and true access control should be implemented on server side.
I want to 2 forms, & I want to use card layout, so that when the user submits form1, he is taken to form2. But, when I try to MyApp.container.setActiveItem(2) (using console), it does not move to form2(card2).
Ext.define('MyApp.view.Forms', {
extend: 'Ext.Container',
xtype: 'formsPage',
id: 'formsForm',
config: {
title: 'Patient Registration',
iconCls: 'user',
layout:{
type: 'card'
},
items: [
{
xtype: 'fieldset',
title: 'Patient Registration1',
items: [
{
xtype: 'textfield',
label: 'Names',
name: 'name'
},
{
xtype: 'textfield',
label: 'City',
name: 'city'
}
]
},
{
xtype: 'fieldset',
title: 'Patient Registration1',
items: [
{
xtype: 'textfield',
label: 'Phone',
name: 'phone'
},
{
xtype: 'textfield',
label: 'Country',
name: 'conutry'
}
]
}
],
constructor:function(config) {
this.initConfig(config);
return this;
}
}
});
MyApp.container = Ext.create('MyApp.view.Forms', {});
Please note that array items in Sencha Touch 2 are indexed from 0, so if you want to activate second one, it should be something like this:
MyApp.container.setActiveItem(1)
Edited: I've figured it out. You should add another config to your view: fullscreen:true and it should work well :)
Is your form xtype of 'formsPage' custom, I can't seem to find it in the doco? If it's not, that might be contributing to the issue.
The doco also suggests that you don't create the card layout directly, but instead use carousel or tab panel. Maybe use a carousel as your base component, then make each card a separate form? This would make your intentions clear that each card/form is to be independent.
Hope that helps
do the following:
extend the carousel
extend: 'Ext.Carousel',
change the config section to:
config: {
title: 'Patient Registration',
iconCls: 'user',
cls: 'card'
----
guess that should fix it
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'