Results 1 to 2 of 2

Thread: Selection of a product in grid locks the product. It can't be selected a 2nd time.

  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2010
    Posts
    7
    Vote Rating
    0
      0  

    Default Selection of a product in grid locks the product. It can't be selected a 2nd time.

    We're using ExtJS 5.1.2. On this grid of products, when a product is selected a modal popup with its details appears.

    When the popup is closed, the same row of the grid can't be selected again. We have to select another product and then select it again. The grid on the right is the product list, the popup that is populated is on the left. There is a note near the product number text box, ignore it. This graphic is a wire frame, that note defines what modification we want to make for this control.

    When the detail popup (modal) is closed, the product that was selected to open it is 'dead' -- won't react. In this case, VIRGINIA HIGHWAY RESEARCH COUNCIL was selected. The modal was closed and then VIRGINIA HIGHWAY RESEARCH COUNCIL, if selected again does nothing. Refreshing the page or moving to another row and back resets all items in the grid. Then, VIRGINIA HIGHWAY RESEARCH COUNCIL can be selected once more.

    There isn't anything obvious or intuitive in the API such as this:

    , someConfigProperty: function(){ here is my code, etc. }
    , allowRowReselection: true
    , theNextProperty: someConfigStuff

    ... and so on.

    Is this a bug, overlooked use case, something like that? If there's something in the UI that allows it already, please info me.

    productdetails.pngproductgrid.jpg

    Here is the code that sets up the grid on the right. There is a viewConfig section that has only one property in it, markDirty: false. My best guess is, this is where you'd set something up like allowing row reselection.



    Ext.define('NewProducts.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
    'Ext.grid.Panel',
    'Ext.layout.container.HBox',
    'Ext.layout.container.Fit',
    'Ext.toolbar.Toolbar',
    'Ext.button.Button',
    'Ext.form.field.Text',
    'Ext.form.field.TextArea',
    'Ext.form.field.Number',
    'Ext.form.field.Date',
    'Ext.form.field.ComboBox',
    'Ext.window.Toast',
    'NewProducts.view.main.MainController',
    'NewProducts.view.main.MainModel',
    'NewProducts.view.main.Detail',
    'NewProducts.view.main.Manufacturer',
    'NewProducts.view.main.Category',
    'NewProducts.ux.form.field.ClearButton',
    'NewProducts.ux.form.field.OperatorButton',
    'NewProducts.ux.grid.FilterBar'
    ],


    xtype: 'app-main',

    controller: 'main',
    viewModel: {
    type: 'main'
    },


    layout: {
    type: 'border'
    },
    listeners: {
    resize: 'onResize'
    },


    items: [
    {
    region: 'north',
    border: false,
    items: [{
    height: 29,
    border: false,
    layout: 'hbox',
    defaults: { border: false },
    items: [{
    flex: 1,
    xtype: 'image',
    src: 'resources/images/OhioDotGovHeaderSmall_01.gif'
    }, {
    contentEl: 'head-panel',
    frame: false
    }, {
    flex: 1,
    xtype: 'image',
    src: 'resources/images/OhioDotGovHeaderSmall_03.gif'
    }]
    }, {
    border: false,
    xtype: 'panel',
    style: 'background-color: white',
    items: [{
    html: '<center><h2 style="margin:5px">New Products Listing</h2> <div style="padding-bottom: 5px">Click on a product to see more details. Click on the column names to sort by that column. Filtering is also possible by column.</div></center>'
    }]
    }, {
    border: false,
    hidden: NewProducts.IsReadOnly,
    xtype: 'toolbar',
    items: [{
    text: 'Manage Manufacturers',
    iconCls: 'icon-manufacturer',
    handler: 'manufacturerShow'
    }, {
    text: 'Manage Categories',
    iconCls: 'icon-category',
    handler: 'categoryShow'
    }, {
    text: 'Create Product Detail',
    iconCls: 'icon-add',
    handler: 'createDetail'
    }, '->', {
    xtype: 'displayfield',
    value: NewProducts.User ? NewProducts.User.fullname : "",
    style: 'vertical-align: bottom',
    padding: '0 10 0 0'
    }, {
    text: 'Logout',
    iconCls: 'icon-logout',
    handler: 'logout'
    }]
    }]
    },{
    region: 'center',
    border: false,
    layout: 'fit',
    items: [{
    itemId: 'productsGrid',
    xtype: 'grid',
    viewConfig: {
    markDirty: false
    },
    plugins: [{
    ptype: 'filterbar',
    renderHidden: false,
    showShowHideButton: false,
    showClearAllButton: false,
    showClearButton: true
    }],
    bind: {
    store: '{productData}'
    , selection: '{product}'
    },
    columns: [
    {
    text: "Number", width: 125, dataIndex: 'Id', sortable: true, filter: {
    type: 'int',
    minValue: 1
    }
    },
    { text: "Manufacturer", flex: 1, dataIndex: 'ManufacturerDescription', sortable: true, filter: true },
    { text: "Product", flex: 1, dataIndex: 'ProductDescription', sortable: true, filter: true },
    { text: "Category", width: 175, dataIndex: 'CategoryDescription', sortable: true, filter: true },
    { text: "Initial Date", width: 140, dataIndex: 'InitialDate', xtype: 'datecolumn', format: 'm/d/Y', sortable: true, filter: true },
    { text: "Status", width: 125, dataIndex: 'StatusDescription', sortable: true, filter: true }
    ],
    forceFit: true,
    split: true
    }]
    }]
    });

  2. #2
    Ext JS Premium Member
    Join Date
    Nov 2010
    Posts
    7
    Vote Rating
    0
      0  

    Default

    Aha ... not as hard as I'd thought, just took a bit of perseverance. I'm used to the way docs are arranged for 4.x and below. It left a lot to be desired.

    After not finding what I needed, then posting this entry, then taking one more dive, the docs were found. Well, if anyone has the same question, the answer is set up the selModel{} config.

    items: [{
    itemId: 'productsGrid',
    xtype: 'grid',
    selModel: {
    allowDeselect: true
    },
    viewConfig: {
    markDirty: false
    },
    plugins: [{
    ptype: 'filterbar',
    renderHidden: false,
    showShowHideButton: false,
    showClearAllButton: false,
    showClearButton: true
    }],

Similar Threads

  1. Product information help
    By marccollin in forum Community Discussion
    Replies: 1
    Last Post: 9 Sep 2014, 7:05 AM
  2. Best Sencha Product
    By anisov88 in forum Community Discussion
    Replies: 1
    Last Post: 25 Dec 2011, 4:38 AM
  3. Replies: 3
    Last Post: 22 Nov 2010, 3:26 AM
  4. product list
    By Isaac_cm in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 25 Sep 2007, 5:16 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •