We Keep Coding

The parameter Node is not a child of this Node error in IE

I have two tag K and F. Every K tag has some child F tag. I want to remove child F tag from the K tag. Here is my code. My code is working fine in Chrome Showing error in IE
Error : The parameter Node is not a child of this Node.
Here is my Code
if(KTagNode[j].getAttribute('pview') == 198) {
var fTagData = KTagNode[j].getElementsByTagName('F');
for(var k=0; k<fTagData.length;k++){
if(fTagData[k].getAttribute('N') == "USA"){
KTagNode[j].removeChild(fTagData[k]);
k--;
}
}
}
Can anyone help me with this.

I come out with idea of this. Please check.
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields:[ 'name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' }
]
});
var root = {
expanded: true,
children: [{
text: "Configure Application",
expanded: true,
children: [{
text: "Manage Application",
leaf: true
}, {
text: "Scenario",
leaf: true
}]
}, {
text: "User Configuration",
expanded: true,
children: [{
text: "Manage User",
leaf: true
}, {
text: "User rights",
leaf: true
}]
}, {
text: "Test Configuration",
//leaf: true,
expanded: true,
children: [{
text: "Manage User",
leaf: true
}, {
text: "User rights",
leaf: true
}]
}]
};
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'north Region is resizable',
region: 'north', // position for region
xtype: 'panel',
height: 50,
split: true, // enable resizing
margin: '0 5 5 5',
layout: {
type: "hbox",
align: "stretch"
},
items:[
{
xtype: 'combobox',
label: 'Choose State',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
width : 200,
store: states,
},{
xtype: 'combobox',
label: 'Choose State2',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
width : 200,
store: states
}]
},{
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margin: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: {
type: "vbox",
align: "stretch"
},
items:[{
xtype: 'panel',
width : 200,
margin: '5 0 0 5',
layout: {
type: "vbox",
align: "stretch"
},
items:[{
xtype: 'combobox',
label: 'Choose State',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
width : 50,
store: states,
},{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'To',
name: 'to_date',
value: new Date()
},{
xtype: 'toolbar',
width : 150,
items:[{
text: 'Button1'
},{
text: 'Button2'
}]
}]
},{
xtype: 'treepanel',
useArrows: true,
autoScroll: false,
animate: true,
enableDD: false,
title: 'Configuration',
width: 200,
height: 400,
rootVisible: false,
store: Ext.create('Ext.data.TreeStore', {
root: root
}),
listeners: {
itemclick: function(s, r) {
alert(r.data.text);
}
}
}]
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
margin: '5 5 0 0',
layout: {
type: "vbox",
align: "stretch"
},
items:[{
xtype: 'grid',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 150,
width: 400,
},{
xtype: 'toolbar',
width : 150,
items:[{
text: 'Button1'
},{
text: 'Button2'
}]
},{
xtype : 'panel',
width: 175,
height: 150,
bodyPadding: 10,
title: 'Final Score',
items: [{
xtype: 'displayfield',
fieldLabel: 'Home',
name: 'home_score',
value: '10'
}, {
xtype: 'displayfield',
fieldLabel: 'Visitor',
name: 'visitor_score',
value: '11'
}],
}]
},{
title: 'South Region is resizable',
region: 'south', // position for region
split: true, // enable resizing
margin: '0 5 5 5',
xtype: 'toolbar',
items:[{
text: 'Button1'
},{
text: 'Button2'
}]
}],
renderTo: Ext.getBody()
});

Data is not loading in ExtJS 3.4

My new in extjs and working on ExtJS 3.2.
In that my data is not loading but if comment data column is displaying can anyone please help me.
My code is
{
xtype: 'panel',
title: "Search Result",
items: [{
xtype: 'grid',
store: new Ext.data.Store({
autoDestroy: true,
fields: ['Name', 'Roll', 'Class'],
root: 'records',
// proxy: proxy,
data: [{
Name: false,
Roll: 'a',
Class: 20
}, {
Name: true,
Roll: 'b',
Class: 25
}]
}),
columns: [{
text: 'Name',
id: 'company',
header: 'Name',
width: 130,
sortable: false,
hideable: false,
dataIndex: 'Name'
}, {
text: 'Roll',
width: 130,
header: 'Name',
dataIndex: 'Roll',
hidden: false
}, {
text: 'Class',
width: 130,
header: 'Class',
dataIndex: 'Class',
hidden: false
}]
}]
}
Inside panel I am taking grid.
Can anybody please help me.?

