I lost all day and no matter what I do the dataview doesn't see the specific CSS,
I use extjs since a while and I am able to use every component but this is driving me crazy here is the view
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux.DataView', '../ux/DataView/');
Ext.require([
'Ext.data.*',
'Ext.util.*',
'Ext.view.View',
'Ext.ux.DataView.Animated',
'Ext.XTemplate',
'Ext.panel.Panel',
'Ext.toolbar.*',
'Ext.slider.Multi',
'Pandora.store.Product'
]);
Ext.define('Pandora.view.ProvaShowProdotti', {
extend: 'Ext.panel.Panel',
alias: 'widget.provaShowProdotti',
frame: true,
title: 'Liste des agents',
initComponent: function(){
this.items =[{
xtype: 'dataview',
store: 'Product',
cls: 'thumb',
style: 'border:1px solid #99BBE8; border-top-width: 0',
deferInitialRefresh: false,
itemSelector: 'div.thumb-wrap',
tpl : Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="http://localhost:8080/WebProjectTemplate/js/images/prova.jpg" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>'
), plugins : [
Ext.create('Ext.ux.DataView.Animated', {
duration : 550,
idProperty: 'productId'
})
]
}]
this.callParent();
}
});
And here is the HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title id="page-title">Pandora</title>
<link rel="stylesheet" type="text/css" href="ext-all-debug.css">
<link rel="stylesheet" type="text/css" href="../../example.css" />
<script type="text/javascript" src="../bootstrap.js"></script>
<script type="text/javascript" src="PropertyReader.js"></script>
<script type="text/javascript" src="Bundle.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body>
</body>
</html>
The styling for the DataView Component doesn't seem to be included in the ext-all-debug.css.
Try to include data-view.css, it contains the styling for the DataView elements that you have referenced.
Related
I'm working on asp.net website using master pages. I want to display data in jquery datatable in my content page but it is giving me an error
Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument. (StoreInwardRegister.aspx:49)
at j (jquery-1.11.3.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.11.3.min.js:2)
at Function.ready (jquery-1.11.3.min.js:2)
at HTMLDocument.J (jquery-1.11.3.min.js:2)
script files in site.master page:
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon.png" />
<link href="assets/libs/flot/css/float-chart.css" rel="stylesheet" />
<link href="dist/css/style.min.css" rel="stylesheet" />
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
<script src="assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="dist/js/sidebarmenu.js"></script>
<script src="dist/js/custom.min.js"></script>
<script src="assets/libs/inputmask/dist/min/jquery.inputmask.bundle.min.js"></script>
<script src="dist/js/pages/mask/mask.init.js"></script>
<script src="assets/libs/select2/dist/js/select2.full.min.js"></script>
<script src="assets/libs/select2/dist/js/select2.min.js"></script>
<script src="assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="assets/libs/quill/dist/quill.min.js"></script>
Script files in my content page where I want to implement datatable and excel, pdf export from databale
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
Datatable code:
<script type="text/javascript">
$(document).ready(function () {
$('#tblReport').DataTable({
"ajax": {
"url": "Helper/DataTableService.asmx/StoreRegisterReport",
"type": "POST",
"datatype": "json",
dataSrc: ""
},
"processing": true,
"columns": [
{
'data': 'Date', 'render': function (date) {
var date = new Date(parseInt(date.substr(6)));
var month = date.getMonth() + 1;
return date.getDate() + "/" + month + "/" + date.getFullYear();
}
},
{ 'data': 'No' },
{ 'data': 'SupplierName' },
{ 'data': 'DCBillNo' },
{
'data': 'DCBillDate', 'render': function (date) {
var date = new Date(parseInt(date.substr(6)));
var month = date.getMonth() + 1;
return date.getDate() + "/" + month + "/" + date.getFullYear();
}
},
{ 'data': 'MatDesc' },
{ 'data': 'TransportDet' },
{ 'data': 'InwardOutward' },
],
dom: 'lfrtipB',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
});
});
</script>
It is showing an error in console:
Datatable is not a function
But when I write defer at the end of <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" defer></script> Then it is displaying datatable but not showing excel, pdf buttons,
also showing an error in console that
Uncaught TypeError: Cannot read property 'ext' of undefined
at dataTables.buttons.min.js:8
Uncaught TypeError: Cannot read property 'Buttons' of undefined
at buttons.flash.min.js:30
at buttons.flash.min.js:8
Uncaught TypeError: Cannot read property 'Buttons' of undefined
at buttons.html5.min.js:11
at buttons.html5.min.js:8
Uncaught TypeError: Cannot read property 'ext' of undefined
at buttons.print.min.js:6
at buttons.print.min.js:5
what can be the issue?
I'm trying to display a simple dgrid as per the first demo on this page:
http://dgrid.io/tutorials/1.0/grids_and_stores/
The only trick is that I'm trying to put it inside an existing structure of containers. So I tried the onFocus event of the container, but when I click on that container, the grid is not showing, and no console.log message appears.
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'>
<script type='dojo/on' data-dojo-event='onFocus'>
require([
'dstore/RequestMemory',
'dgrid/OnDemandGrid'
], function (RequestMemory, OnDemandGrid) {
// Create an instance of OnDemandGrid referencing the store
var dom = require('dojo/dom');
console.log("onFocus event for CustomersGrid ContentPane");
dom.byId('studentLastname').value = 'test onFocus event';
var grid = new OnDemandGrid({
collection: new RequestMemory({ target: 'hof-batting.json' }),
columns: {
first: 'First Name',
last: 'Last Name',
totalG: 'Games Played'
}
}, 'grid');
grid.startup();
});
</script>
</div>
I could make it work by:
setting the id of the div to 'grid'
adding a "Click me" span (or I had nothing to focus on)
changing the event name from 'onFocus' to 'focus'
Then, the grid appears when you click on the 'Click me' text (to activate focus).
Below the corresponding full source page (for my environment):
<!DOCTYPE HTML><html lang="en">
<head>
<meta charset="utf-8">
<title>Neal Walters stask overflow test</title>
<link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" href="dojo-release-1.12.2-src/dgrid/css/dgrid.css" media="screen">
</head>
<body class="claro">
<div id='grid' data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'>
<span>click me!</span>
<script type='dojo/on' data-dojo-event='focus'>
require([
'dstore/RequestMemory',
'dgrid/OnDemandGrid'
], function (RequestMemory, OnDemandGrid) {
// Create an instance of OnDemandGrid referencing the store
var dom = require('dojo/dom');
console.log("onFocus event for CustomersGrid ContentPane");
//dom.byId('studentLastname').value = 'test onFocus event';
var grid = new OnDemandGrid({
collection: new RequestMemory({ target: 'hof-batting.json' }),
columns: {
first: 'First Name',
last: 'Last Name',
totalG: 'Games Played'
}
}, 'grid');
grid.startup();
});
</script>
</div>
<script src="dojo-release-1.12.2-src/dojo/dojo.js" data-dojo-config="async:true"></script>
<script type="text/javascript">
require(["dojo/parser", "dojo/domReady!"],
function(parser){
parser.parse();
});
</script>
</body>
The above is using declarative syntax. Alternatively, you may consider going programmatic, as in the source code below where the grid appears on loading the page. Also whereas with the declarative syntax above a breakpoint inside the script is ignored (using firefox), it is activated as expected with the programmatic syntax:
<!DOCTYPE HTML><html lang="en">
<head>
<meta charset="utf-8">
<title>Neal Walters stask overflow test</title>
<link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" href="dojo-release-1.12.2-src/dgrid/css/dgrid.css" media="screen">
</head>
<body class="claro">
<div id='grid' data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'></div>
<script src="dojo-release-1.12.2-src/dojo/dojo.js" data-dojo-config="async:true"></script>
<script>
require([
'dstore/RequestMemory',
'dgrid/OnDemandGrid'
], function (RequestMemory, OnDemandGrid) {
// Create an instance of OnDemandGrid referencing the store
var dom = require('dojo/dom');
console.log("onFocus event for CustomersGrid ContentPane");
//dom.byId('studentLastname').value = 'test onFocus event';
var grid = new OnDemandGrid({
collection: new RequestMemory({ target: 'hof-batting.json' }),
columns: {
first: 'First Name',
last: 'Last Name',
totalG: 'Games Played'
}
}, 'grid');
grid.startup();
});
</script>
</body>
I wnat to show to display grid in combo box using jquery easy ui plugin with asp.net mvc. But I took that error "Uncaught TypeError: $(...).combogrid is not a function". Where is the error?
My View Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ComboGrid - jQuery EasyUI Demo</title>
<link href="#Url.Content("~/Content/themes/easyui.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/themes/icon.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/themes/demo.css")" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.easyui.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.combogrid.js"></script>
<script type="text/javascript">
$(function () {
$('#cc').combogrid({
panelWidth: 450,
value: '006',
idField: 'code',
textField: 'name',
url: 'datagrid_data.json',
columns: [[
{ field: 'code', title: 'Code', width: 60 },
{ field: 'name', title: 'Name', width: 100 },
{ field: 'addr', title: 'Address', width: 120 },
{ field: 'col4', title: 'Col41', width: 100 }
]]
});
});
function reload() {
$('#cc').combogrid('grid').datagrid('reload');
}
function setValue() {
$('#cc').combogrid('setValue', '002');
}
function getValue() {
var val = $('#cc').combogrid('getValue');
alert(val);
}
function disable() {
$('#cc').combogrid('disable');
}
function enable() {
$('#cc').combogrid('enable');
}
</script>
</head>
<body>
<h2>ComboGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the right arrow button to show the datagrid.</div>
</div>
<div style="margin:10px 0;">
Reload
SetValue
GetValue
Disable
Enable
</div>
<select id="cc" name="dept" style="width:250px;"></select>
</body>
</html>
You can remove
<script type="text/javascript" src="~/Scripts/jquery.combogrid.js"></script>
because jquery.easyui.min.js includes combogrid function.
This is (part of) a web page. For some reason, I fail to get the slide-show operational. Can you help me fix it?
<!DOCTYPE html>
<html>
<head lang='fr'>
<meta http-equiv='content-type' content='text/html;charset=ISO-8859-1' />
<link href='../dojo-release-1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' media='all' />
</head>
<body class='claro'>
<script>
dojoConfig = {async: true, parseOnLoad: true}
</script>
<script type='text/javascript' src='../dojo-release-1.9.1/dojo/dojo.js'>
</script>
<script type='text/javascript'>
require(["dojo", "dojo/parser", "dojo/store/Memory", "dojox/image/SlideShow"]);
var imageData= {
identifier: "imageUrl",
items: [
{ imageUrl: "http://mysyte.net/photos/f1.jpg"},
{ imageUrl: "http://mysyte.net/photos/f2.jpg"},
{ imageUrl: "http://mysyte.net/photos/f3.jpg"},
{ imageUrl: "http://mysyte.net/photos/f4.jpg"}
]
};
</script>
<div data-dojo-type='dojo/store/Memory' data-dojo-props='data:imageData' data-dojo-id='imageStore'></div>
<div data-dojo-type='dojox/image/SlideShow' id='slideshow1' data-dojo-id='imageShow'
data-dojo-props='store: imageStore, noLink: true, autoStart:true, imageWidth:770, imageHeight:345, slideshowInterval: 5'>
</div>
</body>
</html>
What am I missing?? Can you help me fixing it? Thanks!
Problem solved.
<!DOCTYPE html>
<html>
<head lang='fr'>
<meta http-equiv='content-type' content='text/html;charset=ISO-8859-1' />
<link href='../dojo-release-1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' media='all' />
</head>
<body class='claro'>
<script>
dojoConfig = {async: true, parseOnLoad: true}
</script>
<script type='text/javascript' src='../dojo-release-1.9.1/dojo/dojo.js'></script>
<script type='text/javascript'>
var imageData= {
identifier: "imageUrl",
items: [
{ imageUrl: "http://mysyte.net/photos/f1.jpg"},
{ imageUrl: "http://mysyte.net/photos/f2.jpg"},
{ imageUrl: "http://mysyte.net/photos/f3.jpg"},
{ imageUrl: "http://mysyte.net/photos/f4.jpg"}
]
};
require(["dojo", "dojo/data/ItemFileReadStore", "dojox/image/SlideShow", "dijit/registry"], function(dojo, ItemFileReadStore, SlideShow, registry) {
dojo.ready(function() {
registry.byId('slideshow1').setDataStore(imageStore, {})
})
});
</script>
<div data-dojo-type='dojo/data/ItemFileReadStore' data-dojo-props='data:imageData' data-dojo-id='imageStore'></div>
<div data-dojo-type='dojox/image/SlideShow' id='slideshow1' data-dojo-id='imageShow'
data-dojo-props='autoStart:true, showTitle: false, noLink: true, hasNav: false, imageWidth:770, imageHeight:345, fixedHeight: true, slideshowInterval: 5'>
</div>
</body>
</html>
Apparently, the SlideShow object in dojo has some bugs/inconsistencies. I even had to modify the dojox/image/SlideShow.js file. The clues I found here: http://petergragert.info/dojo/demo/PKHG_won_22feb.html and in http://dojo-toolkit.33424.n3.nabble.com/Dojo-1-8-SlideShow-Problem-tp3991064.html
here I have some sample code which is working in chrome and Firefox, but not working in IE.
test.html:
<html>
<head>
</head>
<body>
<link rel="stylesheet" type="text/css" href="sdk/extjs4.2/resources/css/ext-all.css"> <script type="text/javascript" src="sdk/extjs4.2/ext-all.js"></script>
<script src="test.js"></script>
</body>
</html>
test.js:
Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
title: 'My First Panel',
frame: true,
width: 400,
height: 400,
html : '<iframe id="iframe-test"'+
' style="overflow:auto;width:100%;height:100%;"'+
' frameborder="0" '+
' src="about.html"'+
'></iframe>',
items : [{
xtype : 'button',
text : 'test',
handler : function(){
var iframe = document.getElementById('iframe-test');
iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
var doc = iframe.document;
doc.open();
var content = '<html><head> </head>'+
'<body>'+
'<link rel="stylesheet" type="text/css" href="sdk/extjs4.2/resources/css/ext-all.css">'+
'<script type="text/javascript" src="sdk/extjs4.2/ext-all.js"></script>'+
'<div id="my-div" class="x-hidden" style="background-color:red;width:100px;height:50px;"></div>'+
'<style> .body{ }</style> '+
' <script>Ext.onReady(function() {'+
'Ext.Msg.alert("coming fine");'+
'});</script></body>'+
'</html>';
//console.log(content);
doc.write(content);
doc.close();
}
}],
renderTo: Ext.getBody()
});
});
Can any body help where am missing? what i need to do to make it work
Thanks
Tapaswini