We Keep Coding

Jqgrid row height changes on mouseover

Here is my colNames:
colNames: ['', '<span class="ui-icon ui-icon-flag"></span>', 'NTPEP Number', 'Manufacturer', 'Product', 'Status','','Data', 'Actions'],
Here is my colModel:
colModel: [{ name: 'tc_id', index: 'tc_id', align: 'left', hidden: true, resizable: false, key: true },
{ name: 'Flag', index: 'Flag', width:30,align: 'left', resizable: false, formatter: function (cellvalue, options, rowObject) { return "<div id= flag_" + rowObject[0] + " class='flag'><span class='ui-icon ui-icon-flag'></span></div>" } },
{ name: 'NTPEP_Number', index: 'NTPEP_Number', width: 150, align: 'left', resizable: false, formatter: fontColorFormat },
{ name: 'Manufacturer', index: 'Manufacturer', width: 200, align: 'left', resizable: false },
{ name: 'Product', index: 'Product', width: 150, align: 'left', resizable: false, formatter: fontColorFormat },
{ name: 'Status', index: 'Status', width: 80, align: 'left', resizable: false },
{ name: 'Locked_Flag', index: 'Locked_Flag', width: 30, align: 'left', resizable: false,formatter:lockedFlag},
{ name: 'Data', sortable: false, edittype: 'select', width: 70, align: 'left', sortable: false, formatter: function (cellvalue, options, rowObject) { return "<div id= action_" + rowObject[0] + " class='action'><div class='btn-group' id='actions'><div class='collapse navbar-collapse'><ul class='actions'><li class='dropdown'><a href='#' class='dropdown-toggle grid-icon' data-toggle='dropdown'></a><ul class='dropdown-menu'><li><a href='#'>Product</a></li><li><a href='#'>Test</a></li></ul></li></ul></div></div><div class='clear'></div></div>"; }, resizable: false },
{ name: 'Actions', index: 'Actions', sortable: false, edittype: 'select', width: 85, align: 'left', sortable: false, formatter: function (cellvalue, options, rowObject) { return "<div id= action1_" + rowObject[0] + " class='action1'><div class='btn-group' id='actions'><div class='collapse navbar-collapse'><ul class='actions'><li class='dropdown'><a href='#' class='dropdown-toggle grid-icon' data-toggle='dropdown'></a><ul class='dropdown-menu'><li><a href='#'>Product</a></li><li><a href='#'>Test</a></li></ul></li></ul></div></div><div class='clear'></div></div>"; }, resizable: false }],
rowNum: 20,
rowList: [2, 10, 20, 50], // page size dropdown
pager: jQuery('#pager_Alerts'),
pgbuttons: true,
viewrecords: true,
pagerpos: 'right',
recordpos: 'left',
shrinkToFit: false,
sortorder: "asc",
sortname: "tc_id",
loadtext: "Loading",
width: 795,
height: "100%",
hoverrows: false,
onCellSelect: function (rowid, iCol, cellcontent, e) {}
In Chrome,when i move the mouse over rows,row height increase automatically like as follow.
This is not desired behavior:
While in IE,it works fine ,just like normal jqgrid row.
Kindly tell me,what is the problem?Is it css problem or i am missing some property?

Jquery flexigrid select check box by selecting the row

$("#rfqDetails").flexigrid({
dataType: 'json',
colModel: [
{ display: 'checkbox', name: '', width: 30, align: 'center' },
{ display: 'RfqNo', name: 'RfqNo', width: 80, sortable: false, align: 'center' },
{ display: 'PreferredSupplier', name: 'PreferredSupplier', width: 100, sortable: false, align: 'center' },
{ display: 'Status', name: 'Status', width: 80, sortable: false, align: 'center' },
{ display: 'Company', name: 'Company', width: 80, sortable: false, align: 'center' },
{ display: 'Edit', name: '', width: 80, sortable: false, align: 'center' },
{ display: 'View', name: '', width: 80, sortable: false, align: 'center' },
],
title: "RFQ Summary",
height: 320,
showToggleBtn: false,
singleSelect: false,
resizable: false
});
$('#rfqDetails').click(function ()
{
var selected = $('#rfqDetails .trSelected td:eq(0)');
$(selected).each(function ()
{
selected.attr('checked', 'checked')
});
});
The above is my code for flexigrid. In the first column I have the checkbox by selecting the row I have to select the checkbox and when deselecting the row the checkbox has to deselect.