I am writing data outside the scope and now its working fine.
My complete code is.
var myData = [
['FFPE Slide',2,'eSample'],
['Plasma',2,'eSample'],
['Whole Blood',2,'eSample'] ];
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'stype'},
{name: 'scnt'},
{name: 'src'}
]
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Sample Type", width: 75, sortable: true, dataIndex: 'stype'},
{header: "Subjects Count", width: 75, sortable: true, dataIndex: 'scnt'},
{header: "Source", width: 75, sortable: true, dataIndex: 'src'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:150,
width:150,
title:'Detailed Counts'
});
This is working fine.

Remove the root config (root:'records') in the store.. or try to add records property to the data object. Remove the reader as well

How to POST a grid within a form in ExtJS

I have a form that has comboboxes, tagfields, date pickers, etc., and a grid. Each of these elements has a different store. The user is going to make selections from the comboboxes, etc,. and enter values into the grid. Then the values from the grid and other form elements are all sent on a POST to the server. I know how to POST the data from the comboboxes, tagfields, and date pickers. However, I don't know how to send the data in the grid with the form. Here is the form view:
Ext.define('ExtTestApp.view.main.List', {
extend: 'Ext.form.Panel',
xtype: 'cell-editing',
frame: true,
autoScroll: true,
title: 'Record Event',
bodyPadding: 5,
requires: [
'Ext.selection.CellModel',
'ExtTestApp.store.Personnel'
],
layout: 'column',
initComponent: function(){
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
Ext.apply(this, {
//width: 550,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%',
msgTarget: 'side'
},
items: [{
xtype: 'fieldset',
//width: 400,
title: 'Event Information',
//height: 460,
//defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Event',
layout: 'hbox',
defaults: {
hideLabel: 'true'
},
items: [{
xtype: 'combobox',
name: 'eventTypeId',
width: 300,
//flex: 1,
store: {
type: 'events'
},
valueField: 'eventTypeId',
// Template for the dropdown menu.
// Note the use of the "x-list-plain" and "x-boundlist-item" class,
// this is required to make the items selectable.
allowBlank: false
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'datefield',
fieldLabel: 'Date',
format: 'Y-m-d',
name: 'startDate',
//msgTarget: 'under', //location of error message, default is tooltip
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
//flex: 1,
emptyText: 'Start',
allowBlank: false
},
{
xtype: 'datefield',
format: 'Y-m-d',
name: 'endDate',
//msgTarget: 'under', //location of error message
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
//flex: 1,
margin: '0 0 0 6',
emptyText: 'End',
allowBlank: false
}
]
}]
},
{
xtype: 'fieldset',
//height: 460,
title: 'Platform Information',
//defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [
{
xtype: 'fieldcontainer',
layout: 'hbox',
fieldLabel: 'Platform',
//combineErrors: true,
defaults: {
hideLabel: 'true'
},
items: [
{
xtype: 'combobox',
name: 'platformId',
store: {
type: 'platforms'
},
valueField: 'platformId',
allowBlank: false
}
]
}
]
},
{
xtype: 'fieldcontainer',
layout: 'hbox',
fieldLabel: 'Software Type(s)',
//combineErrors: true,
defaults: {
hideLabel: 'true'
},
items: [
{
xtype: 'tagfield',
width: 400,
//height: 50,
fieldLabel: 'Software Type(s)',
name: 'softwareTypeIds',
store: {
type: 'softwareTypes'
},
labelTpl: '{softwareName} - {manufacturer}',
valueField: 'softwareTypeId',
allowBlank: false
}
]
},
{
xtype: 'gridpanel',
layout: 'anchor',
defaults: {
anchor: '100%'
},
width: 1300,
//columnWidth: 0.78,
//title: 'Metrics',
plugins: [this.cellEditing],
title: 'Personnel',
store: {
type: 'personnel'
},
columns: [
{ text: 'Name', dataIndex: 'name', editor: 'textfield' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone', flex: 1 }
]
}
],
buttons: [
{
text: 'Save Event',
handler: function() {
var form = this.up('form'); // get the form panel
// if (form.isValid()) { // make sure the form contains valid data before submitting
Ext.Ajax.request({
url: 'api/events/create',
method:'POST',
headers: { 'Content-Type': 'application/json' },
params : Ext.JSON.encode(form.getValues()),
success: function(form, action) {
Ext.Msg.alert('Success', action.result);
},
failure: function(form, action) {
//console.log(form.getForm().getValues());
Ext.Msg.alert('Submission failed', 'Please make sure you selected an item for each required field.', action.result);
}
});
// } else { // display error alert if the data is invalid
// Ext.Msg.alert('Submit Failed', 'Please make sure you have made selections for each required field.')
// }
}
}
]
});
this.callParent();
}
});
var grid = Ext.ComponentQuery.query('grid')[0];
Here is the store for the grid:
Ext.define('ExtTestApp.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.personnel',
fields: [
'name', 'email', 'phone'
],
data: { items: [
{ name: 'Jean Luc', email: "jeanluc.picard#enterprise.com", phone: "555-111-1111" },
{ name: 'Worf', email: "worf.moghsson#enterprise.com", phone: "555-222-2222" },
{ name: 'Deanna', email: "deanna.troi#enterprise.com", phone: "555-333-3333" },
{ name: 'Data', email: "mr.data#enterprise.com", phone: "555-444-4444" }
]},
autoLoad: true,
proxy: {
type: 'memory',
api: {
update: 'api/update'
},
reader: {
type: 'json',
rootProperty: 'items'
},
writer: {
type: 'json',
writeAllFields: true,
rootProperty: 'items'
}
}
});

