javascript - Rendering ExtJS 4+ MVC application in a html div - how-to? -


all examples have found far explain how render extjs (4.2) mvc application within "viewport", in other words means full browser screen, , occupying whole html body.

i render application within existing html page within named div, can have html design around application.

 <div id="appdiv"><!-- application runs here --></div>

i've seen sites extjs 4 examples use trick render extjs app within page using iframe.

is possible avoid iframe? and, if is, how skeleton of extjs 4.2 application shall if rendered within div.

notes: in extjs 3 have found solution creating panel main container renders within named div. however, version 4.2 (and possibly earlier 4.x's) suggests mvc application approach seem far superior.

---- edits

i have realised have put starting points question.

  1. source example generated extjs's cmd command generates "application" framework skeleton.
  2. skeleton of application consisted of many files including engine reference, , other references, not able include here sources in "application" dir/folder. skeleton of application can done using cmd in fashion: sencha -sdk /myuserroot/sencha/cmd/3.1.1.274 generate app extgenapp /mywebroot/htdocs/extja_genapp generates files , folders , copies necessary files in place.
  3. "user" activity area in "app" dir. app dir has subdirs views, controllers, models , additional stuff.
  4. as in many other frameworks expected keep folder structure framework can find appropriate files , initialise them.
  5. list of files:

index.html (in root of generated application)

    <!doctype html>     <html>     <head>         <meta charset="utf-8">         <title>extgenapp</title>         <!-- <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="app/app.js"></script>         <!-- </x-compile> -->     </head>     <body>         <h1>html before</h1>         <div id="appbox"></div>         <h1>html after</h1>     </body>     </html>

app/app.js

    /*         file generated , updated sencha cmd. can edit file         needed application, these edits have merged         sencha cmd when performs code generation tasks such generating new         models, controllers or views , when running "sencha app upgrade".          ideally changes file limited , work done         in other places (such controllers). if sencha cmd cannot merge         changes , generated code, produce "merge conflict"         need resolve manually.     */      // not delete - directive required sencha cmd packages work.     //@require @packageoverrides        ext.application({         name: 'extgenapp',          views: [             'main',             'appboxview'         ],          controllers: [             'main'         ],          launch: function() {             new ext.view.appboxview({                 renderto: 'appbox'             });;  // generates error               }     });

note: there no launch function there auto generate viewport (one gets default generator)

app/controller/main.js

    ext.define('extgenapp.controller.main', {         extend: 'ext.app.controller'     });

app/view/appboxview.js

    ext.define('extgenapp.view.appboxview', {         extend: 'ext.panel.panel',          requires:[             'ext.tab.panel',             'ext.layout.container.border'         ],          layout: {             type: 'border'         },          items: [{             region: 'west',             xtype: 'panel',             title: 'west',             width: 150         },{             region: 'center',             xtype: 'tabpanel',             items:[{                 title: 'center tab 1'             }]         }]     });

this shall initial layout on screen (afaik)

and finally:

app/view/main.js

    ext.define("extgenapp.view.main", {         extend: 'ext.component',         html: 'hello, world!!'     });

which shall, understood, "content".

as is, generates error of not founding "ext.view.appboxview" , how looks me, framework not initialise application.

a viewport specialized ext.container.container auto sizes the document body.

as such, can create own in launch method:

launch: function(){     new mycontainer({         renderto: 'mydiv'     }); }

Comments

Post a Comment

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

Image
given ax = plt.subplot() : ax.bar()[0] can passed plt.legend() . however, ax.bar3d() returns none . how create legend displayed bars? update: passing legend="stuff" ax.bar3d() , calling ax.legend() raises /usr/lib/python2.6/site-packages/matplotlib/axes.py:4368: userwarning: no labeled objects found. use label='...' kwarg on individual plots. warnings.warn("no labeled objects found. " you need use proxy artist legends not supported. this code: from mpl_toolkits.mplot3d import axes3d import matplotlib.pyplot plt import numpy np fig = plt.figure() ax = fig.add_subplot(111, projection='3d') x, y = np.random.rand(2, 100) * 4 hist, xedges, yedges = np.histogram2d(x, y, bins=4) elements = (len(xedges) - 1) * (len(yedges) - 1) xpos, ypos = np.meshgrid(xedges[:-1]+0.25, yedges[:-1]+0.25) xpos = xpos.flatten() ypos = ypos.flatten() zpos = np.zeros(elements) dx = 0.5 * np.ones_like(zpos) dy = dx.copy() dz = hist.flatten() ax...
Read more

java - Multi-Label Document Classification -

i have database in store data based upon following 3 fields: id, text, {labels}. note each text has been assigned more 1 label \ tag \ class. want build model (weka \ rapidminer \ mahout) able recommend \ classify bunch of labels \ tags \ classes given text. i have heard svm , naive bayes classifier, not sure whether support multi-label classification or not. guides me right direction more welcome! the basic multilabel classification method one-vs.-the-rest (ovr), called binary relevance (br). basic idea take off-the-shelf binary classifier, such naive bayes or svm, create k instances of solve k independent classification problems. in python-like pseudocode: for each class k: learner = svm(settings) # example labels = [class_of(x) == k x in samples] learner.learn(samples, labels) then @ prediction time, run each of binary classifiers on sample , collect labels predict positive. (both training , prediction can done in parallel, since problems assumed ...
Read more

php - Dynamic url re-writing using htaccess -

how can rewrite http://mydomain.com/test/master.php?catid=2&subcatid=8 http://mydomain.com/test/master.php/catname/subcat using .htaccess file. once rewritten, how can access these parameters in master.php? note: untested, let me know if doesn't work. rewriterule ^master.php/([a-za-z0-9_-]+)/([a-za-z0-9_-]+)$ /master.php?catid$1&subcatid=$2 [l]
Read more