I am developing a website in yii framework where I am am using ext js 4 mvc structure.
I am trying to use ext js 4 with yii framework.
I am using MVC in ext js 4 where i get forbidden message.
During execution of this application I get below message
GET http://localhost/helloext/protected/controller/Users.js?_dc=1350173045981 403 (Forbidden)
Below is my application structure:-
helloext-
--extjs // contins ext js 4 sdk
--protected
--controllers
--Users.js
--app.js
--index.html
Code:-
1)index.html
<html>
<head>
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
2)app.js
Ext.application({
name: 'helloext',
appFolder : 'protected',
controllers:['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: '',
items: [
{
xtype: 'panel',
title: '<b>Balaee<b>',
html : 'List of users will go here'
}
]
});
}
});
3)
protected
--Users.js
Ext.define('helloext.protected.controllers.Users',
{
//extend: 'Ext.app.Controller',
extend: 'Ext.protected.Controllers',
init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function() {
console.log('The panel was rendered');
}
}
);
How I integrate yii framework with ext js 4 mvc?
You said, "Below is my application structure" and your application structure seems something different. anyway...
protected folder is strictly restricted to the browser. Check the .htaccess (it is hidden in windows) file inside your protected folder and it contains deny from all. That's the reason why you get 403 Forbidden
1) Move Users.js outside of protected folder.
2) Remove .htaccess file (but it's a Security Risk )
2) or, use the Yii's assetManager.
http://www.yiiframework.com/forum/index.php?/topic/2032-assets/
http://www.yiiframework.com/wiki/148/understanding-assets/
I believe you need to redesign your Extjs Application to be compatible with Yii framework's design.
In order to do so, I'd recomend the following structure:
/yiiApp
/protected
/assets
/yourExtjsApp
You will also need to use Yii CAssetManager to publish your assets (aka. your ExtjsApp) so that they are worldwide accessible:
$assetUrl = Yii::app()->getAssetManager()->publish('application.assets', false, -1, false );
(you can do this wherever you want, I'd recommend views/layout/main.php or even protected/config/main.php so that you can access the assetUrl at a later time)
Finally in your protected/views/layout/main.php or protected/views/index.php (whichever you prefer), you can create your Extjs Application as follows:
Ext.application({
name: 'yourExtjsApp',
appFolder: '<?php echo assetUrl; ?>',
....
Related
The CodeIgniter application was developed much earlier without plans to integrate ReactJS at that time. A later requirement was added to integrate another ReactJS project with this backend and replace the current frontend (views).
The CodeIgniter application is not done as a RESTful API. The .php view files could not be replaced with .js files of the reactjs app as the server is Apache.
Running a nodejs server would not render the CodeIgniter views.
Bootstrap, jquery, and simple javascript can be included within the view of the CodeIgniter application. But is it possible to replace the PHP view files in CodeIgniter with javascript files?
The PHP view files do not need to be replaced with js files. JavaScript can easily be added to PHP files using <script> tags. Below is the Add React in One Minute demo in a CodeIgniter app.
To integrate the React demo into CodeIgniter start with a simple controller - React.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class React extends CI_Controller
{
public function index()
{
$this->load->view('react_view');
}
}
The "view" file is straight from the React demo but it's put in a .php file instead of .html.
The only change made to the demo code is in the script tag at the bottom of the page. My assets folder is on the same level as CodeIgniter's /application folder. There are subfolders in assets for css, js, and images.
/public_html
/application
/system
/assets
/js
/css
/img
So I've changed the src for the tag that loads like_button.js to work with my file layout.
The "view" file react_view.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<p>
This is the first comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="1"></div>
</p>
<p>
This is the second comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="2"></div>
</p>
<p>
This is the third comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="3"></div>
</p>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="assets/js/like_button.js"></script>
</body>
</html>
/assets/js/like_button.js
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked comment number ' + this.props.commentID;
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
// Find all DOM containers, and render Like buttons into them.
document.querySelectorAll('.like_button_container')
.forEach(domContainer => {
// Read the comment ID from a data-* attribute.
const commentID = parseInt(domContainer.dataset.commentid, 10);
ReactDOM.render(
e(LikeButton, { commentID: commentID }),
domContainer
);
});
Here's a boilerplate that you can use.
https://github.com/cyruzin/codeigniter-react-boilerplate
React is used for single page applications. Codeigniter is a PHP framework. Nobody forbids you to include react apps inside codeigniter. The react app polls data from API provided by codeigniter. You can use multiple codeigniter controllers or views to define different react states, or you can just use one controller, one view and multiple models and define states with react alone.
React is not in opposition to codeigniter. Codeigniter doesn't care if you use jquery, angular or react. From the view on it's not a codeigniter's business.
Folder Tree
Gulp.js
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.sass('app.scss')
.script('app.js')
.version( ['css/app.css','js/app.js']);
});
Why is script not building and doesn't create js folder in public/build and not even added in rev-manifest.json?
that's why when i call it to my Html, it throw's an error: "File js/app.js not defined in asset manifest".
HTML
<script type="text/javascript" src="{{ elixir('js/app.js') }}"></script>
The scripts (plural) method assumes all paths are relative to the resources/assets/js directory, and will place the resulting JavaScript in public/js/all.js by default. If you need to change the destination folder you can use the second parameter:
.scripts(['app.js'], 'public/build/js/app.js')
I hope this will help you.
I have php framework based on Zend library and I'd like to use angularjs script in phtml file but I have problem how to include template edytuj_row.phtml located in:
ProjectName->SourceFiles->application->admin->views->settings->edytuj.phtml
<div row-settings></div>
<script type="text/javascript">
var app = angular.module('mainApp', []);
app.directive('rowSettings', function(){
return {
templateUrl: 'edytuj_row.phtml'
};
});
</script>
Both files edytuj_row.phtml and edytuj.phtml are localizated in the same directory but edytuj_row.phtml is not seen. What is right path in templateUrl ? In this situation in place of <div row-settings></div> is loaded recurently main web page instead of template.
Angular has no access to Zend files (templates). You need to set valid URL to templateUrl (eg. /admin/users/edytuj-row)
You probably have edytujAction and edytujRowAction. Check what URL path directs to edytujRowAction (probably in Bootstrap.php) and set it in templateUrl.
I am maintaining Zend application with ExtJS 3 based views. Recently, I am working on migrating to ExtJS 4 MVC based application.
Background
With ExtJS 3 I used to combine ExtJS library + all my JS files and include that in Zend layout (let's call that combine.js).
<script type="text/javascript" src="combine.js"></script>
All I needed to do was to met dependencies in combined file.
Now, trying to accomplish ExtJS 4 MVC approach with Zend generating my views, I am running into multiple problems with the new Ext.Loader. My Zend layout consists of
<script type="text/javascript">
Ext.application({
name: 'demo',
appFolder: 'app',
controllers: [
// controllers list here
],
launch: function()
{
// viewport + page items
}
});
</script>
Moreover, in HEAD section I still maintain the same approach to include one combined file (ExtJS 4 library + all my js files). In theory, I have all js dependencies met since I include the whole library before my code.
Problem
I am running into multiple problems with new class loading mechanism.
Let's assume I have only one controller with one view and one store on ExtJS side:
Ext.define('demo.myModule.controller.MyGrid', function() {
extend: 'Ext.app.Controller',
stores: [ 'demo.myModule.store.MyStore' ],
views: [ 'demo.myModule.view.MyStore' ]
...
});
Rendering such page ends up with Ext.Loader trying to fetch not existing resource :
GET http://myPage/demo/myModule/store/MyStore.js?_dc=1390226857962 404 (Not Found)
Disabling Ext.Loader ends up with :
Uncaught Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: demo.myModule.controller.MyGrid
Since ExtJS 4 is a really popular library, someone must have hit the same stumbling block before. What is the proper way to tackle such problem ?
BTW. I am asking that question having already spent couple of days on ExtJS documentation + official tutorials, tried Sencha CMD but I fail to get what the exact problem is.
EDIT:
I have added a sample project showing the problem: https://github.com/mirfilip/extjs-zend. You can see app.js containing simple class demo.myModule.view.Panel. In application/layouts/scripts/layout.phtml you can see that the whole library + app.js is loaded (in order). When you try to render the project it will show the blank page. However, if you go to layout and uncomment lines 23-33 (and comment out appending of app.js in line 11) and render, it works well. The only difference is where my class is defined in. There should be no possible time race between classes as Ext.application creation is wrapped it Ext.onReady. Any ideas ?
I don't use Zend Studio, so I cannot give a specific answer. I will just show you my code, how I integrate ExtJs into my own homebrewed framework.
This is the html code on my development site, which will use Ext.Loader to load the classes dynamically.
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="ext/locale/ext-lang-fr.js"></script>
<script src="app.js"></script>
<!-- </x-compile> -->
This will then compile to :
<link rel="stylesheet" href="resources/Mb-all.css"/>
<script type="text/javascript" src="app.js"></script>
This snipped is found in the build/production/MyApp/index.php folder. I have then a build script that takes this file and copies it where it should be for the php framework to work.
I hope this will give you an idea to solve your specific problem.
Important: app.js is a autogenerated file by sencha cmd. It is not the same thing in the development environment and in the test environment.
In the development it just contains this text:
/*
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: 'Mb',
extend: 'Mb.Application',
autoCreateViewport: true
});
In the production envrionment it contains the full, minified javascript source of the app.
Probably you have to indicate paths to Ext classes before your combined app js file. I'm using paths relative to domain root ('/app' not 'app').
<script>
Ext.Loader.setConfig({
paths : {
'demo' : '/app'
},
enabled: true
});
</script>
<script src="combine.js" />
Current I did the dustjs in client javascript as below
<!DOCTYPE html>
<html>
<head>
<script src="lib/dust-full-0.3.0.min.js" type="text/javascript"></script>
<script src="vendor/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// JSON response from server
var json_object = { "profile_skill": "Profile Skill",
"skills": [
{ "name": "JavaScript" },
{ "name": "Ruby" },
{ "name": "Java" }
]
}
// render method
dustRender = function(){
// Get the dust html template to dust compile
var dust_tag = $('#page').html() ;
var compiled = dust.compile(dust_tag, "tmp_skill");
//load templates
dust.loadSource(compiled);
//Renders the named template and calls callback on completion. context may be a plain object or an instance of dust.Context.
dust.render("tmp_skill", json_object, function(err, html_out) {
//HTML output
$('#page').html(html_out);
console.log(html_out);
});
}();
});
</script>
</head>
<body>
<h1>Dust templates in the browser</h1>
<div id="page">
{profile_skill}
<ul> {#skills}
<li> {name} </li>
{/skills}
</ul>
</div>
</body>
</html>
But in my page view source I can see the above code instead of html tag output. And also I want know how to integrate dustjs in php code.
Don't just put your template inside the php. Do it properly and define the template as a string or separate html file.
var templateName = "myTemplate";
var model = { "profile_skill": "Profile Skill",
"skills": [
{ "name": "JavaScript" },
{ "name": "Ruby" },
{ "name": "Java" }
]
};
dust.onLoad = function(templateName, callback) {
// this will load a template with [name].html in the folder templates
// callback is an internal dust.js function
$.get(["templates/", ".html"].join(templateName), function(data) {
callback(undefined, data);
}, "html");
};
// dust just takes the template name as first parameter
// if no template of this name is defined it will attempt to load
// and compile it if needed
// override dust's onLoad function to implement your loading
dust.render(templateName, model, function(err, out){
$('#page').html(out);
});
Inside my template.html
{profile_skill}
<ul> {#skills}
<li> {name} </li>
{/skills}
</ul>
Of course the point is that compiling your templates always speeds up delivery and rendering. However, since you deliver the template together with the rest of your page, calling loadSource and compile is just not necessary. Instead dust will try to load a temploate all by itself if you tell it to do so.
From the documentation:
Loading
(...)
By default Dust returns a "template not found" error when a named template cannot be located in the cache. Override onLoad to specify a fallback loading mechanism (e.g., to load templates from the filesystem or a database).
Internally dust will call the loadSource and compile methods itself if it has to. In my example above I included a possible soulution to override dust.onLoad. Of course you could also simply return a the html contents of a DOM node there.
dust.onLoad = function(templateName, callback) {
callback(undefined, $("skill template").hmtml());
}
And to answer your last question:
And also I want know how to integrate dustjs in php code.
You can't. Unless you send the template to client to render there or you have a JavaScript interpreter on your backend to render the templates you can't use it.
As Torsten Walter has mentioned, you cannot see the html source in your page, if you are compiling/rendering in browser. If you do the compiling and rendering in the server side, html source will contain the final HTML code. For achieving this, you can use nodejs or Rhino server as mentioned in Linkedin blog: http://engineering.linkedin.com/frontend/leaving-jsps-dust-moving-linkedin-dustjs-client-side-templates
This might help you to compile the dust templates using PHP,
https://github.com/saravmajestic/myphp/tree/master/dustcompiler
This utility is only for compiling the dust templates before rendering in the page, which will avoid compiling time in your browser. You can load the compiled templates as a JS file in your page, which can be minified/ aggregated with other JS files/templates.
Hope this helps!!!