Ideally, you would need to create a custom "grid field" so that the grid data is picked up on form submit like any other field.
You can also use this workaround: in the "Save Event" button handler, dig out the grid store and fish data out of it:
var gridData = [];
form.down('gridpanel').store.each(function(r) {
gridData.push(r.getData());
});
Then get the rest of the form data and put the grid data into it:
var formData = form.getValues();
formData.gridData = gridData;
Finally, include it all in your AJAX call:
params: Ext.JSON.encode(formData)

Ext Js - Problem Loading Two Grids

I'm trying to display two grids in a master/detail relationship. Being new to Ext JS, I've modified an example that will successfully display my data - either the master or the detail. But I can't get it to load them both. Each grid has it's own dataStore, columnModel and gridPanel.
Do I need to use different container to hold the gridPanels? Do I have a syntax error in the config for my Window? Thanks.
OrdersGrid = new Ext.grid.EditorGridPanel({
id: 'OrdersGrid',
store: OrdersDataStore,
cm: OrdersColumnModel,
enableColLock:false,
clicksToEdit:1,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
});
ItemsGrid = new Ext.grid.EditorGridPanel({
id: 'ItemsGrid',
store: ItemsDataStore,
cm: ItemsColumnModel,
enableColLock:false,
clicksToEdit:1,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
});
OrdersItemsWindow = new Ext.Window({
id: 'OrdersItemsWindow',
title: 'Orders and Items',
layout: 'vbox',
closable: true,
height: 700,
width: 800,
layoutConfig: {
align : 'stretch',
pack : 'start',
},
plain: false,
items: [ OrdersGrid, ItemsGrid ]
});
OrdersDataStore.load();
ItemsDataStore.load();
OrdersItemsWindow.show();

The height of the two GridPanels needs to be set, since the VBoxLayout of the window doesn't handle this. It can only set the horizontal width of the items it contains.
For example:
OrdersGrid = new Ext.grid.EditorGridPanel({
id: 'OrdersGrid',
store: OrdersDataStore,
cm: OrdersColumnModel,
enableColLock:false,
clicksToEdit:1,
flex: 1, // add this line
selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
});
The rest of the syntax you are using is correct.
Alternatively, it's possible to use something like height: 200 to fix the height, in place of the flex parameter.

