天道酬勤,学无止境

Extjs table/grid auto expand to full

How do I go about making the gridpanel/table in extjs auto expand based on the window size? Thanks I added layout :'fit'.. i didn't change much

var listView = Ext.create('Ext.grid.Panel', {
    store: mystore,
    multiSelect: true,
title:'Notifications for ' + jsonServiceId + ' <i>(0 items selected)</i>',
    viewConfig: {
        emptyText: 'No images to display'
    },
    //reserveScrollOffset: true,
renderTo: containerEl,
         layout:'fit',

    columns: [{
        text: 'Sell',
        flex: 10,
        dataIndex: 'Sell',
       renderer: function(value, metaData, record) {
       //  alert(record.get('Sell'));


  }
    },{
        text: 'Class',
        flex: 10,
        dataIndex: 'ClassName'
    },


  {
        text: 'Last Changed',
        flex: 20,
        dataIndex: 'LastChangedAt',
  xtype: 'datecolumn',
        format: 'd-M-Y h:i a'
    }
]     
});
标签

评论

It's a layout thing. You should add layout: 'fit' to the parent container. It will make your grid expand to the size of parent container.

Just as here in example:

http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout-browser/layout-browser.html

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 关于在浏览器中测试extjs代码的任何建议,最好是使用硒?(Any suggestions for testing extjs code in a browser, preferably with selenium?)
    问题 我们一直在成功地使用selenium来处理高级网站测试(除了在模块级别进行广泛的python doctests之外)。 但是,现在我们在很多页面上都使用extjs,事实证明,很难将Selenium测试用于网格等复杂组件。 有没有人成功为基于extjs的网页编写自动化测试? 大量的谷歌搜索发现存在类似问题的人,但答案却很少。 谢谢! 回答1 使用Selenium测试ExtJS的最大障碍是ExtJS不会呈现标准HTML元素,并且Selenium IDE会天真地(正确地)生成针对仅用作装饰的元素的命令-多余的元素可帮助ExtJS应用于整个桌面,外观。 这是我针对ExtJS应用编写自动Selenium测试时收集的一些提示和技巧。 一般提示 定位元素 通过在Firefox上使用Selenium IDE记录用户操作来生成Selenium测试用例时,Selenium将基于HTML元素的ID记录记录的操作。 但是,对于大多数可单击的元素,ExtJS使用生成的ID(例如“ ext-gen-345”),即使在未进行任何代码更改的情况下,这些ID在以后访问同一页面时也可能会更改。 在记录了用于测试的用户操作之后,需要手动进行所有取决于生成的ID的操作并替换它们。 可以进行两种类型的替换: 用CSS或XPath定位器替换ID定位器 CSS定位符以“ css =“开头,而XPath定位符以“ //
  • Treepanel 在没有子 Extjs 的节点上展开/折叠(Treepanel expand/collapse on a node without children Extjs)
    问题 我正在使用 ExtJs 4.2。 在我的树面板中使用属性useArrows:true 。 如何在树面板中没有子节点的节点上显示折叠/展开图标。展开和折叠时,它应该触发与树面板相关的所有事件。 我尝试添加 1- children:[{}]给了我未定义的属性。 2- loaded:true什么也没发生 3- singleExpand:true什么也没发生 4- allowChildren:true什么也没发生 回答1 一种技巧是将子项实际添加到节点,但用 css 隐藏它们。 所以你会做这样的事情: #tree_element_id .x-grid-tree-node-leaf{ display:none; }
  • Extjs4.2.1 - 将 json 加载到树面板失败(Extjs4.2.1 - Load json to treepanel fails)
    问题 我创建了一个树面板,然后创建了store var store = Ext.create('Ext.data.TreeStore', { autoload: false, proxy: { type: 'ajax', url: 'data.php', reader: { type: 'json', root: 'results' } } }); 我的服务器打印 json 看起来像 { "results": [ { id : '1' , text : '1', expanded: true, children :[ { id : '5' , text : '5', leaf:true}, { id : '6' , text : '6', leaf:true} ] }, { id : '2' , text : '2', leaf:true}, { id : '3' , text : '3', leaf:true}, { id : '4' , text : '4', leaf:true}, { id : '7' , text : '7', leaf:true}, { id : '8' , text : '8', leaf:true}, { id : '9' , text : '9', leaf:true}, { id : '10' , text : '10', expanded
  • Treepanel expand/collapse on a node without children Extjs
    I am using ExtJs 4.2. Am using property useArrows:true in my tree panel. How to show the collapse/expand icon on a node without children in a tree panel.On expand and collapse it should fire all the events related to the tree panel. I tried adding 1-children:[{}] gave me undefined property. 2-loaded:true nothing happened 3-singleExpand:true nothing happened 4-allowChildren:true nothing happened
  • Extjs4:如何在多个商店或模型之间共享数据?(Extjs4: How to share data between multiple stores or models?)
    问题 我是Ext的新手,我正在努力找出Models商店和代理。 服务器返回一个大的JSON对象。 例如。 { "responseHeader":{ "status":0, "QTime":12, "params":{ "facet":"true", "facet.limit":"40" } }, "response":{ "numFound":3806, "start":0, "docs":[ { //Lots of fields "id":"1234", ... //Some array properties "testfield":[ "", "" ], ... } ] }, "facet_counts":{ "facet_queries":{ "email":3806 }, "facet_fields":{ "emailaddress":{ }, "subject":{ "candles":136, "filter":130 }, "fromemail":{ }, //... }, "facet_dates":{ }, "facet_ranges":{} }, "highlighting":{ "some doc id":{ "emailtext":[ " Tel.: blah blah <em>blah</em>" ], "combined":[ "<em>Email<
  • 有没有办法在 ExtJS 4 中禁用 treeview 的节点(Is there any way to disable nodes of treeview in ExtJS 4)
    问题 我的目的是禁用西部地区树视图的某些节点。 下面的代码片段显示了它: root: { expanded: true, id: 'treeview1', children: [ {"text": "Make Copy", "leaf": true, id:'HS1', "**disabled**": true, "**hidden**" : true} ] } 为什么禁用和隐藏属性在 ExtJS 4 中不起作用。 有没有插件可以实现它。 回答1 树面板中的节点是Ext.data.NodeInterface对象。 它没有禁用或隐藏的属性,但它有cls并且你可以添加一个display: none样式来隐藏节点。 例子: 在 css 文件中: .x-hidden-node {display: none !important;} 在 extjs 代码中: root: { expanded: true, id: 'treeview1', children: [{ text: 'Make Copy', leaf: true, id:'HS1', cls : 'x-hidden-node' }] } 对于禁用的功能,你可以使用TreePanel中的beforeitemclick中,你可以手动读取残疾人财产的事件。 例子: Ext.create('Ext.tree.Panel', { (...)
  • Extjs Treepanel:CSS 更改默认图标(节点和叶)(Extjs Treepanel: CSS to change default icons (node and leaf))
    问题 我有一个像http://jsfiddle.net/bmbMy/这样的树面板我尝试使用 css 更改默认图标(节点和叶)。 但这不起作用。 .x-grid-row .x-grid-tree-node-expanded { background: url('http://icons.iconarchive.com/icons/sekkyumu/developpers/16/Play-Green-Button-icon.png') no-repeat center center !important; } .x-grid-row .x-grid-tree-node-leaf { background-image:url('http://icons.iconarchive.com/icons/graphicrating/koloria/16/Button-Play-Pause-icon.png'); } 我该怎么做谢谢 回答1 您没有覆盖正确的 css 类。 这是您需要的: .x-grid-tree-node-expanded .x-tree-icon-parent { background: url('http://icons.iconarchive.com/icons/sekkyumu/developpers/16/Play-Green-Button-icon.png') no
  • 如何使 extjs 手风琴垂直滚动(How to make extjs accordion vertically scrollable)
    问题 在这里摆弄。 如果手风琴中有很多面板,它们就会在垂直方向上相互碰撞,无法展开。 我想让手风琴的总高度等于标题的高度加上一个面板主体的高度(展开)。 然后父面板应该只有一个滚动条来显示该高度。 这样总是有一个打开的手风琴,你可以向下滚动到任何标题,而不是打开那个。 这不可能吗? 如果我将 GroupListView 的布局改为 vbox 而不是手风琴,我就会得到我想要的但不幸的是当你展开/折叠面板时,动画都搞砸了(不像手风琴那样工作) 回答1 在 ExtJS 5.1.1 中,在布局声明上设置fill: false似乎会产生预期的结果。
  • Extjs4.2.1 - Load json to treepanel fails
    I create a treepanel and I and create store like var store = Ext.create('Ext.data.TreeStore', { autoload: false, proxy: { type: 'ajax', url: 'data.php', reader: { type: 'json', root: 'results' } } }); my server print json look like { "results": [ { id : '1' , text : '1', expanded: true, children :[ { id : '5' , text : '5', leaf:true}, { id : '6' , text : '6', leaf:true} ] }, { id : '2' , text : '2', leaf:true}, { id : '3' , text : '3', leaf:true}, { id : '4' , text : '4', leaf:true}, { id : '7' , text : '7', leaf:true}, { id : '8' , text : '8', leaf:true}, { id : '9' , text : '9', leaf:true},
  • 在 html div 中呈现 ExtJS 4+ MVC 应用程序 - 操作方法?(Rendering ExtJS 4+ MVC application in a html div - how-to?)
    问题 到目前为止,我发现的所有示例都解释了如何在“视口”中呈现 ExtJS (4.2) MVC 应用程序,换句话说,这意味着整个浏览器屏幕,并占据整个 HTML BODY。 我想在已命名的 DIV 中的现有 HTML 页面中呈现应用程序,以便我可以围绕应用程序进行 HTML 设计。 <div id="appdiv"><!-- application runs here --></div> 我见过一些带有 ExtJS 4 示例的站点,它们使用技巧通过使用 IFRAME 在页面内呈现 ExtJS 应用程序。 是否有可能避免 IFRAME? 并且,如果是,ExtJS 4.2 应用程序的骨架在 div 中呈现时会是什么样子。 注意:在 ExtJS 3 中,我通过创建一个面板作为主容器找到了解决方案,该面板在命名的 div 中呈现。 但是,4.2 版(可能还有更早的 4.x 版)建议的 MVC 应用程序方法似乎要好得多。 ---- 编辑 我已经意识到我必须为这个问题设定起点。 此示例的源代码由 ExtJS 的 CMD 命令生成,该命令生成“应用程序”框架框架。 应用程序的骨架由许多文件组成,包括引擎参考和其他参考,因此我无法在此处包含“应用程序”目录/文件夹中的所有源。 应用程序的框架可以使用 cmd 以下列方式完成: sencha -sdk /myuserroot/Sencha/Cmd/3
  • How to make extjs accordion vertically scrollable
    fiddle here. If there are many panels in the accordion they vertically just start bumping up against each other and can't be expanded. I would like to make the total height of the accordion the height of the headers plus the height of one panel body (expanded). And then the parent panel should just have a scrollbar to show that amount of height. This way there is always an open accordion and you can scroll down to any header and instead open that one. Is this not possible? If I turn the layout of GroupListView to vbox intead of accordion I then get what I want but unfortunately when you expand
  • How to stop extjs treepanel from loading infinitely?
    Finally after struggling with extjs tree panel, tree store and building custom reader to read and convert pentaho data for 2 weeks I have managed to load pentaho data into treepanel of extjs. Now my Tree panel is loading same data infinitely. Treepanel looks as follows : Part of my json data looks as follows : { {name: 'US', candidateCount: 3, children: []}, {name: 'India', candidateCount: 922, children: [ {name: 'Goa', candidateCount:124, children: []}, {name: 'Maharashtra', candidateCount: 43, children: [ {name: 'Pune', candidateCount: 3}, {name: 'Mumbai', candidateCount: 33}, {name:
  • 重写Sencha ExtJS标准组件功能的步骤(两个示例是Extt.tree.Panel和Ext.data.TreeStore)(Steps to overriding Sencha ExtJS standard component functionality (Ext.tree.Panel & Ext.data.TreeStore as two examples))
    问题 假设我正在扩展标准的Sencha ExtJS 4小部件/组件,并且发现了很多无法按照我想要的方式工作的东西,或者它们只是坏了,而Sencha并没有解决该问题。该组件呢。 我将使用Sencha ExtJS Ext.tree.Panel和Ext.tree.Store作为两个示例组件。 重写构造函数,配置,属性,方法和事件的最基本步骤是什么,这样我就可以查找和修复该组件的问题,而无需修改我当前正在使用的核心ExtJS 4框架JS文件? 我意识到有时框架中有太多功能,可能会忽略某个地方的配置,而没有意识到他们可以使用标准实现解决问题。 有了更多有关框架的经验,就可以纠正这一问题。 抛开这些,这些最基本的步骤是什么? 假设我们从这两个实现开始,并从最基本的角度开始。 仅供参考:我确实使用Ext.Direct服务器端堆栈轻松地工作了这两个组件的核心功能,并且可以通过IE与Sencha ExtJS Ext.tree.Panel组件一起解释所有与跨浏览器兼容的问题, Mozilla Firefox和Google Chrome,但我可能会花太多时间问其他问题。 我并不是说IE首先是定型的,因为所有这些浏览器都存在Ext.tree.Panel组件的问题。 我宁愿在这里学习如何钓鱼,这样我就能钓到自己的鱼。 一旦我更好地理解了这些与树相关的类,我将提出更具体的问题。 http://docs
  • Rendering ExtJS 4+ MVC application in a html div - how-to?
    All examples that I have found so far explain how to render ExtJS (4.2) MVC application within the "viewport", which in other words means full browser screen, and occupying whole HTML BODY. I would like to render application within the existing HTML page within named DIV, so that I can have HTML design around the application. <div id="appdiv"><!-- application runs here --></div> I've seen some sites with ExtJS 4 examples that use trick to render ExtJS app within the page by using IFRAME. Is it possible to avoid IFRAME? And, if it is, how skeleton of ExtJS 4.2 application shall look like if it
  • 如何使用 Excel 中的展开和折叠操作将网格数据沿组标题/摘要记录导出到 Excel?(How to export grid data to excel along group headers/ summary records with expand and collapse action in Excel?)
    问题 我已经使用 Extjs 4 完成了应用程序。我需要将网格数据导出到 excel。 我有网格,它包含许多记录,按组标题/摘要(折叠/展开操作)显示记录。 同样的事情我需要将网格数据导出到 excel 相同的活动需要在 excel 表中折叠/展开。 我试过我能够将带有组 headers.summary 的网格记录导出到 excel,很酷它正在工作,但在 excel 表中没有发生折叠/展开。 我需要通过编写代码来实现此功能。 谁能告诉我如何实现这一目标? 是否可以使用 extjs? 非常感谢。 谢谢你。 回答1 像这样的东西不是开箱即用的。 然而,有一些从 ExtJS 到 Excel 的导出器:http://www.sencha.com/forum/showthread.php?136598-Export-store-to-Excel 我们在内部做的是用 .NET 生成我们的 Excel 后端,所以我们有更多的控制权。
  • 结合 grid/pack Tkinter(Combining grid/pack Tkinter)
    问题 我知道过去有很多关于 grid 和 pack 的问题,但我只是不明白如何将两者结合起来,因为我在两个方向(行/列)扩展我的“表格”时遇到了困难。 按钮我希望保持相同的大小,但总是留在窗口的底部。 “表格”但是我希望通过调整窗口大小自动扩展,但似乎无法使其工作。 将“win1”更改为 pack 的工作原理是它保持中心位置,但仅此而已。 我知道如何使用 pack 实现相同的效果,例如粘性等,我需要更改术语。 代码如下(显示基本框架和几个小部件,不是完整代码): root = Tk() win1 = Frame(root) win1.pack() win1.grid_columnconfigure(0, weight=1) win1.grid_rowconfigure(1, weight=1) frame_table = ttk.Frame(win1, style="Black.TLabel", relief='sunken', borderwidth=1) frame_table.pack(row=2, column=0, padx=1, pady=1, sticky= "nsew") frame_table.grid_columnconfigure(0, weight=1) frame_table.grid_rowconfigure(1, weight=1) text
  • 禁用 ExtJs 应用程序的缓存(Disable caching for ExtJs app)
    问题 我们有一个用 Sencha cmd 5.0.1.231 构建的 ExtJS 5.01 应用程序。 我们面临的问题是浏览器似乎缓存了我们应用程序的旧版本。 在为我们的应用程序提供服务时查看 chrome 上的网络流量,我可以看到 app.js、app.css 文件都附加了 ?_dc={timestamp} 。 现在,这告诉我每次发布我的应用程序的新版本(更新此时间戳)时,浏览器都应该获得一个新版本。 但似乎有时仍然提供旧版本。 还有什么我需要做的胸围缓存吗? 谢谢 回答1 我不明白为什么“有时”浏览器会缓存您的文件,即使默认情况下禁用缓存。 我什至通过在我的app.js放置这种和平的代码来强制框架尽可能使用缓存: Ext.Loader.setConfig({ enabled: true, disableCaching: false }); 在开发时,我打开我的 DevTools 并设置禁用缓存(当 DevTools 打开时)。 这将不允许 Chrome 缓存文件。 但可能是在您的app.json您通过设置"update"或"appcache"强制“缓存”到您的本地存储中。 检查您的 localstorage 和您的 app.json 以进行验证。 回答2 在app.json 中将app.js 的更新属性设置为full : { // Path to file. If the
  • ExtJS combobox problem in IE
    I have an ExtJS combobox with a remote data store behind it. In all browsers it works fine, except in IE (all versions that I've tested) where the combobox expands for a splitsecond, showing a "loading" icon and then it disappears again. Clicking it again after this doesn't make it expand at all anymore. Basically: it's not being populated. On the server side, everything is fine. The Controller action is reached (using ASP.NET MVC) which returns Json data. The Json is properly formed (all other browsers swallow it at least). A weird thing is, that when I put a breakpoint in the Controller
  • Trouble with TreeStore in ExtJS 4.0 MVC application
    The new release of ExtJS can make your chrome unstable (Or is it my code?)! Let me explain my situation. I am working on the new MVC architecture of ExtJS 4.0. I have a tree panel displaying my applications menu or navigation. As per the architecture, I tried to split my tree panel into controller, view and a separate store. Here is my view: Ext.define('CRM.view.menu.View', { alias: 'widget.menutree', extend: 'Ext.tree.Panel', initComponent: function() { console.log('initComponent of View...'); Ext.apply(this, { title: 'Simple Tree', width: 200, store: 'MainMenu', rootVisible: false }); this
  • ExtJS4:TreePanel Store 正在通过 Itemclick 一次又一次地加载 json 文件(ExtJS4: TreePanel Store is loading the json File again and again by Itemclick)
    问题 我有一个 json,它有 3 个主菜单点。 在第一个菜单点中,有一个子菜单,因此菜单点 1 不是“叶子”。 当我单击文件夹符号时,整个菜单(整个 json 文件)再次位于子菜单下。 所以它的无穷大。 有人可以帮我吗? 谢谢你!! 这是我的文件: 应用程序/数据/tree.json { 'result': [ { "text": "Point1", 'children':[ { "text": "SubPoint1", 'leaf':true }, ] }, { "text": "Point2", 'leaf':true }, { "text": "Point3", 'leaf':true }, ] } 视图/TreeMenu.js Ext.define('App.view.TreeMenu', { extend: 'Ext.tree.Panel', alias: 'widget.treemenu', title:'Title', store: 'TreeMenu' }); 商店/TreeMenu.js Ext.define('App.store.TreeMenu', { extend: 'Ext.data.TreeStore', requires: 'App.model.TreeMenu', model: 'App.model.TreeMenu', proxy: { type