in html file, there is a piece of javascript like:
{text: "EmployeeManagement", icon: "code", children: [
{text: "HR", link: [[#{/employeeManage/hr.html}]]},
{text: "Developer", link: [[#{/employeeManage/developer.html}]]},
]},
However, once I put a
if(isEmployer) {
}
around it, it formats the above code like:
if (isEmployer) {
{
text: "EmployeeManagement", children
:
[
{text: "HR", link: [[#{
/employeeManage
/hr.html
}
]]
},
{
text: "Developer", link
:
[[#{
/employeeManage
/developer.html
}
]]
}
How to turn off this automatically form?
EDIT: This is the file structure:
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org">
<head>
....
</head>
<body data-module="app" style="overflow: hidden">
<div id="desktop"></div>
<script th:inline="javascript">
/*<![CDATA[*/
var isEmployer = ...
...
{text: "EmployeeManagement", icon: "code", children: [
{text: "HR", link: [[#{/employeeManage/hr.html}]]},
{text: "Developer", link: [[#{/employeeManage/developer.html}]]},
]},
...
If you do not want to have this behaviour (I guess it is by adding }) go to
Editor -> General -> Smart Keys and disable option Reformat block on typing }
Related
Using stenciljs dynamically generate nesting unordered <ul><li>...</li></ul> list, so i and giving input as a Obj={} i am getting some issues. Here is my code below Please help me on this...
1. index.html
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Stencil Component Starter</title>
<script src="/build/mycomponent.js"></script>
</head>
<body>
<list-component list-object='[
{title: "Point", children: [
{title: "Point"},
{title: "Point"},
{title: "Point"},
{title: "Point", children: [
{title: "Point"},
{title: "Point"},
{title: "Point"}
]}
]},
{title: "Point", children: [
{title: "Point"},
{title: "Point", children: [
{title: "Point"},
{title: "Point"},
{title: "Point"}
]},
{title: "Point"}
]},
]' > </list-component>
</body>
</html>
ISSUE:
I am passing nested object to the custom web component.
In this list.tsx file i am facing problem while passing arguments to the function buildList("?","?")...?
2. list.tsx
import { Component, Prop, State, Watch, Element } from '#stencil/core';
#Component({
tag:'list-component',
styleUrl:'./list-component.css'
})
export class ListComponent{
#State() idName: string;
#Prop() listObject: string;
#Element() flashElement: HTMLElement;
private ulContent: HTMLElement;
componentWillLoad() {
this.ulContent = this.flashElement.querySelector('.ul-content');
this.buildList(this.ulContent,this.listObject);
}
#Watch('listObject')
buildList(parentElement, listObject){
console.log(listObject);
var i, l, list, li, ul1;
if( !listObject || !listObject.length ) { return; }
ul1 = document.createElement('ul');
list = parentElement.appendChild(ul1);
for(i = 0, l = listObject.length ; i < l ; i++) {
li = document.createElement('li');
li.appendChild(document.createTextNode(listObject[i].title));
list.appendChild(li);
this.buildList(li, listObject[i].children);
}
}
render() {
return (
<div class="ul-content"></div>
);
}
}
I see two problems:
1: When Stencil calls #Watch methods it always passes the new and old values as arguments, see https://stenciljs.com/docs/properties#prop-default-values-and-validation. This means you cannot define custom arguments.
You could create an additional function which acts as the watcher and then calls buildList:
#Watch('listObject')
listObjectChanged() {
this.buildList(this.ulContent, this.listObject);
}
2: listObject is a string so you need to JSON.parse it before you can loop over it (and rewrite it so it's valid JSON). Then store that parsed list in a local variable and use it to generate the list. See https://medium.com/#gilfink/using-complex-objects-arrays-as-props-in-stencil-components-f2d54b093e85
There is a much simpler way to render that list using JSX instead of manually creating the list elements:
import { Component, Prop, State, Watch, Element } from '#stencil/core';
#Component({
tag: 'list-component',
styleUrl: './list-component.css'
})
export class ListComponent {
#Element() flashElement: HTMLElement;
#State() idName: string;
#Prop() listObject: string;
#State() list: any[];
#Watch('listObject')
listObjectChanged() {
this.list = JSON.parse(this.listObject);
}
componentWillLoad() {
this.listObjectChanged();
}
renderList(list) {
return list.map(list => <ul>
<li>{list.title}</li>
{list.children && this.renderList(list.children)}
</ul>
);
}
render() {
return (
<div class="ul-content">
{this.renderList(this.list)}
</div>
);
}
}
Hope this helps.
Just started with DOJO and Dgrid.
I've got this simple dgrid using a Memory store.
However the grid in the web page stay empty. Only the header is displayed.
....
#import "./dgrid/css/dgrid.css";
<script src="./dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true, isDebug: true">
</script>
<script language="javascript">
require
(
[
"dojo/_base/declare",
"dojo/_base/array",
"dgrid/List",
"dgrid/Grid",
"dgrid/Keyboard",
"dgrid/Editor",
"dgrid/extensions/ColumnResizer",
"dijit/form/NumberTextBox",
"dstore/Memory",
"dojo/parser",
"dojo/domReady!",
"dijit/TooltipDialog",
"dijit/form/DropDownButton",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane"
],
function(
declare, arrayUtil, List, Grid, Keyboard, Editor, ColumnResizer, NumberTextBox, Memory
){
var prevpds =[
{itemnu: "TEST", itemna: "", batchn: "", cqty: 5, sqty: 5, sz: 5},
{itemnu: "TEST 44", itemna: "", batchn: "", cqty: 1, sqty: 2, sz: 3}
];
var pdsstore = new Memory({data: prevpds});
var getColumns = [
{ label: "Item Number", id: "itemnu", field: "text", editor: "text" },
{ label: "Item name", id: "itemna", field: "text", editor: "text" },
{ label: "Batch number", id: "batchn", field: "text", editor: "text" },
{ label: "Concerned Qty", id: "cqty", field: "floatnumber", editor: "NumberTextBox" },
{ label: "Sold Qty", id: "sqty", field: "floatnumber", editor: "NumberTextBox" },
{ label: "Size/ Diameter", id: "sz", field: "floatnumber", editor: "NumberTextBox" }
];
var PdsGrid=declare([Grid, Keyboard, Editor, ColumnResizer]);
window.grid = new PdsGrid(
{
store: pdsstore,
columns: getColumns
}, "pdstable2"
);
}
);
</script>
You have at least two problems.
Firstly, assuming you're using dgrid 0.4 (which I assume since you're also using dstore), you should be setting collection instead of store.
Secondly, the base List and Grid modules do not read from stores; you will want to use either OnDemandGrid or the Pagination extension.
OnDemandList and OnDemandGrid docs
Pagination docs
i tried to use dgrid by the including dojo 1.10 by CDN but it does not work.
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad:true"></script>
<script>
require([ "dgrid/Grid", "dojo/domReady!" ], function(Grid) {
var grid = new Grid({
columns : {
serverName : "Server Name",
serviceName : "Service Name",
available : "Verfügbar"
}
}, "grid");
});
Where is the problem? By loading the site i get an Err: scriptErr.
Here's a really complete example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello dgrid!</title>
<script
src='//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js'
data-dojo-config="async: true, parseOnLoad: true">
</script>
<script>
require({
packages: [{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.15'
}, {
name: 'xstyle',
location:'//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
}, {
name: 'put-selector',
location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
}]
},[
'dgrid/Grid',
'dojo/domReady!'
], function (Grid) {
var data = [
{ first: 'Bob', last: 'Barker', age: 89 },
{ first: 'Vanna', last: 'White', age: 55 },
{ first: 'Pat', last: 'Sajak', age: 65 }
];
var grid = new Grid({
columns: {
first: 'First Name',
last: 'Last Name',
age: 'Age'
}
}, 'grid');
grid.renderArray(data);
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
dgrid and its dependencies are not hosted on the Google CDN, let alone as a sibling of Dojo, and you don't seem to have any packages configuration to pick up dgrid, xstyle, and put-selector elsewhere.
While dgrid is not published to any CDN, RawGit now has a feature they're testing out which is capable of caching github resources on MaxCDN. You can take advantage of this for dgrid with a configuration like the following:
var dojoConfig = {
async: true,
packages: [{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.15'
}, {
name: 'xstyle',
location:'//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
}, {
name: 'put-selector',
location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
}]
};
Of course, remember that RawGit's CDN service has no guarantee of 100% uptime and thus should be used only for prototyping, not production, but you should ideally be rolling a custom build for production anyway.
You need to put a div tag in the body.
<body>
<div id="grid"></div>
</body>
have you tried calling grid.renderArray(data)?
Here is a complete example
require(["dgrid/Grid", "dojo/domReady!"], function(Grid){
var data = [
{ first: "Bob", last: "Barker", age: 89 },
{ first: "Vanna", last: "White", age: 55 },
{ first: "Pat", last: "Sajak", age: 65 }
];
var grid = new Grid({
columns: {
first: "First Name",
last: "Last Name",
age: "Age"
}
}, "grid");
grid.renderArray(data);
});
more examples here
I have just started with sencha touch,really impressed with sencha documentation and its native feel. I was trying out this link. But i got error in between and i got this error in console "The following classes are not declared even if their files have been loaded: 'Ext.panel'. Please check the source code of their corresponding files for possible typos: 'touch/src/panel.js". i am new to MVC framework so i am not able to find where i went wrong.
And is it necessary to get good knowledge of ExtJs before trying out Sencha Touch?
Here is my code
App.js
Ext.Loader.setPath({
'Ext': 'touch/src'
});
Ext.application({
name: 'hello',
requires: [
'Ext.MessageBox'
],
views: [
'Main','Home'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('hello.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload,
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
Main.js
Ext.define('hello.view.Main', {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype:'homepanel'
}
]
}
});
Home.js
Ext.define('Hello.View.Home',{
extend:'Ext.panel',
xtype:'homepanel',
config:{
title:'Home',
iconCls:'home',
html: [
'<img src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>You're creating the Getting Started app. This demonstrates how ",
"to use tabs, lists, and forms to create a simple app</p>",
'<h2>Sencha Touch</h2>'
].join("")
}
});
index.html
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>hello</title>
<style type="text/css">
</style>
<!-- The line below must be kept intact for Sencha Command to build your application ->
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"> </script>
<script type="text/javascript" src="app/view/Home.js"></script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Exactly as the error says. The class name is Ext.Panel, not Ext.panel.
I am using the architecture for my extjs app is from this blog post
http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/
So here is my index.html Please read the whole question for complete answer.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reseller DashBoard</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="./ext/resources/css/xtheme-gray.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="./ext/adapter/ext/ext-base-debug.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="./ext/ext-all-debug.js"></script>
<!-- overrides to base library -->
<!-- page specific -->
<script type="text/javascript" src="application.js"></script>
<script type="text/javascript" src="js/Application.dashboard.js"></script>
<script type="text/javascript" src="js/jsfunction.js"></script>
<script type="text/javascript" src="js/reseller.js"></script>
</head>
<body>
<div id="dashboard">
</div>
</body>
</html>
Here is my application.js I am intialising here my dashboard grid, is it the right place to initialise ?
/*global Ext, Application */
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
Ext.ns('Application');
// application main entry point
Ext.onReady(function() {
Ext.QuickTips.init();
var pg = new Application.DashBoardGrid();
// or using it's xtype
var win = new Ext.Window({
items:{xtype:'DashBoardGrid'}
});
// code here
}); // eo function onReady
// eof
Here is my Application.DashBoardGrid.js
My request to the api is going two times right now Why ?
I have a linkrenderer function for a column for rendering where should i put this function?
And Suggest Why My Grid is not Coming ?
Application.DashBoardGrid = Ext.extend(Ext.grid.GridPanel, {
border:false
,initComponent:function() {
var config = {
store:new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad :true,
url: 'api/index.php?_command=getresellerscount',
storeId: 'getresellerscount',
// reader configs
root: 'cityarray',
idProperty: 'cityname',
fields: [
{name: 'cityname'},
{name: 'totfollowup'},
{name: 'totcallback'},
{name: 'totnotintrested'},
{name: 'totdealsclosed'},
{name: 'totcallsreceived'},
{name: 'totcallsentered'},
{name: 'totresellerregistered'},
{name: 'countiro'},
{name: 'irotransferred'},
{name: 'irodeferred'}
]
})
,columns: [
{
id :'cityname',
header : 'City Name',
width : 120,
sortable : true,
dataIndex: 'cityname'
},
{
id :'countiro',
header : ' Total Prospect',
width : 100,
sortable : true,
dataIndex: 'countiro'
},
{
id :'irotransferred',
header : 'Calls Transfered By IRO',
height : 50,
width : 100,
sortable : true,
dataIndex: 'irotransferred'
},
{
id :'irodeferred',
header : ' Calls Deferred By IRO',
width : 100,
sortable : true,
dataIndex: 'irodeferred'
},
{
id :'totcallsentered',
header : ' Total Calls Entered',
width : 100,
sortable : true,
dataIndex : 'totcallsentered'//,
//renderer : linkRenderer
},
{
id :'totfollowup',
header : ' Follow Up',
width : 100,
sortable : true,
dataIndex: 'totfollowup'
},
{
id :'totcallback',
header : ' Call Backs',
width : 100,
sortable : true,
dataIndex: 'totcallback'
},
{
id :'totnotintrested',
header : ' Not Interested',
width : 100,
sortable : true,
dataIndex: 'totnotintrested'
},
{
id :'totdealsclosed',
header : ' Deals Closed',
width : 100,
sortable : true,
dataIndex: 'totdealsclosed'
},
{
id :'totresellerregistered',
header : ' Reseller Registered',
width : 100,
sortable : true,
dataIndex: 'totresellerregistered'
}
]
,plugins:[]
,viewConfig:{forceFit:true}
,tbar:[]
,bbar:[]
,render:'dashboard'
,height: 350
,width: 1060
,title: 'Reseller Dashboard'
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.DashBoardGrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
,onRender:function() {
// this.store.load();
Application.DashBoardGrid.superclass.onRender.apply(this, arguments);
} // eo function onRender
});
Ext.reg('DashBoardGrid', Application.DashBoardGrid);
Json Response
{
"countothercities": "0",
"directreseller": "14",
"totalresellersregisteredfor8cities": 33,
"cityarray": [{
"cityname": "bangalore",
"totfollowup": "3",
"totcallback": "4",
"totnotintrested": "2",
"totdealsclosed": "0",
"totcallsreceived": "0",
"totcallsentered": "68",
"totresellerregistered": "6",
"countiro": "109",
"irotransferred": "83",
"irodeferred": "26"
}]
}
Please show your JSON response, or server code. So that we can answer better.
My request to the api is going two times right now Why ?
Obvious. Inside Ext.onReady()
You are creating instance of DashboardGrid. Call 1
You are asking Ext to create instance of DashboardGrid by passing xtype. Call 2
You are creating the grid twice. Do this instead.
Ext.onReady(function() {
Ext.QuickTips.init();
var win = new Ext.Window({
items:{xtype:'DashBoardGrid'}
});
// code here
}); // eo function onReady