Code:
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../../extjs/examples/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.selection.CellModel',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
'Ext.ux.CheckColumn'
]);
Ext.QuickTips.init();
var defaultlab = '';
Ext.onReady(function()
{
Ext.QuickTips.init();
Ext.data.Connection.disableCaching = true;
var searchString = new Ext.form.field.Text
(
{
id : 'searchString',
name : 'searchString',
width : 150
}
);
// The data store containing the list of states
var states = Ext.create('Ext.data.Store',
{
fields : ['city_name'],
proxy :
{
type : 'ajax',
url : '../src/profile_labs.class.php?action=getcity',
reader :
{
type :'json',
root : 'city_name'
}
},
autoLoad: true
});
var CheckboxValuesField = new Ext.form.TextField(
{
name:'checkbox_values',
fieldLabel: 'Checkbox values',
allowBlank: false,
anchor:'95%',
hidden : true
});
var CheckboxValuesField2 = new Ext.form.TextField(
{
name :'CheckboxValuesField2',
fieldLabel : 'Checkbox values',
allowBlank : false,
anchor : '95%',
hidden : true
});
var DeviceCheckboxValuesField = new Ext.form.TextField(
{
name:'checkbox_values',
fieldLabel: 'Checkbox values',
allowBlank: false,
anchor:'95%',
hidden : true
});
// Create the combo box, attached to the states data store
var examples = new Ext.form.ComboBox(
{
store : states,
displayField : 'city_name',
valueField : 'city_name',
listeners :
{
'change':
{
fn: function()
{
searchString.setValue("");
}
}
}
});
var searchform = new Ext.form.FormPanel(
{
width : 850,
height : 40,
border : false,
margin : '10 0 0 0',
layout :
{
type : 'hbox'
},
items :
[
{
xtype : 'label',
margins : '0 15 0 10',
text : 'Lab name :'
},
searchString,
{
xtype : 'label',
margins : '0 15 0 10',
text : 'Choose city :'
},
examples,
{
xtype : 'button',
text : 'Go',
margins : '0 0 0 10',
width : 30,
handler : function ()
{
Ext.getCmp('firstGrid').getStore().load(
{
params:
{
city : examples.getValue(),
searchString: searchString.getValue(),
action : 'searchLab'
}
});
}
}
]
});
Ext.define('DataObject',
{
extend: 'Ext.data.Model',
fields: ['spname', 'city_name', 'ulid']
});
var firstGridModel = new Ext.selection.CheckboxModel(
{
listeners :
{
checkOnly : true,
selectionchange: function(model, record, options)
{
if (model.getCount())
{
var CheckedNumDevice = record.length;
var CheckedValuesDevice = "";
for(var a=0;a<CheckedNumDevice;a++)
{
CheckedValuesDevice += record[a].get('spname')+":"+record[a].get('city_name')+":"+record[a].get('ulid')+",";
}
Ext.getCmp('DeviceCheckboxValuesField').setValue(CheckedValuesDevice.slice(0, -1));
//selectedRowIndx = Ext.getCmp('secondGrid').getStore().indexOf(record[0]);
//defaultlab = record[0].get('ulid');
} else
{
// Ext.getCmp('favoriteModifyButton').disable();
// Ext.getCmp('favoriteDeleteButton').disable();
// Ext.getCmp('favoriteExecuteButton').disable();
}
}
},
tbar:[
CheckboxValuesField
]
});
var secondGridModel = new Ext.selection.CheckboxModel(
{
allowBlank : false,
listeners :
{
checkOnly : true,
selectionchange: function(model, record, options)
{
if (model.getCount())
{
// //selectedRowIndx = Ext.getCmp('secondGrid').getStore().indexOf(record[0]);
// defaultlab = record[0].get('ulid');
var CheckedNum = record.length;
var CheckedValues = "";
for(var a=0;a<CheckedNum;a++)
{
CheckedValues += record[a].get('ulid')+",";
}
CheckboxValuesField2.setValue(CheckedValues.slice(0, -1));
} else
{
// Ext.getCmp('favoriteModifyButton').disable();
// Ext.getCmp('favoriteDeleteButton').disable();
// Ext.getCmp('favoriteExecuteButton').disable();
}
}
},
tbar:[
CheckboxValuesField2
]
});
var firstGridStore = Ext.create('Ext.data.Store',
{
autoLoad : true,
loadmask : false,
fields : ['spname', 'city_name', 'ulid'],
model : 'DataObject',
proxy :
{
type : 'ajax',
url : '../src/profile_labs.class.php?action=searchLab',
actionMethods: { create: 'POST', destroy: 'DELETE', read: 'POST', update: 'POST'},
extraParams :
{
city : examples.getValue(),
searchString :searchString.getValue(),
action :'searchLab'
},
reader:
{
type :'json',
root : 'myData'
}
}
});
var columns1 =
[
{text: "Lab Name", flex: 1, sortable: true, dataIndex: 'spname'},
{text: "City Name", width: 100, sortable: true, dataIndex: 'city_name'}
];
// Column Model shortcut array
var columns2 =
[
{text: "Lab Name", flex: 1, sortable: true, dataIndex: 'spname'
// ,renderer:function test(v, p, record, rowIndex){
// record_testbed_id = record.get('ulid');
// if( PrimaryLab ==record_testbed_id)
// {
// secondGridModel.select(rowIndex,true);
// }
// return v;
// }
},
{text: "City Name", width: 100, sortable: true, dataIndex: 'city_name'},
{text: "Default Lab" ,
renderer: function change(v, p, record, rowIndex)
{
if(PrimaryLab == record.get('ulid'))
{
return '<input type="radio" name="rd" value="'+record.get('ulid')+'" checked = "checked" />';
}
else{
return '<input type="radio" name="rd" value="'+record.get('ulid')+'" />';
}
}
}
];
var encode = false;
var local = true;
var myFilters =
{
ftype : 'filters',
encode : false,
local : false,
autoReload : true,
filters:
[
{
type : 'string',
dataIndex : 'spname'
},
{
type : 'string',
dataIndex : 'city_name'
}
]
};
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel',
{
width : 400,
height : 300,
multiSelect : true,
id : 'firstGrid',
features : [ myFilters],
selModel : firstGridModel,
viewConfig :
{
listeners :
{
}
},
store : firstGridStore,
columns : columns1,
stripeRows : true,
margins : '0 2 0 0',
title : 'Search Result'
});
var addDeviceBtn = new Ext.Button(
{
text : '=>',
handler : function(){
rowsSelected = firstGrid.getSelectionModel().getSelection();
var store = Ext.getCmp('secondGrid').getStore();
function addRow(record, index, allItems) {
var foundItem = store.findExact('ulid', record.data.ulid);
if (foundItem == -1) {
store.add(record);
}
else{
// Ext.MessageBox.alert('Error!', record.data.ulid+' lab already added');
}
}
Ext.each(rowsSelected,addRow);
},
tooltip :'Select Lab'
});
var removeDeviceBtn = new Ext.Button(
{
text : '<=',
handler : function() {
rowsSelected = secondGrid.getSelectionModel().getSelection();
var store = Ext.getCmp('secondGrid').getStore();
store.remove(rowsSelected);
},
tooltip :'Remove Lab'
});
var centerPanel = Ext.create('Ext.Panel', {
width : 40,
height : 300,
// forceFit : true,
margins : '120 0 0 0',
layout : {
type: 'vbox',
padding : 5
},
border : false,
items : [
addDeviceBtn,
removeDeviceBtn
]
});
var secondGridStore = Ext.create('Ext.data.Store',
{
autoLoad : true,
id : 'secondGridStore',
loadmask : false,
fields : ['spname', 'city_name', 'ulid'],
proxy :
{
type : 'ajax',
url : '../src/profile_user.class.php',
actionMethods: { create: 'POST', destroy: 'DELETE', read: 'POST', update: 'POST'},
extraParams :
{
action : 'getUserLabDetails'
},
reader :
{
type :'json'
}
}
});
// create the destination Grid
var secondGrid = Ext.create('Ext.grid.Panel',
{
width : 400,
height : 300,
id : 'secondGrid',
multiSelect : true,
selModel : secondGridModel,
features : [ myFilters],
viewConfig :
{
listeners :
{
}
},
store : secondGridStore,
columns : columns2,
stripeRows : true,
// margins : '0 0 0 3',
title : 'Selected Labs'
});
//Simple 'border layout' panel to house both grids
var dndPanel = Ext.create('Ext.Panel',
{
//autowidth : true,
width : 850,
height : 300,
layout :
{
type : 'hbox'
},
items :
[
firstGrid,
centerPanel,
secondGrid
],
buttons :
[
{
text : 'Save',
descriptionText : 'Save',
handler : function()
{
var selrad = document.getElementsByName("rd");
var srlen = selrad.length;
for(x=0; x<srlen; x++)
{
if(document.getElementsByName("rd")[x].checked)
{
defaultlab = document.getElementsByName("rd")[x].value
}
}
if(srlen != 0)
{
//alert(defaultlab);
if(defaultlab != '' )
{
var gridSecondStore = Ext.getCmp('secondGrid').getStore();
//console.log(gridSecondStore);
var selected_count = gridSecondStore.getCount();
var i ;
var sellabrefid = "";
for(i=0; i<selected_count; i++)
{
//---commented on 19-09-2011
//sellabrefid += "'"+gridSecondStore.data.items[i].data.ulid+"'"+",";
sellabrefid += gridSecondStore.data.items[i].data.ulid+",";
var strLen = sellabrefid.length;
var myStr = sellabrefid.slice(0,strLen-1);
}
var URLProfile = '../src/profile_user.class.php';
Ext.Ajax.request(
{
waitMsg: 'Please wait...',
url: URLProfile,
params: { action:'setProfile', selectedlab:myStr, defaultlab:defaultlab },
success: function(response)
{
var resultDevice= eval('(' + response.responseText + ')');
if(resultDevice == 1)
{
Ext.MessageBox.alert('Success!','Profile Saved Successfully!');
window.close();
parent.location.reload();
}
},
failure: function(response)
{
var resultDevice=response.responseText;
Ext.MessageBox.alert('error','Could not connect to the database.Please try later!');
}
});
}
else
{
Ext.MessageBox.alert('error','Please select default lab');
}
}
else
{
Ext.MessageBox.alert('error','Please select atleast one lab to save');
}
}
},
]
});
var displayPanel = Ext.create('Ext.Panel',
{
autowidth : true,
height : 400,
forceFit : true,
renderTo : Ext.getBody(),
layout :
{
type : 'vbox'
},
items :
[
searchform,
dndPanel
]
});
examples.setValue(myCity);
});
Answered: 'xtype' is null or not an object error in IE 8
Originally Posted by skirtle
Reply With Quote
