Related
My site is code in ASP.NET MVC 3.0.
with libraries:
jQuery 3.0.0,
jQuery Validation 1.17.0,
(I'm not sure which others can be useful mentioning).
My problem happens when testing in Internet Explorer 11, exactly when user press a button created as a "Custom Action" using jTable.org. This test happens in a Windows 2012 Server.
The same site tested on Firefox in same server is working without this or any other issue.
In IE, the regular buttons created by jTable for Create, Edit and Delete actions, are working.
This is the code for the View:
#model SuperSBL2.WebMVC3.ViewModels.HTEList
#{
ViewBag.Title = "Administrar HTEs";
}
#section CssImport{
<style>
div.filtering
{
border: 1px solid #999;
margin-bottom: 5px;
padding: 10px;
background-color: #EEE;
}
</style>
}
<h2>Administrar HTEs</h2>
<div class="filtering">
<form>
<label>Línea de Producción: <input type="text" name="ProductionLineName" id="ProductionLineName" /></label>
<label>Area: <input type="text" name="AreaName" id="AreaName" /></label>
<label>Operación: <input type="text" name="OperationName" id="OperationName" /></label>
<br /><label>Modelo: <input type="text" name="ModelName" id="ModelName" /></label>
<label>Tipo (ensameble/subensamble): <input type="text" name="HTETypeName" id="HTETypeName" /></label>
<button type="submit" id="LoadRecordsButton" class="btn btn-primary">Buscar registros</button>
</form>
</div>
<div id="HTEContainer" style="width: 1200px; "></div>
<br />
<button type="submit" id="GoBack" class="btn btn-default">REGRESAR</button>
<script type="text/javascript">
$(document).ready(function () {
//Localization texts
var spanishMessages = {
serverCommunicationError: 'Error de comunicación con el servidor, no puedo conectarme a la API.',
loadingMessage: 'Obteniendo datos...',
noDataAvailable: 'No hay datos disponibles!',
addNewRecord: 'Nuevo HTE',
editRecord: 'Editar HTE',
areYouSure: 'Estás seguro?',
deleteConfirmation: 'Estás a punto de borrar éste registro. Por favor confirma.',
save: 'Guardar HTE',
saving: 'Grabando',
cancel: 'Cancelar',
deleteText: 'Borrar HTE',
deleting: 'Borrando',
error: 'Error',
close: 'Cerrar',
cannotLoadOptionsFor: 'No puedo cargar opciones para campo {0}',
pagingInfo: 'Mostrando {0} a {1} de {2} registros',
pageSizeChangeLabel: 'Registros',
gotoPageLabel: 'Ir a página',
canNotDeletedRecords: 'No puedo borrar {0} de {1} registros!',
deleteProggress: 'Borrado {0} de {1} registros, procesando...'
};
$('#HTEContainer').jtable({
messages: spanishMessages, //Localizacion
title: 'Lista de HTEs',
paging: true,
pageSize: 10,
sorting: true,
defaultSorting: 'AreaName ASC',
selecting: true,
actions: {
listAction: '#Url.Action("HTEListForGrid")',
deleteAction: '#Url.Action("DeleteHTE")',
updateAction: '#Url.Action("UpdateHTE")',
createAction: '#Url.Action("CreateHTE")'
},
fields: {
HTEHeaderId: {
key: true,
create: false,
edit: false,
list: false
},
HTETypeID: {
title: 'Tipo',
list: true,
edit: false,
create: true,
options: '#Url.Action("GetHTETypeOptions","HTE")'
},
LineID: {
title: 'Línea de Producción',
//width: '35%',
list: true,
options: '#Url.Action("GetProductionLinesOptions","MasterData")'
},
AreaId: {
title: 'Area',
dependsOn: 'LineID', // jTable builds cascade dropdowns!
//width: '35%',
list: true,
options: function (data) {
if (data.source == 'list') {
//Return url of all countries for optimization.
//This method is called for each row on the table and jTable caches options based on this url.
return '/MasterData/GetAreasOptionsByProductionLineID?productionLineId=0';
}
//This code runs when user opens edit/create form or changes continental combobox on an edit/create form.
//data.source == 'edit' || data.source == 'create'
return '/MasterData/GetAreasOptionsByProductionLineID?productionLineId=' + data.dependedValues.LineID;
}
},
OperationID: {
title: 'Operación',
dependsOn: 'AreaId', // jTable builds cascade dropdowns!
//width: '35%',
list: true,
options: function (data) {
if (data.source == 'list') {
//Return url of all countries for optimization.
//This method is called for each row on the table and jTable caches options based on this url.
return '/MasterData/GetOperationOptionsByAreaID?areaId=0';
}
//This code runs when user opens edit/create form or changes continental combobox on an edit/create form.
//data.source == 'edit' || data.source == 'create'
return '/MasterData/GetOperationOptionsByAreaID?areaId=' + data.dependedValues.AreaId;
}
},
ModelID: {
title: 'Modelo',
dependsOn: 'LineID', // jTable builds cascade dropdowns!
//width: '35%',
list: true,
options: function (data) {
if (data.source == 'list') {
//Return url of all countries for optimization.
//This method is called for each row on the table and jTable caches options based on this url.
return '/MasterData/GetModelOptionsByProductionLine?productionLineId=0';
}
//This code runs when user opens edit/create form or changes continental combobox on an edit/create form.
//data.source == 'edit' || data.source == 'create'
return '/MasterData/GetModelOptionsByProductionLine?productionLineId=' + data.dependedValues.LineID;
}
},
OperationAvailableTime: {
title: 'Tiempo disponible',
//width: '35%',
list: true,
edit: false,
create: false
} ,
Effiency: {
title: 'Effciencia',
//width: '35%',
list: true
} ,
RevisionNumber: {
title: '# Revisión',
//width: '35%',
list: true,
edit: false,
create: false,
defaultValue: '0'
},
RevisionDate: {
title: 'Fecha Revisión',
//width: '15%',
type: 'date',
list: true,
edit: false,
create: false,
displayFormat: 'yy-mm-dd'
},
ProductionRate: {
title: 'Producción Diaria',
//width: '35%',
list: true
},
Taktime: {
title: 'Taktime',
//width: '35%',
list: true
},
RequiredHeadCount: {
title: 'Head Count',
//width: '35%',
list: true
},
HTEStatus: {
title: 'Status',
//width: '35%',
list: true,
edit: false,
create: false,
options: '#Url.Action("GetHTEStatusOptions","HTE")'
},
Active: {
title: 'Activo?',
//width: '12%',
type: 'checkbox',
list: true,
edit: false,
create: false,
values: { 'false': 'No Activo', 'true': 'Activo' },
defaultValue: 'true'
},
Overspeed: {
title: 'OverSpeed',
create: true,
edit: true,
list: true
//, defaultValue: #Html.Raw(Json.Encode(ViewBag.OverSpeed))
},
CustomActionAdmin: {
title: '',
//width: '1%',
sorting: false,
create: false,
edit: false,
list: true,
display: function (data) {
if (data.record) {
return '<button title="" id="btnAdmin" class="jtable-command-button glyphicon glyphicon-cog" onclick="transferAdmin(' + data.record.HTEHeaderId + '); return false;"></button>';
}
}
},
CustomActionActivities: {
title: '',
//width: '1%',
sorting: false,
create: false,
edit: false,
list: true,
display: function (data) {
if (data.record) {
return '<button title="" id="btnAdmin" class="jtable-command-button glyphicon glyphicon-wrench" onclick="transferHTEDetails(' + data.record.HTEHeaderId + '); return false;"></button>';
}
}
}
}
});
//Re-load records when user click 'load records' button.
$('#LoadRecordsButton').click(function (e) {
e.preventDefault();
$('#HTEContainer').jtable('load', {
ProductionLineName: $('#ProductionLineName').val(),
AreaName: $('#AreaName').val(),
OperationName: $('#OperationName').val(),
ModelName: $('#ModelName').val(),
HTETypeName: $('#HTETypeName').val()
});
});
//Load all records when page is first shown
$('#LoadRecordsButton').click();
$('#GoBack').click(function (e) {
e.preventDefault();
window.location.replace("/HTE");
});
});
function transferAdmin(hteHeaderId) {
window.location.replace("/HTE/AdminSettings/" + hteHeaderId);
};
function transferHTEDetails(hteHeaderId) {
window.location.replace("/HTE/HTEActivitiesList/?HTEHeaderId=" + hteHeaderId);
};
</script>
<br />
#section scripts {
}
Now, this is the code for the _Layout.cshtml in use:
<!DOCTYPE html>
#{
var jTableStyle = "metro/blue/jtable.css";
if (!string.IsNullOrEmpty(Request["jTableStyle"]))
{
jTableStyle = Request["jTableStyle"];
}
}
<html lang="es-mx">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Super Sistema Balanceo de Líneas - #ViewBag.Title - </title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/metroblue/jquery-ui.css")" rel="stylesheet" type="text/css" />
#*<link href="#Url.Content("~/Content/highlight.css")" rel="stylesheet" type="text/css" />*#
<link href="#Url.Content("~/Scripts/jtable/themes/" + jTableStyle)" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Scripts/syntaxhighligher/styles/shCore.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Scripts/syntaxhighligher/styles/shThemeDefault.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/core.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/datepicker.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/theme.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" type="text/css" />
#RenderSection("CssImport", false)
<script src="#Url.Content("~/Scripts/jquery-3.0.0.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-migrate-3.0.0.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.12.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.unobtrusive-3.0.0.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.date.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#* <script src="#Url.Content("~/Scripts/jquery.validate-vsdoc.js")" type="text/javascript"></script>*#
<script src="#Url.Content("~/Scripts/modernizr-2.8.3.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/syntaxhighligher/shCore.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/syntaxhighligher/shBrushJScript.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/syntaxhighligher/shBrushXml.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/syntaxhighligher/shBrushCSharp.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/syntaxhighligher/shBrushSql.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/moment.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/respond.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jtable/jquery.jtable.js")"></script>
<script src="#Url.Content("~/Scripts/jtablesite.js")" type="text/javascript"></script>
</head>
<body>
#Html.Partial("_NavBar")
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Super Sistema Balanceo de Líneas</p>
</footer>
</div>
#RenderSection("scripts", required: false)
#RenderSection("CustomScripts", required: false)
</body>
</html>
This is a picture of system in Internet Explorer, displayed as expected:
page displayed in Internet Explorer
You can see the rendering is as expected, not issue on this area with Internet Explorer.
Red arrows indicates the buttons created as Custom Action, once pressed up, nothings happens. When the IE developer tools are displayed, I press the buttons indicated with Read arrows, nothing happens: not even an error in console, not even an error in Network tab, nothing at all. This is error I'm having.
Green arrows indicates the buttons created by jTable for EDIT, CREATE and DELETE actions as part of the grid. These buttons are working perfect. No issue on this area. See these pictures:
Page in IE showing modal for New record
Page in IE showing modal for Edit record
I hopes you guys can provide any idea.
Thanks,
Gerardo.
This a complex senario, so I cannot replicate it.
I observe from your code, that you are adding click handlers via javascript in the button definitions. Have you tried applying the click handler via jQuery
display: function (data) {
var $but = '';
if (data.record) {
$but = $('<button title="" class="jtable-command-button glyphicon glyphicon-cog" ></button>');
$but.click(transferAdmin(data.record.HTEHeaderId));
}
return $but;
}
I would also point out your original code was creating a button using the same id btnAdmin on every row of the table which is neither good practice or useful, so I have omitted that, as it is possibly another reason why IE gets confused.
Thanks #misterP for his reply. After having bad times with this, I managed to understand what was wrong, and fixed it.
Let me try to explain fixes to issue I was having.
1) Main problem was that in IE, my jQuery logic was not working, when it worked in Firefox and Chrome. I was not aware of IE compatilibity modes that are fixed with the meta tag at level. So, on file _layout.chtml, I set the following:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...
2) Regarding how I managed the functionality on the custom action, I read online that when working with jQuery targeting dynamic elements, we should start the filtering against a fixed tag --- hence I used ContainerForJTable. I declare a custom attribute seleccionable on the dynamic object:
display: function (data) {
if (data.record) {
return '<button id="' + data.record.FileID + '" class="jtable-command-button glyphicon glyphicon-eye-open seleccionable"></button>';
}
}
3) I wrote a function (outside of the jtable object creation --- $('#ContainerForJTable').jtable({..) to add an event to objects matching a filter using my custom attribute:
$('#ContainerForJTable').on('click', '.seleccionable', function () {
var theID = $(this).attr("id");
//console.log("The id is " + theID);
viewFiles(theID);
});
After these changes, the jtables objects had been working without any issues.
thanks,
Version jqGrid used here:
#license Guriddo jqGrid JS - v5.2.0 - 2016-11-27 Copyright(c) 2008, Tony Tomov, tony#trirand.com
The first block of code below is an entire self contained implementation of jqGrid. It is in fact mostly taken from one of the examples on the jqGrid site. In it I added a snippet, the part between the comment lines with the clip markings.
That added snipped adds a custom editfunc. It works nicely (in the example it is of course more or less a stub, only doing an alert). Also, searching works, with all of its default parameters. For both, select a row and click on the respective icon of Edit or Search.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="./lib/jquery/jquery.min.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="./lib/jqGrid-js-free/js/jquery.jqGrid.js"></script>
<!-- This is the localization file of the grid controlling messages, labels, etc.-->
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="./lib/jqGrid-js-free/js/i18n/grid.locale-en.js"></script>
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" type="text/css" media="screen" href="./lib/jquery-ui/jquery-ui.css" />
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="./lib/jqGrid-js-free/css/ui.jqgrid.css" />
<meta charset="utf-8" />
<title>jqGrid without PHP - Loading Data - JSON Live</title>
</head>
<body>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
colModel: [
{
label: 'Title',
name: 'Title',
width: 150,
formatter: formatTitle
},
{
label: 'Link',
name: 'Link',
width: 80,
formatter: formatLink
},
{
label: 'View Count',
name: 'ViewCount',
width: 35,
sorttype:'integer',
formatter: 'number',
align: 'right'
},
{
label: 'Answer Count',
name: 'AnswerCount',
width: 25
}
],
viewrecords: true, // show the current page, data rang and total records on the toolbar
width: 780,
height: 200,
rowNum: 15,
datatype: 'local',
pager: "#jqGridPager",
caption: "Load live data from stackoverflow"
});
fetchGridData();
function fetchGridData() {
var gridArrayData = [];
// show loading message
$("#jqGrid")[0].grid.beginReq();
$.ajax({
url: "http://api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jqgrid&site=stackoverflow",
success: function (result) {
for (var i = 0; i < result.items.length; i++) {
var item = result.items[i];
gridArrayData.push({
Title: item.title,
Link: item.link,
CreationDate: item.creation_date,
ViewCount: item.view_count,
AnswerCount: item.answer_count
});
}
// set the new data
$("#jqGrid").jqGrid('setGridParam', { data: gridArrayData});
// hide the show message
$("#jqGrid")[0].grid.endReq();
// refresh the grid
$("#jqGrid").trigger('reloadGrid');
}
});
}
function formatTitle(cellValue, options, rowObject) {
return cellValue.substring(0, 50) + "...";
};
function formatLink(cellValue, options, rowObject) {
return "<a href='" + cellValue + "'>" + cellValue.substring(0, 25) + "..." + "</a>";
};
/*---- 8< ------*/
// editfunc here works (an alert is popped up), although the format of the function parameters is not according to spec:
// searchfunc also works (it is the default)
$('#jqGrid').jqGrid( 'navGrid', '#jqGridPager',{
add:false, del:false, view:false,
editfunc: function(){alert('EDIT');}
});
/*---- >8 ------*/
});
</script>
</body>
</html>
Now take the same file, remove the small snippet between the snip lines, and replace it with the following snippet, that looks more like something I need to implement:
/*---- 8< ------*/
// editfunc does NOT work as desired here (no alert)
// search function works, WITH the parameters as specified here
// from the file jquery.jqGrid.js (): navGrid : function parameters: (elem, p, pEdit, pAdd, pDel, pSearch, pView)
// (=jqGrid-free #license Guriddo jqGrid JS - v5.2.0 - 2016-11-27 Copyright(c) 2008, Tony Tomov, tony#trirand.com)
$('#jqGrid').jqGrid( 'navGrid', '#jqGridPager',
{ add:false, del:false, view:false }, // p
{ editfunc: function(r){alert('EDIT');} }, // pEdit (does NOT work)
{ }, // pAdd
{ }, // pDel
{ multipleSearch: true, closeAfterSearch:true, closeOnEscape:true, searchOnEnter:true, showQuery:true }, // pSearch (works with these options)
{ } // pView
);
/*---- >8 ------*/
Here, alas the editfunc does not work at all, I get the default edit function. Search now works though, as desired with the custom specified parameters.
In short: I cannot seem to get both a customized editfunc and search with custom parameters working!
I cannot see anything wrong with the second snippet. It is btw. also per some examples on the jqGrid wiki.
Any hints to get both working together would be appreciated.
The problem is very easy: you placed editfunc in the wrong place in your last snippet. The editfunc should be specified as the property of the second parameter of navGrid (together with add:false, del:false, view:false). You used the editfunc correctly in the first part of your code, but you placed it in the second part of the code on the wrong place. You can fix your code by usage
$('#jqGrid').jqGrid( 'navGrid', '#jqGridPager',
{ add:false, del:false, view:false, editfunc: function(r){alert('EDIT');} }, // p
{ }, // pEdit
{ }, // pAdd
{ }, // pDel
{ multipleSearch: true, closeAfterSearch:true, closeOnEscape:true,
searchOnEnter:true, showQuery:true }, // pSearch (works with these options)
{ } // pView
);
By the way, you placed the code of commercial product Guriddo jqGrid JS in the directory jqGrid-js-free, which sounds strange. Guriddo jqGrid JS can't be used for free. You can see the current prices here. I started development of free jqGrid fork of jqGrid, which can be used completely free of charge, exactly because of that. Free jqGrid implemented many new features, which can be helpful for you. The demo https://jsfiddle.net/OlegKi/odvxefra/3/ is a small modification of your code, which displays
I used additionally
url: "https://api.stackexchange.com/2.2/questions",
// add sending of custom parameters to the URL
postData: {
order: "desc",
sort: "activity",
tagged: "jqgrid",
site: "stackoverflow"
},
datatype: "json",
// below prmNames remove sending all standard jqGrid paranmeters
prmNames: {
page: null,
rows: null,
sort: null,
order: null,
search: null,
nd: null,
id: "question_id"
},
jsonReader: {
root: "items",
repeatitems: false,
id: "question_id"
},
loadonce: true,
forceClientSorting: true,
sortname: "creation_date",
sortorder: "desc"
The data will be loaded from the same URL "http://api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jqgrid&site=stackoverflow", sorted locally by creation_date property in the desc order and displayed in the grid. One can use other properties in the custom formatter by adding the properties in additionalProperties. For example you can add additionalProperties: ["owner", "is_answered", "score", "last_activity_date"] to save the properties locally and to have access to the properties inside of, for example, custom formatter.
I am a new one to ExtJs 6.0 and I have to make a web page that will be automatically filled with HTML text. On the localhost it works fine but when I try to load my app through index.html that is in my App folder it displays nothing
This is my first class "List"
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name:'position', type:'string' },
{ name:'title', type:'string' },
{name:'rate', type:'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: '/app/view/main/data.json',
method:'GET',
reader: {
type: 'json',
root: 'foo'
}
},
autoLoad: true
});
var notiTpl = new Ext.XTemplate(
'<h1>TIOBE rate</h1>',
'<table>',
'<tr>',
'<td>Position on 2015</td>',
'<td>Programming language</td>',
'<td>Rate</td>',
'<td>Group</td>',
'</tr>',
'<tpl for=".">',
'<tr <tpl if="values.position%2 == 1">style="background-color: silver;"</tpl>>',
'<td>{position}</td>',
'<td>{title}</td>',
'<td>{rate}</td>',
'<tpl if="values.position<3">',
'<td>A</td>',
'<tpl elseif="values.position<5">',
'<td>B</td>',
'<tpl else>',
'<td>C</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>');
Ext.define('App.view.main.List', {
extend: 'Ext.view.View',
xtype: 'mainlist',
store: store,
tpl: notiTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'There is no text',
renderTo: Ext.getBody()
});
Second class "Main"
Ext.define('App.view.main.Main', {
extend: 'Ext.panel.Panel',
requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'App.view.main.List'
],
items: [{
title: 'Some html text',
items: [{
xtype: 'mainlist'
}]
}]
});
My app.js
/*
* This file is generated and updated by Sencha Cmd. You can edit this file as
* needed for your application, but these edits will have to be merged by
* Sencha Cmd when upgrading.
*/
Ext.application({
name: 'App',
extend: 'App.Application',
requires: [
'App.view.main.Main'
],
// The name of the initial view to create. With the classic toolkit this class
// will gain a "viewport" plugin if it does not extend Ext.Viewport. With the
// modern toolkit, the main view will be added to the Viewport.
//
mainView: 'App.view.main.Main'
//-------------------------------------------------------------------------
// Most customizations should be made to App2.Application. If you need to
// customize this file, doing so below this section reduces the likelihood
// of merge conflicts when upgrading to new versions of Sencha Cmd.
//-------------------------------------------------------------------------
});
My Application.js
/**
* The main application class. An instance of this class is created by app.js when it
* calls Ext.application(). This is the ideal place to handle application launch and
* initialization details.
*/
Ext.define('App.Application', {
extend: 'Ext.app.Application',
name: 'App',
stores: [
// TODO: add global / shared stores here
],
launch: function () {
Ext.create('App.view.main.Main').show();
},
onAppUpdate: function () {
Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
function (choice) {
if (choice === 'yes') {
window.location.reload();
}
}
);
}
});
My index.html
<!DOCTYPE HTML>
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>App</title>
<script type="text/javascript" src="ext/build/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="b0beccc4-d014-4af3-919d-fd0a75c6c656" type="text/javascript" src="bootstrap.js"></script>
</head>
<body></body>
</html>
I've already read tons of documentation but nothing helps.
UPDATE
I don't know how but now it displays only the part of xtemplate loop. It stucks on the part where it begins rendering through data from json, though localhost:1841 still displays the whole info
I figgured this out. The point was about CORS. If someone has the same problem - just use Mozila.
sorry if my questions are simple , i'm totaly new to jqGrid :)
1- i want to use (add,edit,delete) feature of jqGrid , as you see there are buttons on the footer part of my grid but when i click just a dialog box comes and no fields to enter !! i want it just like this page
see my screen picture of what happens !
2- what happens when i click on submit button ( after fixing part 1 ) , i want to know how datas post to server!
no matter what language , i want to not for example they sent as object or sth , to know how to process them !
tnx alot
my source code :
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index Page</title>
<!-- external scripts -->
<!-- jQuery & Bootstrap -->
<script type="text/javascript" src="{% static "js/jquery.js" %}"/></script>
<script type="text/javascript" src="{% static "js/jquery.jqGrid.min.js" %}"/></script>
<link rel="stylesheet" type="text/css" media="all" href="{% static "css/bootstrap.min.css?id=1" %}"/>
<script type="text/javascript" src="{% static "js/bootstrap.min.js" %}"/></script>
<!-- jQuery & Bootstrap -->
<!-- jqGrid -->
<link rel="stylesheet" type="text/css" media="screen" href="{% static "css/ui.jqgrid.css" %}" />
<link rel="stylesheet" type="text/css" media="screen" href="{% static "css/ui-lightness/jquery-ui.min.css" %}" />
<script type="text/javascript" src="{% static "js/grid.locale-en.js" %}"/></script>
<!-- jqGrid -->
<!-- own implemented scripts -->
<script type="text/javascript" src="{% static "js/script.js" %}"/></script>
<!-- own implemented scripts -->
<!-- external scripts-->
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url: "http://localhost:8000/getdata",
datatype: "json",
mtype: "GET",
colNames: ["شناسه", "کد","نام", "عنوان" ,"عنوان انگلیسی", "ظرفیت", "ظرفیت اضافه","قیمت روز"],
colModel: [
{ name: "id", index:"id", width: 60 , editable:true,editoptions: {readonly: "readonly"}},
{ name: "code", width: 60 , editable:true},
{ name: "name", width: 90 , editable:true},
{ name: "title", width: 90 ,editable:"true", editable:true},
{ name: "english_title", width: 100, align: "left", editable:true },
{ name: "capacity", width: 90, align: "left", editable:true },
{ name: "extra_capacity", width: 90, align: "left", editable:true },
{ name: "today_price", width: 80, align: "left" , editable:true},
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager',
loadonce:true,
sortname: 'id',
viewrecords: true,
sortorder: "desc",
rownumbers: true,
rownumWidth: 40,
gridview: true,
multiselect: false,
caption: "اتاق ها",
onSelectRow: function(ids) {
if(ids == null) {
ids=0;
if(jQuery("#list_d").jqGrid('getGridParam','records') >0 )
{
jQuery("#list_d").jqGrid('setGridParam',{url:"getpricelist?q=1&id="+ids,page:1}).trigger('reloadGrid');
}
} else {
jQuery("#list_d").jqGrid('setGridParam',{url:"getpricelist?q=1&id="+ids,page:1}).trigger('reloadGrid');
jQuery("#list_d").jqGrid('setCaption',"لیست قیمت اتاق شماره : "+ids)
}
}
});
jQuery("#list").jqGrid('navGrid','#pager',{edit:true,add:true,del:true,search:false},
/* {
recreateForm: true,
beforeShowForm: function ($form) {
$form.find(".FormElement[readonly]")
.prop("disabled", true)
.addClass("ui-state-disabled")
.closest(".DataTD")
.prev(".CaptionTD")
.prop("disabled", true)
.addClass("ui-state-disabled")
},
}, */
//edit options
{ // Edit option (parameters of editGridRow method)
recreateForm:true,
reloadAfterSubmit:true,
closeOnEscape:true,
savekey: [true,13],
closeAfterEdit:true,
url:'/edit',
ajaxEditOptions: {
beforeSend: function(jqXHR) {
var csrf_token = getCookie('csrftoken');
jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
}
},
afterSubmit: function () {
jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
console.log('changed data type');
return [true];
},
editData: {
csrfmiddlewaretoken: getCookie('csrftoken')
}
},
//add options
{
recreateForm:true,
reloadAfterSubmit:true,
closeOnEscape:true,
savekey: [true,13],
closeAfterAdd: true,
url:'/add',
ajaxEditOptions: {
beforeSend: function(jqXHR) {
var csrf_token = getCookie('csrftoken');
jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
}
},
afterSubmit: function () {
jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
console.log('changed data type');
return [true];
},
editData: {
csrfmiddlewaretoken: getCookie('csrftoken')
}
},
//delete options
{
recreateForm:true,
reloadAfterSubmit:true,
closeOnEscape:true,
savekey: [true,13],
url:'/delete',
ajaxEditOptions: {
beforeSend: function(jqXHR) {
var csrf_token = getCookie('csrftoken');
jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
}
},
afterSubmit: function () {
jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
console.log('changed data type');
return [true];
},
editData: {
csrfmiddlewaretoken: getCookie('csrftoken')
}
}
);
jQuery("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
jQuery("#list_d").jqGrid({
height: 100,
width:345,
url:'getpricelist?q=1&id=2',
datatype: "json",
colNames:['از','تا', 'قیمت'],
colModel:[
{name:'from',index:'from', width:100},
{name:'to',index:'to', width:100},
{name:'price',index:'price', width:80, align:"right"},
],
rowNum:5,
rowList:[5,10,20],
pager: '#pager_d',
sortname: 'item',
viewrecords: true,
sortorder: "asc",
multiselect: false,
caption:"لیست قیمت"
}).navGrid('#pager_d',{add:false,edit:false,del:false});
});
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
<table id="list_d"></table>
<div id="pager_d"></div>
</body>
</html>
views.py
from django.shortcuts import render
from django.utils import simplejson
from django.http import HttpResponse
from rooms.models import *
from django.db.models import Q
from django.core import serializers
def index(request):
return render(request, 'index.html')
def getdata(request):
data=room_type.objects.all()
json=[]
for o in data:
json.append({'id':o.id, 'code':o.code,'name':o.name,'title':o.title,
'english_title':o.english_title, 'capacity':o.capacity,
'extra_capacity':o.extra_capacity, 'today_price':o.today_price })
return HttpResponse(simplejson.dumps(json), mimetype='application/json',content_type='application/json' )
def getpricelist(request):
requested_room_id = request.GET.get('id', '')
room = room_type.objects.get(id = requested_room_id)
price_list_set = room.price_list_set.all()
json=[]
for price_list in price_list_set:
json.append({'from':price_list.from_date, 'to':price_list.to_date, 'price':price_list.price})
return HttpResponse(simplejson.dumps(json), mimetype='application/json',content_type='application/json' )
def edit(request):
print "################ediit#################"
return render(request, 'index.html')
def add(request):
print "################addddddddddd#################"
return render(request, 'index.html')
def delete(request):
print "################deeeeeeeeeeeeeel#################"
return render(request, 'index.html')
The first problem is very easy to solve. The editing form (Add and Edit) includes only the information about editable columns. So you need include editable: true property in every column of colModel which you want to allow the user to edit.
It's important to understand that there are default value for every known property of colModel. I recommend you to examine the last ("Default") column of the table on the place of the documentation. You will find that default value of align is "left", so you can remove align: "left" from all colModel items. In the same way you can see that default value of editable property is false. It way the reason why you had empty editing form. If you need to set editable: true to more as the half of columns of colModel I would recommend you to use cmTemplate option of jqGrid (see the answer for more details). After including cmTemplate: {editable: true} option for example you will need to include editable: false in all columns which you want don't make editable. All other columns will be editable.
If you need to include some column information in Add/Edit form, but don't permit the user to edit it you can use editable: true together with editoptions: {readonly: "readonly"} or editoptions: {disabled: "disabled"}. The option will include the information in the edit form, but set additional readonly="readonly" or disabled="disabled" attribute on the corresponding editing field. One can add additional "ui-state-disabled" class on such filed like described in the answer. In the way you can make some fields editable, but only for example in Add dialog and hold it disabled/readonly in Edit dialog. Don't forget to use recreateForm: true option.
To make editing successful it's very important to fill rowid of the grid correctly. If you have column with name: "id" or if some column have key: true property then the corresponding value will be used as rowid. The information which will be send to the server is described here (about Edit), here (about Add) and here (about Delele). The information contains always id=rowidvalue property. Add/Edit form post additionally information about all (inclusive hidden) editable columns in the form: name=value, where the name is the value of name property of the column definition in the colModel.
By default my website are having multi tabs, when just refresh the web site, the first tabs haven't loaded, then i clicked second tabs. second tabs are working fine, but when u go back first tabs, it is blank.
p/s: when the first tabs are haven't loaded finish, u are click a new tabs, that will cause this error from ext-all.js
TypeError: b.getComputedStyle(...) is null
...f(p==k){if(a+E+l.width>(O>=0?u.x+u.width-b:b-u.x)){p=M}}else{if(a+E>l.width){p=k...
2
all the tabs header are included ext-all.js
example tab 1 vehicle.html header code
<script type="text/javascript" src="../resources/js/ext-all.js"></script>
<link rel="stylesheet" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../resources/js/checkcookie.js?<?php echo time(); ?>"></script>
<script type="text/javascript" src="vehicle.js?<?php echo time(); ?>"></script>
example tab 2 driver.html header code
<script type="text/javascript" src="../resources/js/ext-all.js"></script>
<link rel="stylesheet" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../resources/js/checkcookie.js?<?php echo time(); ?>"></script>
<script type="text/javascript" src="driver.js?<?php echo time(); ?>"></script>
this is my tabs code
Ext.onReady(function() {
var currentItem;
var WinWidth = 1;
var tabs = Ext.widget('tabpanel', {
renderTo: 'tabs',
id : 'tabspanel',
cls : 'MainPanel',
resizeTabs: true,
enableTabScroll: true,
width: window.innerwidth,
height: window.innerHeight - 30, //30 because menu height is 30px
tabBar: {
layout: { pack: 'center' }
},
defaults: {
autoScroll: false, //close the tab scrolling
bodyPadding: 0 //must 0,not margin at all
},
items: [
{
closable: false,
html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="vehicle/vehicle.html" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
iconCls: 'bus32',
title: 'Vehicle Manage'
},
{
closable: false,
html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="driver/driver.html" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
iconCls: 'tabuser',
title: 'Driver Manage'
},
{
closable: false,
html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="location/location.html" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
iconCls: 'location32',
title: 'Location Manage'
},
{
closable: false,
html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="route/route.php" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
iconCls: 'route32',
title: 'Route Manage'
}
],
plugins: Ext.create('Ext.ux.TabCloseMenu', {
extraItemsTail: [
'-',
{
text: 'Closable',
checked: true,
hideOnClick: true,
handler: function (item) {
currentItem.tab.setClosable(item.checked);
}
},
'-',
{
text: 'Enabled',
checked: true,
hideOnClick: true,
handler: function(item) {
currentItem.tab.setDisabled(!item.checked);
}
}
],
listeners: {
aftermenu: function () {
currentItem = null;
},
beforemenu: function (menu, item) {
menu.child('[text="Closable"]').setChecked(item.closable);
menu.child('[text="Enabled"]').setChecked(!item.tab.isDisabled());
currentItem = item;
}
}
})
});
By Default are having 4 tabs, it is very hard to explain what i m facing. hope those information are enough to let u all understand, apologize if any thing let u confuse
ADDITIONAL INFO
i have tried to load different page load different file ext-all.js
example tab 1 load ext-all.js and tab 2 load ext-all2.js , it is working fine
To start off, you really should load Extjs in the main document and not in the iframes. In no case you need to load ex-all.js and ext-all2.js, like you tried.
Then, try to load the tab contents with ajax as #Damask suggests. You could do this using the loader config or using Ext.Ajax.
Also, do not use ext-all.js for development, because it is minified, and the errors you get are not easy to interpret. Instead of this, use ext-debug.js, like recommended here, or even better, use ext-dev.js. These work with Ext.Loaderand load only the classes you need.
check your component ids. It may do to the duplication
What forced you to use iframes with ExtJS ? Is it really justified ? Use ajax for tabs loading. It will prevent you from iframe related issues.