here is my js file dashboard.js
Ext.onReady(function(){
Ext.QuickTips.init(); // **want to know why this is used**
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());**want to know why this is used**
// create the data store
var store = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad :true,
url: 'api/index.php?_command=getresellers',
storeId: 'getresellers',
// reader configs
root: 'cityarray',
idProperty: 'cityname',
fields: ['cityname', 'totfollowup', 'totcallback', 'totnotintrested', 'totdealsclosed', 'totcallsreceived', 'totcallsentered', 'totresellerregistered',
'countiro', 'irotransferred', 'irodeferred'
]
});
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'cityname',
header : 'cityname',
width : 160,
sortable : true,
dataIndex: 'cityname'
}
],
stripeRows: true,
autoExpandColumn: 'cityname',
height: 350,
width: 600,
title: 'Reseller Dashboard',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
// render the grid to the specified div in the page
grid.render('dashboard');
});
I putted some comments where i want to know why this is used ..
want to know why this is used
Here is my html file
<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="css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="lib/ext-base-debug.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="lib/ext-all-debug.js"></script>
<!-- overrides to base library -->
<!-- page specific -->
<script type="text/javascript" src="lib/dashboard.js"></script>
</head>
<body>
<div id="dashboard">
</div>
</body>
</html>
Here is my json which i am also rendering in firebug ..
{
"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 check .
The Ext.QuickTips functionality provides attractive and customizable tooltips for any element. Have a look at this tutorial from Sencha learning site for details. The init method is called to initialize the singleton class of Ext.QuickTip.
The Ext.state.Manager is the global state manager. To make use of the state manager, you must initialize it with a provider. This is what you are doing with the statement:
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Here you are using CookieProvider. By using this, you are asking the ExtJS library to store the state information of the components in cookies.
Update: the Error is occurring at getColumnWidth() method. check if you have proper values for the width attribute in your column model. For debugging, try removing the width detail for all the columns. I think you have more code that you have not put up here to simplify. There might be some typo.
Try this:
//grid.render('dashboard'); //delete this line
grid.renderTo = 'dashboard';
grid.show();
Update
try to remove this line
autoExpandColumn: 'company'
Here is your bug:
autoExpandColumn: 'company',
There is no column with this id.
Related
Values are not getting updated in the Firebase Realtime Database. I am new to web development but I knew a little html. Can you please check what the problem here.
I left Firebase Config blank intentionally for this question.
I tried using most of the code given in Firebase documentation.
<!DOCTYPE html>
<html>
<head>
<title>"Web App"</title>
</head>
<body>
<div class="mainDiv" align="left">
<h1 align="left">"Firebase web page"</h1>
<textarea id="Command" placeholder="ON/OFF" stClyle="text align:left; overflow:auto; border:6px outset #000000;"></textarea>
<button id="Submit" onclick="submitclick()">Click Me!</button>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "___________________________",
authDomain: "_________.firebaseapp.com",
databaseURL: "https://___________.firebaseio.com",
projectId: "________",
storageBucket: "_________.appspot.com",
messagingSenderId: "________",
appId: "_____________"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var mainTxt= document.getElementById("Command");
var submitbtn = document.getElementById("Submit");
function submitclick()
{
var com = mainTxt.value;
firebase.database().ref().child("username").set(com);
}
</script>
</body>
</html>
Have a look at the documentation on how to add Firebase to your Web/JavaScript project: https://firebase.google.com/docs/web/setup
By doing
<script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-app.js"></script>
you are adding the Firebase core library, but this is not sufficient. You have to add the library(ies) for the service(s) you are going to use, in your case the Realtime Database.
Therefore you need to do
<script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-database.js"></script>
Note the following line
<!-- TODO: Add SDKs for Firebase products that you want to use
in your own code: it indicates exactly what is described above.
First of all to use firebase you have to include
<script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-firestore.js"></script>
Still it won't work because this is not how you write to firebase. You write as key value pairs. Try
firebase.database().collection("userNames").add({name : "user_name"});
or if you trying to update a document
firebase.database().ref().child("userName").set({name : "user_name"});
Here is the official documentation : Add and Manage Data
As on the topic calling .set() or .add() may not always write data you have to check by using then() and catch().
So a complete example of updating a document value in firebase will be :
// Add a new document in collection "cities"
db.collection("users").doc("userName").set({
name: "USER_NAME"
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I Need to get source code of current tab when the chrome extension icon is clicked . i have also tried with button click event. Please go through my current code :
manifest.json
{ "name": "UM Chrome Extension!", "version": "1.0",
"description": "To ensure the tracking codes present.",
"icons": {
"128": "TW-Extension-Icon2.png"
}, "background": {
"scripts": [ "background.js"]
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["popup1.js","jquery-1.10.2.js","jquery-ui.js","bootstrap.min.js"]
}
],
"permissions": [
"activeTab","tabs","contextMenus", "http://*/*"
],
"browser_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html
<!doctype html>
<html class="no-js" lang="">
<head>
<script type="text/javascript" src="popup1.js"></script>
</head>
<body style="width: 600px; height: 300px;">
<button value="Test" id="check-1"> </button>
</body>
</html>
and popup.js
window.addEventListener('DOMContentLoaded', function() {
var fbshare = document.querySelector('#check-1');
fbshare.addEventListener('click', function() {
var htmlCode = document.documentElement.outerHTML;
window.alert(htmlCode);
});
});
How to get active tab's source code ? i need to get source code of the page so that i need to search whether the page contains particular tracking code(like GA code).
Thank You
Your manifest has both "content_scripts" (which run in the context of the page on document_idle) and "browser_action" scripts (which run in an isolated context when the extensions menu button is clicked).
In popup.html you reference popup.js, so in popup.js when you call document.documentElement.outerHTML you're getting the content of popup.html, not the active tab.
You reference both popup.js and popup1.js, which is confusing. You're currently running the same code in both the popup and the page context, which is almost guaranteed to break in one or the other. By convention use content.js in "content_scripts" and reference popup.js in the action popup.html.
"content_scripts" run in every page, whether users click on the extension or not. Your current manifest is adding ["popup1.js","jquery-1.10.2.js","jquery-ui.js","bootstrap.min.js"] to every page, which is needlessly slow.
Avoid using jQuery in Chrome extensions. It's fairly large and a browser standardisation library doesn't add much when you know for absolute certain that all your users are on Chrome. If you can't code without it then try to restrict it to just your popup or load it in dynamically.
You set a "scripts": [ "background.js"], which runs constantly in the background and isn't needed at all in your current code. If you need to do things outside of the action button consider using event pages instead.
Use the Chrome API to get from the context of the popup to the page. You need to query chrome.tabs to get the active tab, and then call chrome.tabs.executeScript to execute script in the context of that tab.
Google's API uses callbacks, but in this example I'm going to use chrome-extension-async to allow use of promises (there are other libraries that do this too).
In popup.html (assuming you use bower install chrome-extension-async):
<!doctype html>
<html>
<head>
<script type="text/javascript" src="bower_components/chrome-extension-async/chrome-extension-async.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body style="width: 600px; height: 300px;">
<button value="Test" id="check-1"> </button>
</body>
</html>
In popup.js (discard popup1.js):
function scrapeThePage() {
// Keep this function isolated - it can only call methods you set up in content scripts
var htmlCode = document.documentElement.outerHTML;
return htmlCode;
}
document.addEventListener('DOMContentLoaded', () => {
// Hook up #check-1 button in popup.html
const fbshare = document.querySelector('#check-1');
fbshare.addEventListener('click', async () => {
// Get the active tab
const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
const tab = tabs[0];
// We have to convert the function to a string
const scriptToExec = `(${scrapeThePage})()`;
// Run the script in the context of the tab
const scraped = await chrome.tabs.executeScript(tab.id, { code: scriptToExec });
// Result will be an array of values from the execution
// For testing this will be the same as the console output if you ran scriptToExec in the console
alert(scraped[0]);
});
});
If you do it this way you don't need any "content_scripts" in manifest.json. You don't need jQuery or jQuery UI or Bootstrap either.
I'm pretty new to coding, but I would like to create a simple UWP app for my phone just to see FX charts on-the-go - sadly, there are not too much related apps for this -.
I really like TradingView's WebCharts, and they provide real-time web widgets, what would fit for the task :)
Is it possible to show these in a UWP App?
Example:
<!-- TradingView Widget BEGIN -->
<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>
<script type="text/javascript">
new TradingView.widget({
"width": 980,
"height": 610,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "White",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"hideideas": true,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650"
});
</script>
<!-- TradingView Widget END -->
Thank you for the answers :)
Matt
TradingView's WebCharts js lib targets Web Application. It's not 100% fit for UWP(JS) Application.
I made a demo and found that the document.write inside TradingView's JS library will crash the UWP(JS) Application.
So as a personal workaround for using TradingView in UWP. You can do the following steps:
Download the WebCharts js lib from https://d33t3vvu2t2yu5.cloudfront.net/tv.js and add the js lib to your project.(UWP doesn't support remote js reference).
Open package.appxmanifest file->Content URIs tag->add https://dwq4do82y8xi7.cloudfront.net like below:
Open the downloaded js lib and search for document.write(widgetHtml). Modify the result line like below:
/*document.write(widgetHtml)*/document.getElementById("container").innerHTML=widgetHtml
Add a Div with id="container" to html:
<body>
<div id="container"></div>
<script src="js/main.js"></script>
</body>
Now you can get the WebCharts run in UWP App.
Here is the complete Demo: TradingViewSample.
I am following this small tutorial:
http://docs.sencha.com/extjs/4.2.1/#/guide/application_architecture
I have used the exact same file structure, but when I add the controller section of the tutorial (to my app.js), where the code says:
`Ext.application({
...
controllers: [
'Users'
],
...
});
I get the error shown on the attached image. The system is looking for the controller folder the wrong place. Instead of looking for the file in the following path:
accountmanager/app/controller/Users.js
it looks in:
accountmanager/app/ext-4/app/controller/Users.js
So looking at the tutorial I'm following, the place that causes the trouble, is the section "Defining a controller"
I'm not sure what I have done wrong, I've starred myself blind for an hour now. Here is the index.html file:
<html>
<head>
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Note the slight difference in the html. Fx. I have only changed the js src reference, since the one in the tutorial causes a 404
Can anyone help out. I'd be grateful.
Thanks in advance
In case you wanna see the app.js code as well:
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
controllers: [
'Users'
],
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
Your app.'s and index.html files is located in the wrong place.
Put it in the root account manager directory
I am trying to figure out why this simple code isn't working. I'm implementing this:
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
Here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [750, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/images/allimages/vdance750x500.png", "", "", "Caption"],
["/images/allimages/vpoca750x500.png", "", "", ""],
["/images/allimages/vhat750x500.png", "", "", "" ],
["/images/allimages/vdance750x500.png", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
<title>Vanadia's Site</title>
</head>
<body>
<div id="fadeshow1"></div>
<br />
</body>
</html>
I am new to coding and wondering if there is a syntax error... all the images are in the right spot. I dont understand why this isn't working!
Any help would be appreciated.
Where is your doc type and opening html and head tags? Maybe you just didn't include them here, but make sure they aren't missing from your document. Aside from that, check your browser's JavaScript console to see if you're throwing an error. If you are, please post it for all to see.
I copied your code and changed the image paths (demo: jsfiddle.net/hJKMy/).
It is likely that your image paths are incorrect.