Ext.onReady(function () {
var movieStore = Ext.create("Ext.data.Store", {
baseParams: { action: 'movie' },
fields: ["film_id","title", "rent", "buy"],
data: [{film_id:1,title: "film_A",rent: 20.0,buy: 30},
{film_id:2,title: "film_B",rent: 20.0,buy: 36},
{film_id:3,title: "film_C",rent :22.0,buy :27}]
});
var actorStore = Ext.create("Ext.data.Store", {
baseParams: { action: 'actors' },
fields: ["actor_id","name"],
data: [{actor_id: 1,name:"A"},
{actor_id: 2,name: "B"},
{actor_id: 3,name :"C"}]
});
var movieGrid = Ext.create("Ext.grid.Panel", {
store: movieStore,
//sm: Ext.create('Ext.grid.RowSelectionModel',{ singleSelect: true }),
singleSelect: true,
title: "Movies",
selType: 'rowmodel',
/* plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
})],*/
columnLines: true,
width: 600,
height: 200,
columns: [
{xtype : "rownumberer"},
{text: 'film_ID',dataIndex: 'film_id'},
{text: 'Movie',dataIndex: 'title', editor: 'textfield'},
{text: 'Rent', dataIndex: 'rent',xtype : "numbercolumn",format:"0.00"},
{text: 'Buy', dataIndex: 'buy',xtype:"numbercolumn",format:"0.00"}
],
iconCls: 'icon-grid',
margin: '0 0 20 0',
renderTo: Ext.getBody()
});
var actorGrid = Ext.create("Ext.grid.Panel", {
store: actorStore,
//sm: Ext.create('Ext.grid.RowSelectionModel',{ singleSelect: true }),
singleSelect: true,
title: "Actor",
selType: 'rowmodel',
/* plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
})],*/
columnLines: true,
width: 600,
height: 200,
columns: [
{xtype : "rownumberer"},
{text: 'actor_id',dataIndex: 'actor_id'},
{text: 'name',dataIndex: 'name', editor: 'textfield'},
],
iconCls: 'icon-grid',
margin: '0 0 20 0',
renderTo: Ext.getBody()
});
movieGrid.getSelectionModel().on('rowselect',
function(sm, rowIndex, record) {
/*moviesGrid.setTitle('Movies starring ' +
record.data.first_name + ' ' + record.data.last_name);*/
actorStore.load({ params: { 'movie':
record.data.actor_id} });
});
movieStore.load();
});

GridPanel in Extjs is not loaded

I have this code in my application, but this not load any data. Data is accessible but wont display in my gridpanel, anyone have idea, why?
Ext.onReady(function () {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var btnAdd = new Ext.Button({
id: 'btnAdd',
text: 'Adicionar',
iconCls: 'application_add',
handler: function (s) {
}
});
var btnEdit = new Ext.Button({
id: 'btnEdit',
text: 'Editar',
iconCls: 'application_edit',
handler: function (s) {
}
});
var btnRemove = new Ext.Button({
id: 'btnRemove',
text: 'Apagar',
iconCls: 'application_delete',
handler: function (s) {
}
});
var tbar = new Ext.Toolbar({
items: [btnAdd, btnEdit, btnRemove]
});
var formFind = new Ext.FormPanel({
height: 100
});
var store = new Ext.data.JsonStore({
remoteSort: true,
idProperty: 'ContentId',
root: 'rows',
totalProperty: 'results',
fields: [
{ name: 'ContentId', type: 'int' },
{ name: 'Name' },
{ name: 'Version' },
{ name: 'State' },
{ name: 'CreatedDateTime' },
{ name: 'PublishedDateTime'},
{ name: 'CreatedByUser' },
{ name: 'PublishedByUser' }
],
proxy: new Ext.data.ScriptTagProxy({
url: '/Admin/ArticleList'
})
});
store.setDefaultSort('ContentId', 'desc');
var paging = new Ext.PagingToolbar({
store: store,
pageSize: 25,
displayInfo: true,
displayMsg: 'Foram encontrados {2} registos. Mostrando {0} de {1}',
emptyMsg: "Nenhum registo encontrado."
});
var grid = new Ext.grid.GridPanel({
id: 'grid',
height: 700,
store: store,
loadMask: true,
loadingText: 'Carregando...',
autoHeight: true,
cm: new Ext.grid.ColumnModel ([
{ id: 'ContentId', dataIndex: 'ContentId', header: 'Identif.', width: 60, sortable: true },
{ id: 'Name', dataIndex: 'Name', header: 'Titulo', width: 75, sortable: true },
{ id: 'Version', dataIndex: 'Version', header: 'Versão', width: 75, sortable: true },
{ id: 'State', dataIndex: 'State', header: 'Estado', width: 75, sortable: true },
{ id: 'CreatedDateTime', dataIndex: 'CreatedDateTime', header: 'Data de Criação', width: 85, sortable: true },
{ id: 'PublishedDateTime', dataIndex: 'PublishedDateTime', header: 'Data de Publicação', width: 75, sortable: true },
{ id: 'CreatedByUser', dataIndex: 'CreatedByUser', header: 'Criado por', width: 75, sortable: true },
{ id: 'PublishedByUser', dataIndex: 'PublishedByUser', header: 'Publicado por', width: 85, sortable: true }
]),
stripeRows: true,
viewConfig: { forceFit: true },
bbar: paging
});
var panel = new Ext.Panel({
id: 'panel',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: tbar,
items: [grid]
});
store.load(); // trigger the data store load
});

You shouldn't be using a ScriptTagProxy. If you read the docs you'll see that it's used only in limited cases to retrieve context from remote server in a particular format.
You want a HttpProxy instead.