using JSON when trying to add checkboxes to each dynamic list item

I am trying to populate a row with a checkbox in front as it is dynamically built.
I am new to Json.
Here is where I dynamically format the columns:
while(reader.Read()) {
if(i>=startRead&&i<maxCount) {
var actionBtns=new StringBuilder("");
jsonWriter.WriteStartObject();
jsonWriter.WritePropertyName("id");
jsonWriter.WriteValue("a"+i);
jsonWriter.WritePropertyName("cell");
jsonWriter.WriteStartObject();
//trying to add checkboxes here but not sure what to put as Value????
//need help with this part: i want to add a checkbox here ----------------
jsonWriter.WritePropertyName("exhibitCheckBox");
jsonWriter.WritePropertyName("actionBtns");
jsonWriter.WriteValue(actionBtns.ToString());
jsonWriter.WritePropertyName("ExhibitMovementID");
jsonWriter.WriteValue(reader["ExhibitMovementID"].ToString());
jsonWriter.WritePropertyName("Location");
jsonWriter.WriteValue(reader["Location"].ToString());
jsonWriter.WritePropertyName("TrackingNumber");
jsonWriter.WriteValue(reader["TrackingNumber"].ToString());
jsonWriter.WritePropertyName("MovedBy");
jsonWriter.WriteValue(reader["MovedBy"].ToString());
jsonWriter.WritePropertyName("ShipperName");
jsonWriter.WriteValue(reader["ShipperName"].ToString());
jsonWriter.WritePropertyName("ReceiverName");
jsonWriter.WriteValue(reader["ReceiverName"].ToString());
jsonWriter.WritePropertyName("Company");
jsonWriter.WriteValue(reader["Company"].ToString());
jsonWriter.WritePropertyName("Reason");
jsonWriter.WriteValue(reader["Reason"].ToString());
jsonWriter.WriteEndObject();
jsonWriter.WriteEndObject();
sb.Append(",");
}
my checkbox in my javascript is called "exhibitCheckBox"
:
$('#viewExhibitMoveHistoryGrid').flexigrid({
url: url,
dataType: 'json',
method: 'get',
colModel: [
//{ display: 'Actions', name: 'actionBtns', width: 50, sortable: true, align: 'center' },
{display: '<input type="checkbox" class="exhibitCheckBox" id="checkAllExhibits" />', name: 'checkbox', width: 20, sortable: false, align: 'left', process: caseFileRowSelected },
{ display: 'Move ID', name: 'ExhibitMovementID', width: 100, sortable: true, hide: false, align: 'center' },
{ display: 'Reason', name: 'Reason', width: 120, sortable: true, align: 'center' },
{ display: 'Moved By', name: 'MovedBy', width: 120, sortable: true, align: 'center' },
{ display: 'Moved To', name: 'ExhibitLocation', width: 120, sortable: true, align: 'center' },
{ display: 'Date', name: 'ExhibitMoveDate', width: 100, sortable: true, align: 'center' },
{ display: 'Time', name: 'ExhibitMoveTime', width: 100, sortable: true, align: 'center' },
{ display: 'Receiver', name: 'ReceiverName', width: 120, sortable: true, align: 'center' },
{ display: 'Company', name: 'Company', width:120, sortable: true, align: 'center' },
{ display: 'Shipper', name: 'ShipperName', width: 120, sortable: true, align: 'center' },
{ display: 'Tracking #', name: 'TrackingNumber', width: 120, sortable: true, align: 'center' },
{ display: 'Cost', name: 'ShippingCost', width: 120, sortable: true, align: 'center' }
],

figured it out:
jsonWriter.WritePropertyName("checkbox");
jsonWriter.WriteValue("<input class=\"exhibitMoveCheckBox\" id=\"exhibitMoveCheckBox_"+reader["ExhibitID"].ToString()+"\" type=\"checkbox\">");

extJs column layout issue

I have 3 extJs Windows. Each have some form control and then two tabs that display chart. Currently all windows appear at the same place and i have to drag them to make them stand in a row like this | | | . How can i create a 3 columns on screen and place each window in one of them. Please find the code of one of the window below. And yes i have seen this link
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/table.html but it doesnt help my cause. None of the content is displayed if i create 3 column layout like the what's mentioned in the link. Please assume that all of windows have the same code and suggest a way. One more thing, i have closable, and maximizable feature in all of the windows.Thanks.
var win = Ext.create('Ext.Window', {
id: 'r1',
width: eachWindowWidth,
height: eachWindowHeight,
hidden: false,
maximizable: true,
title: 'Registered Hosts',
renderTo: Ext.getBody(),
tbar: [{
xtype: 'combo',
width: 50,
store: optionRegistered,
mode: 'local',
fieldLabel: '',
name: 'answer',
anchor: '90%',
displayField: 'answer',
valueField: 'id'
}, {
xtype: 'datefield',
width: 90,
name: 'time',
fieldLabel: '',
anchor: '90%'
}, {
xtype: "label",
width: 20,
fieldLabel: text,
name: 'txt',
text: 'to'
}, {
xtype: 'combo',
id: 'c22devices',
width: 50,
store: optionRegistered,
mode: 'local',
fieldLabel: '',
name: 'answer',
anchor: '90%',
displayField: 'answer',
valueField: 'id'
}, {
xtype: 'datefield',
id: 'cl22devices',
width: 90,
name: 'time',
fieldLabel: '',
anchor: '90%'
}, {
xtype: 'button',
text: 'Ok'
}],
items: [
{
xtype: "label",
fieldLabel: text,
name: 'txt',
text: text
}, {
xtype: 'tabpanel',
id: "tabs1",
activeTab: 0,
width: eachTabWidth,
height: eachTabHeight,
plain: true,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [{
title: 'Normal Tab',
items: [{
id: 'chartCmp1',
xtype: 'chart',
height: 300,
width: 300,
style: 'background:#fff',
animate: true,
shadow: true,
store: storeRouge,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['total'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
grid: true,
fields: ['date'],
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('date') + ': ' + storeItem.get('total') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'total',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'date',
yField: 'total'
}]
}]
}, {
title: 'Table View',
xtype: 'grid',
id: "gridChart1",
width: 200,
height: 200,
collapsible: false,
store: storeRouge,
multiSelect: true,
viewConfig: {
emptyText: 'No information to display'
},
columns: [{
text: 'Devices',
flex: 50,
dataIndex: 'date'
}, {
text: 'Pass',
flex: 50,
dataIndex: 'total'
}]
}]
}],
listeners: {
resize: function () {
Ext.getCmp("tabs1").setWidth(this.width);
Ext.getCmp("tabs1").setHeight(this.height);
Ext.getCmp("chartCmp1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
}
}
});

The problem is, the Ext.Window while being descendand of Ext.Panel does not abide by the rules of the layout like normal Ext.Panels do, it floats by itself and is constrained only by the limits of the DOM element they're rendered to (body by default).
This means that you'll have to jump some loops to position and layout the windows manually. You can also try to create some descendand class from Ext.WindowGroup to help you manage your windows and keep them nice and tidy.

ExtJS Ext.Msg causes the grid headers disappear on IE6 and IE7 when using the RTL support for ExtJS 3.0

ok here is my code:
I a using RTL support for ExtJS 3.0 from
RTL support for ExtJS 3.0
var store = new Ext.data.JsonStore({
root: 'results',
baseParams: {
actionName: 'SearchDynamicArchive',
xmlFileName: 'Demo.xml'
},
totalProperty: 'totalCount',
idProperty: 'id',
remoteSort: false,
fields: ['fileName', 'cbDocType', 'cbDocSubject', 'txtDocDate', 'txtDocName', 'cbInitiativeDepartment', 'cbDepartmentInitiates', 'cbBuyerDepartment', 'cbEconomist', 'txtDemandNumber', 'txtCallNumber', 'txtSupplier', 'uploadDate', 'userName'],
url: 'DynamicActionsHandler.ashx',
autoLoad: {
params: {
limit: 30,
start: 0,
actionName: 'SearchDynamicArchive',
siteID: 'e60b36f9-2e62-4425-b015-5de58325aaa8',
panelId: 'bzqSearchPanel',
xmlFileName: 'Demo.xml'
}
}
});
var grid = new Ext.grid.GridPanel({
title: '',
store: store,
trackMouseOver: true,
disableSelection: true,
loadMask: false,
columns: [{
id: 'srf2',
header: '<b>שם צרופה</b>',
dataIndex: 'fileName',
width: 'auto',
sortable: true
}, {
id: 'cbDocType',
header: '<b>סוג מסמך</b>',
dataIndex: 'cbDocType',
width: 'auto',
sortable: true
}, {
id: 'cbDocSubject',
header: '<b>נושא מסמך</b>',
dataIndex: 'cbDocSubject',
width: 'auto',
sortable: true
}, {
id: 'txtFromDocDate',
header: '<b>תאריך מסמך</b>',
dataIndex: 'txtDocDate',
width: 'auto',
sortable: true
}, {
id: 'txtDocName',
header: '<b>שם מסמך</b>',
dataIndex: 'txtDocName',
width: 'auto',
sortable: true
}, {
id: 'cbInitiativeDepartment',
header: '<b>חטיבה יוזמת</b>',
dataIndex: 'cbInitiativeDepartment',
width: 'auto',
sortable: true
}, {
id: 'cbDepartmentInitiates',
header: '<b>אגף יוזם</b>',
dataIndex: 'cbDepartmentInitiates',
width: 'auto',
sortable: true
}, {
id: 'cbBuyerDepartment',
header: '<b>ממ"ח רכש</b>',
dataIndex: 'cbBuyerDepartment',
width: 'auto',
sortable: true
}, {
id: 'cbEconomist',
header: '<b>כלכלן</b>',
dataIndex: 'cbEconomist',
width: 'auto',
sortable: true
}, {
id: 'txtDemandNumber',
header: '<b>מספר דרישה</b>',
dataIndex: 'txtDemandNumber',
width: 'auto',
sortable: true
}, {
id: 'txtCallNumber',
header: '<b>מספר התקשרות</b>',
dataIndex: 'txtCallNumber',
width: 'auto',
sortable: true
}, {
id: 'txtSupplier',
header: '<b>ספק</b>',
dataIndex: 'txtSupplier',
width: 'auto',
sortable: true
}, {
id: 'txtFromDocUploadDate',
header: '<b>תאריך העלאה</b>',
dataIndex: 'uploadDate',
width: 'auto',
sortable: true
}, {
id: 'userName',
header: '<b>שם משתמש</b>',
dataIndex: 'userName',
width: 'auto',
sortable: true
}],
stripeRows: true,
viewConfig: {
forceFit: true,
enableRowBody: true,
showPreview: true
},
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
})
,
bbar: [new Ext.PagingToolbar({
id: 'paging-bar',
pageSize: 30,
store: store,
displayInfo: true,
displayMsg: localize.displayPages,
emptyMsg: localize.noDocsToDisplay,
listeners: {
beforechange: onBeforePageChange
}
})],
listeners: {
rowcontextmenu: onRowcontextmenu,
rowdblclick: function (g, ri, e) {
downloadFile(store.getAt(ri).id);
},
render: function (grid) {
grid.getEl().on("contextmenu", Ext.emptyFn, null, {
preventDefault: true
});
}
},
contextMenu: new Ext.menu.Menu({
items: [{
pressed: false,
enableToggle: false,
text: localize.updateRecord,
id: 'update_attachment'
}, {
pressed: false,
enableToggle: false,
text: localize.deleteRecord,
id: 'delete_attachment'
}, {
pressed: false,
enableToggle: false,
text: localize.downloadRecord,
id: 'download_attachment'
}],
listeners: {
itemclick: onItemclick
}
}),
autoExpandColumn: 'userName',
id: 'searchResultPanel',
enableColumnResize: true
});
Ext.onReady(function () {
var dynamic_grid = new Ext.Container({
layout: 'fit',
items: grid,
renderTo: 'dynamic_grid'
})
onPageResize();
window.onresize = onPageResize;
});
now when I pop up an Ext.Msg alert it comes with a masking layer that makes the grid header disappear.
Where should I look for a remedy here??
Any help will be appropriated...

Are you sure that you want to use Ext.MessageBox? If you refer to the API, this component differs from the regular javascript alert() in that it does not halt execution of code because it is asynchronous.
If you are intending to stop all execution of code until the user presses "OK" on the alert box, you should just stick to plain-old alert();